npm run build
# Deploy the resulting dist/ folder to a static host (Vercel, Netlify, GitHub Pages, etc.)Since a React app built with Vite compiles down to plain HTML, CSS, and JavaScript files inside dist/, it can be hosted by any static hosting provider — no special server-side runtime is needed for the frontend itself. Popular options (Vercel, Netlify, GitHub Pages, Cloudflare Pages) all offer generous free tiers well-suited to personal and small projects.
Recall Chapter 26's React Router: URLs like /dashboard only exist inside your single-page app's JavaScript — there's no actual dashboard.html file on the server. Visiting that URL directly (rather than navigating there from within the app) causes a 404 unless the host is configured to redirect all unknown routes back to index.html, letting React Router take over from there:
// Example: Netlify's _redirects file
/* /index.html 200Most static hosts let you connect a custom domain (like www.myapp.com) by adding DNS records pointing to their servers, and automatically issue a free HTTPS certificate (via Let's Encrypt) once that's configured — HTTPS is essentially mandatory today, both for user trust and because many browser APIs (like geolocation) simply refuse to work on insecure http:// connections.
If your app also has a backend (from JDBC/database work, or a custom API), that typically needs a different kind of hosting that can run a server process continuously (like Railway, Render, or a cloud VM), separate from your static frontend. CI/CD (Continuous Integration/Continuous Deployment) automates this whole process — a GitHub Actions workflow, for example, can automatically run your tests (Chapter 34) and deploy a new build every time you push to your main branch, removing manual deployment steps entirely.
This is one of the most common first-deployment surprises: your app works perfectly when you navigate through it normally, but refreshing the page on any route other than / shows a 404 error. Configuring your host's fallback/redirect rule (as shown above) to serve index.html for all unmatched routes fixes this immediately.
Write out (in comments) a basic production deployment checklist covering environment variables, the production build command, and SPA routing configuration.
// Production deployment checklist:
// 1. Set production environment variables (API URLs, keys) on the hosting platform
// 2. Run `npm run build` to generate the optimized dist/ folder
// 3. Configure SPA fallback routing (redirect all routes to index.html)
// 4. Connect custom domain and verify HTTPS is active
// 5. Test the live site directly by refreshing on a non-home route
// 6. Set up CI/CD so future pushes deploy automaticallyQ Do I need a paid hosting plan to deploy a React app?
Not for learning or small personal projects — Vercel, Netlify, and GitHub Pages all offer free tiers that comfortably handle a static React frontend. Paid plans typically become relevant for higher traffic, custom server needs, or team collaboration features.
Q What's the difference between deploying the frontend and deploying the backend?
The React frontend (after npm run build) is just static files servable by any static host. A backend (like a JDBC-connected API server) needs to run continuously as a live process, requiring a different kind of hosting that supports long-running server applications, not just static file serving.