Hosting React Apps on Vercel

Vercel is one of the best platforms for hosting React applications, offering seamless deployment, automatic SSL, global CDN, and more. Here’s everything you need to know:

1. Getting Started

Prerequisites

• A Vercel account (sign up at vercel.com)
• Node.js installed locally
• A React project (Create React App, Next.js, etc.)

Installation

npm install -g vercel  # Install Vercel CLI
# or
yarn global add vercel

2. Deploying Your React App

First Deployment

1. Navigate to your project directory
2. Run:

vercel

3. Follow the prompts:

• Link to existing or create new project
• Set root directory (usually .)
• Configure build settings (autodetected for Create React App)

Subsequent Deployments

vercel --prod  # Deploy to production

3. Vercel Configuration

vercel.json Configuration

{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

Environment Variables

1. Create .env.local for development
2. Add to Vercel:

• Web dashboard: Project → Settings → Environment Variables
• Or via CLI:
  bash vercel env add plain VARIABLE_NAME

4. Connecting to GitHub/GitLab/Bitbucket

Automatic Deployments

1. Import your repository in Vercel dashboard
2. Configure build settings:

• Framework preset: Create React App/Next.js/etc.
• Root directory: (usually leave blank)
• Build command: npm run build or yarn build
• Output directory: build (CRA) or .next (Next.js)

1. Enable “Automatically deploy on git push”

5. Custom Domains

Adding a Domain

1. Go to Project → Domains
2. Enter your domain (e.g., app.yourdomain.com)
3. Configure DNS:

• Add CNAME record pointing to cname.vercel-dns.com
• Or A records for root domains

SSL Certificates

• Automatic with Let’s Encrypt
• No configuration needed

6. Advanced Features

Preview Deployments

Every Git branch/pull request gets:

• Unique URL
• Isolated environment
• Automatic comments on PRs

Serverless Functions

// api/hello.js
module.exports = (req, res) => {
  res.json({ message: 'Hello from Vercel Serverless!' });
};

Edge Functions (Global CDN)

// api/date.js (placed in /api)
export const config = {
  runtime: 'edge',
};

export default function handler(request) {
  return new Response(new Date().toISOString(), {
    headers: { 'content-type': 'text/plain' },
  });
}

7. Optimizing React Apps on Vercel

Performance

• Automatic static optimization
• Global CDN caching
• Enable “Auto-optimize” in project settings

Image Optimization

For Next.js:

import Image from 'next/image';

<Image 
  src="/profile.jpg" 
  alt="Profile" 
  width={500} 
  height={500}
/>

Analytics

1. Enable in Project → Analytics
2. Add to your app:

import { Analytics } from '@vercel/analytics/react';

function App() {
  return (
    <>
      <YourApp />
      <Analytics />
    </>
  );
}

8. Troubleshooting

Common Issues

1. 404 on refresh (SPA routing):

• Solution: Add vercel.json with catch-all route

   {
     "routes": [
       { "handle": "filesystem" },
       { "src": "/.*", "dest": "/index.html" }
     ]
   }

2. Environment variables missing:

• Add to Vercel dashboard
• Prefix with NEXT_PUBLIC_ for client-side access (Next.js)
• Use vercel env pull to sync local .env

2. Build failures:

• Check logs in Vercel dashboard
• Run vercel --debug for detailed output
• Ensure correct Node.js version in package.json:
  json { "engines": { "node": "18.x" } }

9. CI/CD Integration

GitHub Actions Example

name: Deploy to Vercel
on: [push]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}

10. Migration from Other Hosts

From Netlify

1. Export environment variables
2. Update DNS records
3. Configure redirects in vercel.json

From AWS S3/CloudFront

1. Update build process
2. Configure proper cache headers
3. Set up domain in Vercel

Vercel provides the most seamless hosting experience for React applications with features like:

• Instant global deployments
• Automatic HTTPS/SSL
• Built-in CI/CD
• Serverless functions
• Performance analytics
• Preview deployments for every branch/PR

For most React applications, Vercel is the best choice for hosting with minimal configuration and maximum performance.