20. Deploying React Applications

Why Deploy?

Building a React app locally is great for development—but deployment lets real users access your app online. Deployment involves creating an optimized production build and hosting it on a server.

Create a Production Build

Before deploying, you must bundle and optimize your project using a production build.

npm run build
# or
yarn build

This creates a `dist` or `build` folder (depending on Vite or CRA) containing optimized static files.

Deploy to Vercel

Vercel is one of the easiest hosting platforms for React apps. It supports CI/CD and automatic redeploys.

• Visit https://vercel.com and log in with GitHub
• Import your React repository
• Click Deploy
• Done—Vercel handles everything automatically

You can add environment variables in **Settings → Environment Variables**.

Deploy to Netlify

• Go to https://netlify.com and log in
• New site from Git → choose repo
• Set build command: `npm run build`
• Set publish directory: `dist` (Vite) or `build` (CRA)
• Deploy

# Optional: deploy locally
npm install netlify-cli -g
netlify deploy

Deploy to GitHub Pages

Best for simple static projects. GitHub Pages is free and easy.

npm install gh-pages --save-dev

// package.json
{
  "homepage": "https://username.github.io/repo-name",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

npm run deploy

Environment Variables

Avoid hardcoding API keys. Use `.env` files instead.

VITE_API_URL=https://api.myapp.com
REACT_APP_SECRET=abcd123

Note: Only variables starting with `REACT_APP_` (CRA) or `VITE_` (Vite) will be included in the client build.

Deployment Comparison

Mini Project Step

Deploy your portfolio or mini project using Vercel or Netlify. Add a custom domain and make your project live for others to see!