Deploying React Applications

Deploying a React app means making it available to users on the web. The process usually involves building the app, then hosting the generated static files on a server or cloud platform.

Step 1: Create a Production Build

Vite

npm run build

Create React App (CRA)

npm run build

This creates a dist/ (Vite) or build/ (CRA) folder with optimized, production-ready files.

Step 2: Test the Build Locally

Vite

npm run preview

CRA

npx serve -s build

Popular Deployment Platforms

1. Netlify (Beginner-Friendly)

Steps:

1. Push code to GitHub

2. Go to Netlify → New Site

3. Connect repository

4. Set build command & folder:

   • Build: npm run build

   • Publish: dist (Vite) or build (CRA)

5. Deploy

Features:

• Free tier

• Auto-deploy on git push

• Custom domains

2. Vercel (Recommended for React)

Steps:

1. Import GitHub project

2. Select framework (React/Vite)

3. Click Deploy

Features:

• Excellent performance

• Preview deployments

• Serverless support

3. GitHub Pages

Install:

npm install gh-pages --save-dev

Configure:

"homepage": "https://username.github.io/repo-name"

Deploy:

npm run build
npm run deploy

Best for static sites.

4. Firebase Hosting

npm install -g firebase-tools
firebase login
firebase init
firebase deploy

Great for apps needing authentication or backend services.

Environment Variables

Vite

VITE_API_URL=https://api.example.com

CRA

REACT_APP_API_URL=https://api.example.com

Routing Fix (React Router)

Single Page Apps need redirect rules.

Netlify (_redirects)

/* /index.html 200

Vercel

Handled automatically.

Performance Best Practices

• Enable code splitting

• Use lazy loading

• Compress images

• Use production build only

Common Deployment Issues

• Blank page → routing misconfiguration

• API not working → env variable issues

• Build failure → dependency mismatch

CI/CD (Optional)

• Automatic deployment on push

• Run tests before deploy

• Use GitHub Actions

Key Takeaways

• Always build before deploying

• Choose the right platform

• Handle routing correctly

• Use environment variables