React — Deployment

Build for Production

npm run build

Deploy to Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod --dir=build

Deploy to Vercel

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel --prod

Deploy to GitHub Pages

# Install gh-pages
npm install --save-dev gh-pages

# Add to package.json
"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
}

# Deploy
npm run deploy

Environment Variables

# .env
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your-api-key

# Access in code
const apiUrl = process.env.REACT_APP_API_URL;

Deployment Examples

# Docker deployment
# Dockerfile
FROM node:14 AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# Build and run
docker build -t my-react-app .
docker run -p 3000:80 my-react-app

Deployment Checklist

1. Build for production
2. Optimize images
3. Minify CSS and JS
4. Enable gzip compression
5. Set up environment variables
6. Configure routing (if using React Router)
7. Set up SSL certificate
8. Configure caching headers

Mini Practice

Write React code that:

1. Builds for production
2. Deploys to a hosting service
3. Uses environment variables
4. Configures routing for deployment

Up Next

Next: Learn about Context API.