The React Vite build produces a folder of static files — index.html, JavaScript bundles, CSS, and assets. These static files do not need a Node.js server — any host that can serve static files works, and a CDN (Content Delivery Network) is the best choice because it serves files from the edge server closest to the user. Netlify is a leading static hosting platform with global CDN distribution, continuous deployment from GitHub, and a generous free tier. In this lesson you will build the Vite React app for production, configure the Netlify deployment including the critical SPA fallback redirect, and set the production API URL environment variable.
Building React for Production
cd client
npm run build
# Vite creates a dist/ folder with:
# dist/index.html — main HTML entry point
# dist/assets/index-Abc123.js — bundled JavaScript (hashed filename)
# dist/assets/index-Abc123.css — bundled CSS (hashed filename)
# dist/assets/... — images and other assets
# Preview the production build locally:
npm run preview
# Serves dist/ at http://localhost:4173index-Abc123.js) so browsers cache them indefinitely — the hash changes when the file content changes, forcing browsers to download the new version. The index.html is not hashed — Netlify serves it with short cache-control headers so users always get the latest HTML, which then references the correctly hashed JS and CSS bundles.npm run build locally before pushing to Netlify and check for TypeScript or import errors. Build errors that would be silently ignored in the Vite dev server (because of HMR) often surface only at build time. Common build-time failures: a missing default export, an unused import of a type that Vite’s esbuild cannot resolve, or a Vite-env variable that is undefined at build time.VITE_ to be included in the browser bundle. A variable without the prefix (e.g. API_URL) will be undefined at runtime in production even if you set it on Netlify. Always use VITE_API_URL and access it with import.meta.env.VITE_API_URL. Non-VITE_ prefixed variables are only available during the build process, not in the browser bundle.The SPA Fallback Redirect — Critical
Problem:
React Router handles client-side routing — /posts/123 renders PostDetailPage.
But this route does not exist as a real file in dist/.
When a user bookmarks /posts/123 and opens it directly:
Browser sends GET /posts/123 to Netlify
Netlify looks for dist/posts/123/index.html — NOT FOUND
Netlify returns 404 — React Router never loads
Solution: Netlify redirect rule — serve index.html for ALL paths
client/public/_redirects (exact filename, no extension, in the public/ folder)
Contents:
/* /index.html 200
This tells Netlify: for any path (/*), serve /index.html with status 200.
React Router then reads the URL and renders the correct component.
Alternative: netlify.toml at the project root:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200Deploying to Netlify — Step by Step
1. Push client/ to GitHub (ensure public/_redirects is committed)
2. Go to https://app.netlify.com → Add new site → Import an existing project
3. Connect GitHub repository → select mern-blog
4. Configure build settings:
Base directory: client (if monorepo)
Build command: npm run build
Publish directory: client/dist (or dist if base is set)
5. Set environment variables (Site settings → Environment variables):
VITE_API_URL = https://mernblog-api.onrender.com
6. Click "Deploy site"
→ Netlify runs: npm run build
→ Uploads dist/ to its CDN
→ Site available at: https://random-name.netlify.app
7. Rename site (Site settings → Site details → Change site name):
https://mernblog.netlify.app
8. Test navigation:
→ Open https://mernblog.netlify.app/posts/123
→ Should load PostDetailPage (not 404)
→ If 404: check that public/_redirects file was committedCustom Domain (Optional)
Netlify → Site settings → Domain management → Add custom domain
Enter: mernblog.com (or your domain)
Netlify provides:
→ Automatic HTTPS via Let's Encrypt
→ Global CDN distribution
→ DNS instructions for your domain registrar
DNS changes propagate in 1–48 hours.
Netlify renews the SSL certificate automatically.Netlify Build Configuration
# netlify.toml — at the root of the repository (optional but useful)
[build]
base = "client"
command = "npm run build"
publish = "dist"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
[build.environment]
NODE_VERSION = "20"Common Mistakes
Mistake 1 — Missing the _redirects file
❌ Wrong — no redirect rule, direct navigation returns 404:
User navigates to https://mernblog.netlify.app/dashboard directly → 404 Not Found
# React Router never loads — Netlify cannot find dist/dashboard/index.html✅ Correct — create client/public/_redirects with content /* /index.html 200. Vite copies the public/ folder to dist/ during build.
Mistake 2 — Not setting VITE_API_URL on Netlify
❌ Wrong — Axios uses the wrong base URL:
// import.meta.env.VITE_API_URL is undefined in production
const api = axios.create({ baseURL: undefined }); // requests go to relative path!✅ Correct — set VITE_API_URL=https://mernblog-api.onrender.com in Netlify’s environment variables before deploying. Rebuild after adding the variable — it is baked into the JS bundle at build time.
Mistake 3 — Setting environment variables after the build
❌ Wrong — VITE_ variables set on Netlify after the site is already built:
Build runs → import.meta.env.VITE_API_URL = undefined (var not set yet)
Variable added to Netlify → but the old build is still deployed!
# Fix: trigger a new deploy after adding/changing VITE_ variables✅ Correct — set Netlify environment variables before the first build, or trigger a new deploy (Deploys → Trigger deploy → Deploy site) after changing them.
Quick Reference
| Task | Detail |
|---|---|
| Build command | npm run build |
| Publish directory | dist (or client/dist in monorepo) |
| SPA fallback | public/_redirects: /* /index.html 200 |
| API URL var | VITE_API_URL=https://api.onrender.com |
| Access in React | import.meta.env.VITE_API_URL |
| Trigger redeploy | Push to main branch or Deploys → Trigger deploy |
| View deploy logs | Netlify Dashboard → Deploys → click the deploy |