Building & Deployment

Building for Production

npm run build  # CRA & Vite

The build/ output folder contains minified HTML, CSS, and JS.

Environment Variables

# .env
REACT_APP_API_URL=https://api.example.com   # CRA
VITE_API_URL=https://api.example.com        # Vite

const url = process.env.REACT_APP_API_URL;      // CRA
const url = import.meta.env.VITE_API_URL;       // Vite

Deploy to Vercel

npm install -g vercel && vercel login && vercel

Deploy to Netlify

npm install -g netlify-cli
netlify deploy --prod --dir=build

Deploy to GitHub Pages

npm install --save-dev gh-pages
# package.json: "predeploy": "npm run build", "deploy": "gh-pages -d build"
npm run deploy

SPA Routing (Rewrites)

All URLs must point to index.html:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Production Checklist

• [ ] Environment variables configured
• [ ] Build without errors
• [ ] SPA routing set up
• [ ] HTTPS enabled
• [ ] Error monitoring (Sentry)

Next chapter: Redux for state management.