React ยท Chapter 36 of 42

Deployment

A React app built with Vite compiles into static HTML, CSS, and JS files via `npm run build`. These static files can be deployed to any static hosting provider.

Popular hosting choices include Vercel, Netlify, GitHub Pages, and Cloudflare Pages โ€” most offer free tiers with automatic deploys from Git.

Building for production

`npm run build` creates an optimized `dist/` folder with minified, hashed assets ready for deployment.

Hosting providers

Services like Vercel and Netlify detect your framework automatically, run the build command, and deploy on every Git push.

Example 1 (bash)
npm run build
# outputs static files to dist/
npm run preview
# preview the production build locally
Output
dist/ folder created; preview runs on http://localhost:4173

build creates production assets; preview serves them locally to test.

Key points

  • `npm run build` produces a static, production-ready dist/ folder.
  • Static hosts like Vercel, Netlify, and GitHub Pages work well for React SPAs.
  • Most hosts support automatic deploys triggered by Git pushes.
  • `npm run preview` lets you test the production build locally.
๐Ÿ’ก Note: For SPAs with client-side routing, configure your host to redirect all routes to index.html.

๐Ÿ“ Quick Quiz

1. What command builds a React app for production with Vite?

2. What kind of hosting is typically used for a React SPA?

3. Why must SPA hosts redirect routes to index.html?