Skip to content

frontend

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

frontend

README.md

FastAPI Project - Frontend

The frontend is built with Vite, React, TypeScript, TanStack Query, TanStack Router, Tailwind CSS, and shadcn/ui.

Requirements

Quick Start

From the project root, install the dependencies and start the frontend development server:

bun install
bun run dev

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

Run uv run bash scripts/prestart.sh and uv run fastapi dev from the backend directory, with PostgreSQL running in Docker Compose. See ../development.md for the complete setup.

To serve the frontend with FastAPI, run bun run build from the frontend directory and open http://localhost:8000.

Check frontend/package.json to see the other available commands.

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 backend/app/main.py file, remove the app.frontend() call.

  • In the backend/Dockerfile file, remove the frontend build stage and the COPY --from=frontend-build instruction.

  • In the compose.override.yml file, remove the playwright service.

  • In the .github/workflows/deploy.yml file, remove the Set up Bun, Install frontend dependencies, and Build frontend steps.

  • In the .fastapicloudignore file, remove the !backend/app/frontend/ entry.

Done, you now have an API-only app. 🤓

Generate Client

Automatically

  • From the project root, run the script:
bash ./scripts/generate-client.sh
  • Commit the changes.

Manually

  • Make sure the backend is running.

  • Download the OpenAPI JSON file from http://localhost:8000/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:

bun run generate-client
  • Commit the changes.

Regenerate the client whenever backend changes affect the OpenAPI schema.

Using a Remote API

By default, the built frontend uses the same origin as the FastAPI app. If you want to use a remote API while running the Vite development server, 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://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/public - Static assets.
  • frontend/src/client - The generated OpenAPI client.
  • frontend/src/components - The components of the frontend, including the shadcn/ui components in frontend/src/components/ui.
  • frontend/src/hooks - Custom hooks.
  • frontend/src/lib - Shared frontend utilities.
  • frontend/src/routes - The frontend routes and pages.

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 run --rm backend bash scripts/prestart.sh
docker compose up -d --wait backend

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

bunx playwright test

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

bunx 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.