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.