Deploying React Applications

Deployment is the final step in developing a React application. We'll explore the different deployment options and the optimizations you need to make.

Preparing for deployment

Production build

npm run build

This command creates a build folder containing your application optimized for production.

Configuring environment variables

# .env.production
REACT_APP_API_URL=https://api.production.com
REACT_APP_ANALYTICS_ID=UA-XXXXXXXX-X

Popular deployment platforms

Netlify

1. Installing the Netlify CLI:

npm install -g netlify-cli

2. Deployment:

netlify deploy

3. Configuration (netlify.toml):

[build]
  command = "npm run build"
  publish = "build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Vercel

1. Installing the Vercel CLI:

npm install -g vercel

2. Deployment:

vercel

3. Configuration (vercel.json):

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": { "distDir": "build" }
    }
  ]
}