Deploy React on Vercel with GitHub Actions

React • Vercel Platform • GitHub Actions

Configuration Files

name: Deploy to Vercel

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

Prerequisites

  • Vercel account
  • GitHub repository
  • Node.js 18+
  • React 18+ with Vite
  • Vercel CLI

Deployment Steps

  • Create React app: npm create vite@latest my-app -- --template react-ts
  • Install Vercel CLI: npm i -g vercel
  • Link project: vercel link
  • Get Vercel tokens from project settings
  • Add GitHub Secrets: VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID
  • Create .github/workflows/deploy.yml
  • Push to main to deploy production
  • PRs get automatic preview URLs

📝 Additional Notes

  • ⚡ Optimized for Vite builds
  • 🌍 Global CDN with edge caching
  • 🔄 Instant preview deployments
  • 💰 Free tier: 100GB bandwidth
  • 📦 Automatic code splitting
  • 🚀 Sub-second cold starts
  • 🔒 HTTPS by default
  • ⚠️ SPA routing requires vercel.json configuration