How to deploy a React app to Vercel
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Deploying React applications requires a platform that handles builds automatically, provides global CDN distribution, and supports modern web features. With over 12 years of React development experience since 2014 and as the creator of CoreUI, I’ve deployed countless applications to various hosting platforms. Vercel is specifically optimized for React and Next.js applications, offering zero-configuration deployments with automatic SSL and edge network distribution. The platform connects directly to your Git repository for continuous deployment on every push.
Deploy React apps to Vercel using Git integration or CLI for automatic builds and global distribution.
Method 1: Deploy via Vercel Dashboard
-
Push your React app to GitHub, GitLab, or Bitbucket
-
Visit vercel.com and sign up
-
Click “Add New Project” → “Import Git Repository”
-
Select your repository and configure:
- Framework Preset: Create React App (auto-detected)
- Build Command:
npm run build(default) - Output Directory:
build(default)
-
Click “Deploy”
Method 2: Deploy via Vercel CLI
# Install Vercel CLI
npm install -g vercel
# Deploy from project directory
cd my-react-app
vercel
# Follow prompts to link project
# Deploy to production
vercel --prod
Configure environment variables:
# Via CLI
vercel env add REACT_APP_API_URL
# Or in dashboard: Project Settings → Environment Variables
Add vercel.json for custom configuration:
{
"buildCommand": "npm run build",
"outputDirectory": "build",
"devCommand": "npm start",
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
Best Practice Note
Vercel automatically detects Create React App and configures builds correctly. The rewrites configuration ensures client-side routing works properly by serving index.html for all routes. Each Git branch gets a unique preview URL for testing before merging to production. Vercel provides automatic HTTPS, global CDN, and serverless functions support. Use environment variables for different environments (preview vs production). This is how we deploy CoreUI React templates—Git-based workflow with instant preview deployments and zero-downtime production releases.
