You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Alejandra 9d703df254
🚚 Move new-frontend to frontend (#652)
1 year ago
..
src 🚚 Move new-frontend to frontend (#652) 1 year ago
.dockerignore 🚚 Move new-frontend to frontend (#652) 1 year ago
.env 🚚 Move new-frontend to frontend (#652) 1 year ago
.eslintrc.cjs 🚚 Move new-frontend to frontend (#652) 1 year ago
.gitignore 🚚 Move new-frontend to frontend (#652) 1 year ago
.prettierignore 🚚 Move new-frontend to frontend (#652) 1 year ago
.prettierrc 🚚 Move new-frontend to frontend (#652) 1 year ago
Dockerfile 🚚 Move new-frontend to frontend (#652) 1 year ago
README.md 🚚 Move new-frontend to frontend (#652) 1 year ago
index.html 🚚 Move new-frontend to frontend (#652) 1 year ago
modify-openapi-operationids.js 🚚 Move new-frontend to frontend (#652) 1 year ago
nginx-backend-not-found.conf 🚚 Move new-frontend to frontend (#652) 1 year ago
nginx.conf 🚚 Move new-frontend to frontend (#652) 1 year ago
package-lock.json 🚚 Move new-frontend to frontend (#652) 1 year ago
package.json 🚚 Move new-frontend to frontend (#652) 1 year ago
tsconfig.json 🚚 Move new-frontend to frontend (#652) 1 year ago
tsconfig.node.json 🚚 Move new-frontend to frontend (#652) 1 year ago
vite.config.ts 🚚 Move new-frontend to frontend (#652) 1 year ago

README.md

FastAPI Project - Frontend

Frontend development

  • Enter the frontend directory, install the NPM packages and start the live server using the npm scripts:
cd frontend
npm install
npm run dev

Then open your browser at http://localhost:5173/.

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.

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
  • ./scripts/*.sh

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

Generate Client

  • Start the Docker Compose stack.
  • Download the OpenAPI JSON file from http://localhost/api/v1/openapi.json and copy it to a new file openapi.json next to the package.json file.
  • To simplify the names in the generated frontend client code, modifying the openapi.json file, run:
node modify-openapi-operationids.js
  • To generate or update the frontend client, run:
npm run generate-client