Deployment - Production React Apps

Build for Production

# Vite
npm run build
# Output in dist/

# Create React App
npm run build
# Output in build/

Environment Variables

# .env.production
VITE_API_URL=https://api.example.com

# Access in code
const apiUrl = import.meta.env.VITE_API_URL;

Deployment Platforms

Platform	Command / Config
Vercel	Connect Git, auto-deploys
Netlify	Connect Git, auto-deploys
GitHub Pages	Set base in vite.config.js
AWS S3	Upload build folder, enable hosting
Firebase	`firebase init` then `firebase deploy`

Vercel Deployment

npm install -g vercel
vercel
# Follow prompts

Netlify Deployment

npm install -g netlify-cli
netlify init
netlify deploy --prod

Production Checklist

SPA Routing (Important)

# Netlify (_redirects file)
/*    /index.html   200

# Vercel (vercel.json)
{ "rewrites": [{ "source": "/(.*)", "destination": "/" }] }

# Nginx
location / {
  try_files $uri /index.html;
}

Interview Questions & Answers

Q1: How do you prepare React for production?

Run build command, minifies JS/CSS, eliminates dead code, enables React production mode.

Q2: How do SPAs handle routing in production?

Server must redirect all paths to index.html. React Router handles client-side. Configure server rewrites.

Q3: What are environment variables for?

Separate config per environment (dev/staging/prod). API URLs, feature flags. Never store secrets in frontend.

Deployment - Production React Apps

On this page