A simple boilerplate for FastAPI single page applications.
There are 2 environments available one for production with Caddy2
as a reverse proxy and one for development.
You can choose to work with docker containers or not.
In the app
folder we have the FastAPI
code. Make sure to add all dependencies in requirements.txt
.
In the ui
folder we have 3 boilerplate folders created with vite
(Vue, React, Svelte).
app
folder and start the FastAPI
with uvicorn main:app --reload --host 0.0.0.0 --port 5000
(see the api at localhost:5000
);ui/your-prefered-framework
folder and start the ui with npm run dev
(see the frontend at localhost:3000
);Notice that in vite.config.js
the host and port is modified:
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte()],
server: {
host: '0.0.0.0',
port: 3000
}
})
You can change the folder structure as you want. This setup is focused on making simple, easy to modify production and development environment.
Update Caddyfile
with:
.env
file as needed (you may need to change UI_DIST_DIR=/ui/svelte-app/dist
with your choosed frontend framework);npm run build
to let vite
generate the dist
folder.Notice in the docker-compose.prod.yml
that we didn't exposed any ports only Caddy2
will handle interaction with the outside world.
When the root of the domain name will be accessed, index.html
file will be served.
sudo
for each docker command: sudo groupadd docker
and sudo usermod -aG docker $USER
docker run -d -p 8000:8000 -p 9000:9000 --name=portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce
http://localhost:9000/
docker-compose logs -f container_name
docker-compose exec container_name bash or \bin\sh for alpine versions
docker-compose stop container_name
docker-compose up container_name
cd /home/user/.local/share/virtualenvs
(ubuntu)uvicorn main:app --reload --host 0.0.0.0 --port 3000
gunicorn main:app --workers=8 -b "0.0.0.0:3000" --worker-class=uvicorn.workers.UvicornWorker --log-level info