Cookiecutter FastUI Starter Template

Requirements

Setup

# Create a new project from the template
cookiecutter gh:JulianSobott/cookiecutter-fastui-starter
# Change into the new directory (adjust the name if you changed it)
cd fastui_starter
# Install python dependencies
poetry install
cd fastui_starter_app
# Install node dependencies
npm install

Hot Fix for fastui-bootstrap (temporary fix until the package is updated)

{
 "name": "@pydantic/fastui-bootstrap",
 "version": "0.0.22",
 "description": "Boostrap renderer for FastUI",
- "main": "dist/index.js",
+ "main": "dist/npm-fastui-bootstrap/src/index.js",
- "types": "dist/index.d.ts",
+ "types": "dist/npm-fastui-bootstrap/src/index.d.ts",

{
 "name": "@pydantic/fastui-bootstrap",
 "version": "0.0.22",
 "description": "Boostrap renderer for FastUI",
 "main": "dist/npm-fastui-bootstrap/src/index.js",
 "types": "dist/npm-fastui-bootstrap/src/index.d.ts",
 "author": "Samuel Colvin",
}

Usage in Development

# start the backend with reload (adjust fastui_starter to your project name)
poetry run uvicorn fastui_starter_app.main:app --reload
cd fastui_starter_app
# run the frontend in development mode
npm run dev

Usage in Production

# build frontend
cd fastui_starter_app
npm run build
cd ..
# start backend
poetry run uvicorn fastui_starter_app.main:app

Adding a new component

Frontend

const MyComponent: FC<{ text: string }> = ({ text }) => {
 return <div>Message from my own component: {text}</div>;
}

const customRender: CustomRender = (props) => {
 const { type } = props
 // You can name your library whatever you want (e.g. yourLib)
 if (type === 'Custom' && props.library === "yourLib") {
 switch (props.subType) {
 // Add your components here
 case 'MyComponent':
 return () => <MyComponent text={props.data as string} />
 default:
 return bootstrap.customRender(props)
 }
 } else {
 return bootstrap.customRender(props)
 }
}

Backend

 return [
 c.Page( # Page provides a basic container for components
 components=[
 c.Custom(data='This is a custom component', sub_type="myComponent", library="yourLib"),
 ]
 ),
 ]

def my_component(text: str) -> c.Custom:
 return c.Custom(data=text, sub_type="myComponent", library="yourLib")
# ...
 return [
 c.Page( # Page provides a basic container for components
 components=[
 my_component('This is a custom component'),
 ]
 ),
 ]