Skip to content

Build and Deployment

Building for production

cd frontend
npm install
npm run build

Vite compiles, bundles, and tree-shakes the React app into static files under frontend/dist/. These files can be served by any static host — a local web server, S3, or CloudFront.

Local preview of the production build

To test the production build locally before deploying:

cd frontend
npm run preview

This starts a local server on http://localhost:4173 that serves the dist/ directory without the Vite dev server or its proxy.

Proxy not available in preview mode

The Vite dev server proxy (/v1/* → http://localhost:8000) is only active during npm run dev. In preview mode and in production, the frontend must know the full API URL. Make sure VITE_API_BASE_URL or equivalent is set correctly before building.

AWS deployment

In production, the built frontend is stored in S3 and served by CloudFront.

The deployment flow: 1. Run npm run build to produce frontend/dist/ 2. Upload the contents of frontend/dist/ to the S3 frontend bucket 3. (Optional) Invalidate the CloudFront cache so users get the new version immediately

The scripts/aws/deploy-services.sh script handles this as part of the standard deployment sequence.

Why CloudFront + S3?

S3 stores the files, but it's not designed to be a web server (no gzip compression, no smart caching headers, no HTTPS). CloudFront sits in front of S3 and provides: - Edge caching close to users worldwide - HTTPS with a managed TLS certificate - Custom cache-control headers for versioned assets - Routing /v1/* requests to the API origin

The Terraform module infra/terraform/modules/frontend_hosting/main.tf configures both the S3 bucket and the CloudFront distribution.

API base URL in production

The frontend needs to know where the API is. This is configured at build time:

  • During npm run dev: Vite proxies /v1/* to http://localhost:8000 — no configuration needed.
  • In production: Set VITE_API_BASE_URL (or equivalent) to the deployed API URL before running npm run build. The frontend/src/api/client.ts uses this to construct API URLs.

The deployment scripts read the API URL from Terraform outputs and can inject it as a build environment variable.