React Build and Deployment

What is Build and Deployment in React?

npm run build produces a dist folder of static HTML, CSS and JavaScript. Any static host — Netlify, Vercel, GitHub Pages, S3, Nginx — can serve it, provided unknown paths are rewritten to index.html.

Build and Deployment example

npm run build     # outputs dist/
npm run preview   # serve dist/ to verify before deploying

The SPA rewrite rule per host

Netlify   — public/_redirects:  /*  /index.html  200
Vercel    — vercel.json rewrites: source "/(.*)" -> "/index.html"
Nginx     — location / { try_files $uri $uri/ /index.html; }
Apache    — .htaccess with FallbackResource /index.html

Key points to remember

• Always run preview before deploying — some issues only appear in a production build.
• Set the correct base in vite.config.js when deploying to a subpath such as GitHub Pages.
• Assets are content-hashed, so they can be cached aggressively while index.html is not.

Common mistakes with Build and Deployment

• Deploying without the rewrite rule, so every deep link 404s on refresh.
• Deploying the src folder instead of dist.