This app shows how to configure a SvelteKit frontend with a FastAPI backend and have them run inside of Docker containers using Docker Compose.
You can clone this repo, but here are the instructions to replicate this stack yourself with the updated versions of SvelteKit, FastAPI, and Docker:
cd
into your project folder.npm init svelte@next
. Where should we create your project?
type client
. When prompted, select the options that you want for your project. (NOTE: This repo uses TypeScript, so some of the configs in this repo are specific to TypeScript.) This will create your SvelteKit project inside a directory named client
. svelte.config.js
, tsconfig.json
files.package.json
file, add --host
to the end of your dev
script so your Docker containers can communicate with each other: "dev": "svelte-kit dev --host"
.app.html
file that is inside the /client/src
folder to index.html
and move it directly inside of the /client
folder. So its new location will be /client/index.html
.express-web-server.js
file directly inside the /client
folder and copy the code from this repo's express-web-server.js
file to use as a starting point. Or you can configure Nginx as your web server.@sveltejs/adapter-static
, express
, http-proxy-middleware
).server
.server
directory in this repo into the server
directory of your project./server/main.py
file has a lot of comments that might be helpful in understanding things like how requests work in an SPA app.Makefile
, docker-compose.yml
, docker-compose.dev.yml
, and .dockerignore
files from this repo's root folder into your project's root folder.Dockerfile.client
and Dockerfile.client.dev
files from this repo's client
folder into your project's client
folder.Dockerfile.server
and Dockerfile.server.dev
files from this repo's server
folder into your project's server
folder.The Makefile
inside the project root direct is configured with a list of commands to start building Docker containers and to run Docker Compose in either development or production modes. If you have Make
installed on your computer, then you can run commands like this: make dev-build
or make dev-run
. If you do not have Make
installed, then you can run commands like this: docker-compose -f docker-compose.dev.yml build
or docker-compose -f docker-compose.dev.yml up
.
NOTES:
make
or docker-compose
commands should be run from inside the project root directory.Makefile
in this repo is heavily commented, so you should be able to understand the commands that are listed there.cd
into the client
directory and run npm run build
. That will create a new /client/build
directory that contains bundled and optimized JavaScript, CSS, and image files./server/main.py
file, scroll to the catch-all route (the last route at the bottom), comment out the return statement that begins with return RedirectResponse
, and uncomment the return statement that begins with return FileResponse
.cd
into the server
directory and run uvicorn main:app --host=0.0.0.0 --port=8000
. The server should now be serving up the client side code for the /client/build
directory. Open a browser and navigate to localhost:8000
. You should see the app in the browser.The /client/svelte.config.js
file is where the configurations are located for proxying frontend requests to the backend server. The main.py
file also includes CORS configurations to allow requests from the frontend during development because the frontend code will run on a different port during development.