Fastapi frontend development
- Enter the
frontenddirectory, install the npm packages and start the live server using the
cd frontend npm install npm run serve
Then open your browser at http://localhost:8080
Notice that this live server is not running inside Docker, it is for local development, and that is the recommended workflow. Once you are happy with your frontend, you can build the frontend Docker image and start it, to test it in a production-like environment. But compiling the image at every change will not be as productive as running the local development server with live reload.
Check the file
package.json to see other available options.
If you have Vue CLI installed, you can also run
vue ui to control, configure, serve, and analyze your application using a nice local web user interface.
If you are only developing the frontend (e.g. other team members are developing the backend) and there is a staging environment already deployed, you can make your local development code use that staging API instead of a full local Docker Compose stack.
To do that, modify the file
./frontend/.env, there’s a section with:
VUE_APP_ENV=development # VUE_APP_ENV=staging
- Switch the comment, to:
# VUE_APP_ENV=development VUE_APP_ENV=staging
Removing the frontend
If you are developing an API-only app and want to remove the frontend, you can do it easily:
- Remove the
- In the
docker-compose.ymlfile, remove the whole service / section
- In the
docker-compose.override.ymlfile, remove the whole service / section
Done, you have a frontend-less (api-only) app. 🔥 🚀
If you want, you can also remove the
FRONTEND environment variables from:
But it would be only to clean them up, leaving them won’t really have any effect either way.