tiangolo.fastapi/frontend

FastAPI Project - Frontend

The frontend is built with Vite, React, TypeScript, TanStack Query, TanStack Router and Chakra UI.

Frontend development

Before you begin, ensure that you have either the Node Version Manager (nvm) or Fast Node Manager (fnm) installed on your system.

• To install fnm follow the official fnm guide. If you prefer nvm, you can install it using the official nvm guide.

• After installing either nvm or fnm, proceed to the frontend directory:

cd frontend

• If the Node.js version specified in the .nvmrc file isn't installed on your system, you can install it using the appropriate command:

# If using fnm
fnm install

# If using nvm
nvm install

• Once the installation is complete, switch to the installed version:

# If using fnm
fnm use

# If using nvm
nvm use

• Within the frontend directory, install the necessary NPM packages:

npm install

• And start the live server with the following npm script:

npm run dev

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

Notice that this live server is not running inside Docker, it's 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 building 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 and playwright.

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

Automatically

• Activate the backend virtual environment.
• From the top level project directory, run the script:

./scripts/generate-client.sh

• Commit the changes.

Manually

• 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 at the root of the frontend directory.

• To generate the frontend client, run:

npm run generate-client

• Commit the changes.

Notice that everytime the backend changes (changing the OpenAPI schema), you should follow these steps again to update the frontend client.

Using a Remote API

If you want to use a remote API, you can set the environment variable VITE_API_URL to the URL of the remote API. For example, you can set it in the frontend/.env file:

VITE_API_URL=https://api.my-domain.example.com

Then, when you run the frontend, it will use that URL as the base URL for the API.

Code Structure

The frontend code is structured as follows:

• frontend/src - The main frontend code.
• frontend/src/assets - Static assets.
• frontend/src/client - The generated OpenAPI client.
• frontend/src/components - The different components of the frontend.
• frontend/src/hooks - Custom hooks.
• frontend/src/routes - The different routes of the frontend which include the pages.
• theme.tsx - The Chakra UI custom theme.

End-to-End Testing with Playwright

The frontend includes initial end-to-end tests using Playwright. To run the tests, you need to have the Docker Compose stack running. Start the stack with the following command:

docker compose up -d --wait backend

Then, you can run the tests with the following command:

npx playwright test

You can also run your tests in UI mode to see the browser and interact with it running:

npx playwright test --ui

To stop and remove the Docker Compose stack and clean the data created in tests, use the following command:

docker compose down -v

To update the tests, navigate to the tests directory and modify the existing test files or add new ones as needed.

For more information on writing and running Playwright tests, refer to the official Playwright documentation.