How to Deploy Your React Project to Vercel

October 24, 2024 (1y ago) · 4 min read

DevOps

Originally published on LinkedIn, 24 October 2024. Republished here with light editing.

Are you looking to deploy your React application quickly and efficiently? Vercel offers one of the most streamlined deployment experiences for modern web applications. In this guide, I'll walk you through the process of deploying your React project to Vercel, from initial setup to handling updates and custom domains.

Why Choose Vercel?#

Before diving into the deployment process, let's understand why Vercel is often the go-to choice for React applications:

  • Zero configuration required for React projects
  • Automatic HTTPS and SSL certificates
  • Built-in CI/CD pipeline
  • Excellent performance with global CDN
  • Free tier with generous limits
  • Preview deployments for each pull request
  • Custom domain support

Step 1: Initial Deployment#

There are two ways to deploy your project to Vercel: using the web interface or the CLI. Let's explore both methods.

Method 1: Web Interface Deployment

1. Push your project to GitHub

2. Visit vercel.com and sign up/login with your GitHub account

3. Click "New Project"

4. Select your repository

5. Configure project settings (usually automatic for React projects)

6. Click "Deploy"

Method 2: CLI Deployment

# Install Vercel CLI globally
 
npm install -g vercel
 
# Build your project
 
npm run build
 
# Login to Vercel (first-time users)
 
vercel login
 
# Deploy project
 
vercel

Step 2: Setting Up Automatic Deployments#

After your initial deployment, Vercel automatically sets up a GitHub integration. Any push to your main branch will trigger a new deployment:

# Make your changes locally
 
git add .
 
git commit -m "update: new features added"
 
git push origin main

Vercel will automatically:

1. Detect the push to GitHub

2. Trigger a new build

3. Deploy the updated version

4. Update your live site

Step 3: Custom Domain Configuration#

To add a custom domain to your Vercel project:

1. Go to your project settings in Vercel

2. Navigate to the "Domains" section

3. Add your domain

4. Configure your DNS settings. You'll need to add these records to your domain registrar:

# Option 1: Root Domain (example.com)

A Record:

HOST: @

VALUE: 00.00.00.00 (your IP Address)

# Option 2: WWW Subdomain (www.example.com)

A Record:

HOST: www

VALUE: 00.00.00.00 (your IP Address)

# Alternative for WWW:

CNAME Record:

HOST: www

VALUE: cname.vercel-dns.com

Step 4: Best Practices for Continuous Deployment#

Branch Management

# Create a development branch
 
git checkout -b dev
 
# Work on new features
 
git add .
 
git commit -m "feat: add new feature"
 
# Push to development branch
 
git push origin dev
 
# Create pull request for main branch
 
# Vercel will create a preview deployment automatically

Environment Variables

1. Local Development:

# Create .env.local file

REACT_APP_API_KEY=your_api_key

REACT_APP_ENV=development

2. Vercel Production:

  • Go to Project Settings > Environment Variables
  • Add production variables
  • These will be automatically encrypted and secured

Step 5: Monitoring and Troubleshooting#

Check Deployment Status:

# Using Vercel CLI

vercel logs

# Check specific deployment

vercel inspect

Common Issues and Solutions:

1. Build Failures:

  • Check build logs in Vercel dashboard
  • Verify local build works: npm run build
  • Check for missing dependencies

2. Domain Issues:

  • Ensure DNS propagation is complete (can take up to 48 hours)
  • Verify DNS records are correct
  • Check SSL certificate status

Step 6: Advanced Configuration#

Create a vercel.json file in your project root for custom configuration:

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

Conclusion#

Vercel provides a robust, user-friendly platform for deploying React applications. By following this guide, you can ensure your deployment process is smooth and efficient. Remember to:

  • Regularly test your builds locally before pushing
  • Use environment variables for sensitive data
  • Implement proper branch management
  • Monitor your deployments
  • Keep your dependencies updated

Looking to learn more about web development? Follow me for more technical content and tutorials!

LinkedIn