Building and Deploying React for Production

npm run dev (chapter 7) starts a DEVELOPMENT server WITH hot reload – for PRODUCTION, an OPTIMIZED, static build is needed INSTEAD.

Generating the production build

npm run build

Vite generates a dist/ directory WITH minified JavaScript/CSS, code splitting, and cache-friendly filenames (a hash in the filename) – EXACTLY the STANDARD flow offered by EVERY modern frontend build tool.

Environment variables for production

.env.production

VITE_API_URL=https://api.aufgaben-manager.example.com

Vite loads .env.production AUTOMATICALLY on npm run build – EXACTLY THE principle from chapter 74, now WITH the REAL, publicly reachable API domain instead of https://localhost/api.

Achtung: The API domain (chapter 98) and the frontend domain MUST be configured CONSISTENTLY in CORS_ALLOW_ORIGIN (API side) AND VITE_API_URL (frontend side) – A typo HERE manifests as a CORS error, which is HARD to DISTINGUISH from an authentication error.

Static hosting

dist/ contains ONLY static files (HTML/CSS/JS) – ANY static web host (Nginx, a CDN, EXACTLY as described in the earlier React tutorials) is ENOUGH, NO Node.js runtime server needed.

nginx.conf (excerpt)

location / {
    try_files $uri /index.html;
}

try_files $uri /index.html is CRITICAL for React Router (chapter 81): a DIRECT request to /projects/1 MUST serve index.html (React Router THEN takes over the CLIENT-side routing), instead of returning a server-side 404.

Both domains working together

Three public endpoints, ONE full-stack system

https://aufgaben-manager.example.com        ← static React hosting (dist/)
https://api.aufgaben-manager.example.com    ← API Platform (chapter 98)
https://api.aufgaben-manager.example.com/.well-known/mercure  ← Mercure hub (block 8)

Tipp: A CI/CD workflow (e.g. GitHub Actions, known from the separate CI/CD tutorials) would AUTOMATICALLY run `npm run test` (chapters 95-96), `npm run build`, AND an automatic upload of the dist/ directory ON EVERY push – EXACTLY the final STEP to turn THIS course into a REAL, MAINTAINABLE project.