Fastapi frontend development

Теги: fastapi  python 

Актуальный фулстек-шаблон находжится тут

  • Enter the frontend directory, install the npm packages and start the live server using the npm scripts:
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 ./frontend directory.
  • In the docker-compose.yml file, remove the whole service / section frontend.
  • In the docker-compose.override.yml file, remove the whole service / section frontend.

Done, you have a frontend-less (api-only) app. 🔥 🚀

If you want, you can also remove the FRONTEND environment variables from:

  • .env
  • .gitlab-ci.yml
  • ./scripts/*.sh

But it would be only to clean them up, leaving them won’t really have any effect either way.