Skip to main content
Prerequisites:
  • A Vercel account (free tier available)
  • Project repository on GitHub, GitLab, or Bitbucket
  • Node.js 19+ for local builds
Vercel provides zero-configuration deployment for Vite applications with automatic builds, preview deployments, and global CDN distribution. The Pirson Dev Portfolio is optimized for Vercel deployment.

​
Vercel Configuration

The project includes a vercel.json configuration file that handles client-side routing:
vercel.json
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}
This rewrite rule ensures all routes are handled by React Router, enabling client-side navigation for paths like /projects or /about without 404 errors.

​
Deploy to Vercel

1

Connect your repository

  1. Go to vercel.com and sign in
  2. Click Add New Project
  3. Import your Git repository (GitHub, GitLab, or Bitbucket)
  4. Select the repository containing your portfolio
Grant Vercel access to your repository when prompted. You can limit access to specific repositories for security.
2

Configure project settings

Vercel automatically detects Vite projects. Verify these settings:
  • Framework Preset: Vite
  • Build Command: npm run build (or vite build)
  • Output Directory: dist
  • Install Command: npm install
  • Node.js Version: 20.x (recommended)
Do not modify the output directory unless you’ve changed it in vite.config.js. The default dist/ directory is correct.
3

Deploy

Click Deploy to start your first deployment.Vercel will:
  1. Clone your repository
  2. Install dependencies with npm install
  3. Run npm run build to create production bundle
  4. Deploy to Vercel’s global CDN
  5. Assign a production URL (e.g., https://your-project.vercel.app)
Deployment typically completes in 1-2 minutes.
4

Verify deployment

Once deployed, Vercel provides:
  • Production URL: Your live site (e.g., pirsondev.vercel.app)
  • Deployment logs: Full build output for debugging
  • Analytics: Traffic and performance metrics
Test your deployment:
  • ✓ All pages load correctly
  • ✓ Navigation works (React Router)
  • ✓ Language switching functions (EN, ES, FR)
  • ✓ Theme toggle works (light/dark mode)
  • ✓ Vercel Analytics tracks pageviews

​
Automatic Deployments

Vercel automatically deploys your site when you push to Git:

​
Production Deployments

Pushing to your main or master branch triggers a production deployment: 
git add .
git commit -m "Update portfolio content"
git push origin main
Vercel will:
  1. Detect the push via webhook
  2. Start a new build automatically
  3. Deploy to your production URL
  4. Update DNS records instantly
Production deployments typically complete in 1-2 minutes. Your site will show the new version once deployment finishes.

​
Preview Deployments

Pushing to any other branch or opening a pull request creates a preview deployment: 
git checkout -b feature/new-design
git push origin feature/new-design
Vercel generates a unique preview URL like https://your-project-git-feature-new-design.vercel.app. Benefits of preview deployments:
  • Test changes before merging to main
  • Share work-in-progress with others
  • Each commit gets its own URL
  • No impact on production site

​
Environment Variables

If your portfolio uses environment variables, configure them in Vercel:
1

Open project settings

Go to your Vercel project dashboard and click Settings → Environment Variables.
2

Add variables

For each environment variable:
  1. Enter the Key (e.g., VITE_API_URL)
  2. Enter the Value (e.g., https://api.example.com)
  3. Select environments: Production, Preview, Development
  4. Click Save
Vite environment variables must start with VITE_ to be exposed to your application. Variables without this prefix are not accessible in client-side code.
3

Redeploy

Environment variable changes require a redeployment:
  1. Go to Deployments tab
  2. Click the three dots on the latest deployment
  3. Select Redeploy
Or push a new commit to trigger automatic redeployment.

​
Accessing Environment Variables

In your Vite application, access variables via import.meta.env: 
const apiUrl = import.meta.env.VITE_API_URL
const mode = import.meta.env.MODE // 'production' or 'development'

​
Custom Domains

Add a custom domain to your Vercel project:
1

Navigate to domains

In your Vercel project, go to Settings → Domains.
2

Add domain

  1. Enter your domain (e.g., pirsondev.com)
  2. Click Add
  3. Vercel will show DNS configuration instructions
3

Configure DNS

At your domain registrar (GoDaddy, Namecheap, Cloudflare, etc.), add:For apex domain (pirsondev.com):
  • Type: A
  • Name: @
  • Value: 76.76.21.21
For www subdomain (www.pirsondev.com):
  • Type: CNAME
  • Name: www
  • Value: cname.vercel-dns.com
4

Wait for verification

DNS propagation takes 24-48 hours (usually faster). Vercel automatically:
  • Issues SSL certificate (via Let’s Encrypt)
  • Configures HTTPS redirect
  • Sets up www → apex redirect
Vercel provides free SSL certificates for all domains with automatic renewal.

​
Vercel Analytics

The portfolio includes Vercel Analytics via @vercel/analytics:
src/main.jsx
import { Analytics } from '@vercel/analytics/react'

function App() {
  return (
    <>
      {/* Your app */}
      <Analytics />
    </>
  )
}
This enables:
  • Real-time pageviews: See traffic as it happens
  • Top pages: Understand which pages are most popular
  • Referrer tracking: Know where visitors come from
  • Device breakdown: Desktop vs mobile traffic
Analytics are available in your Vercel project dashboard under the Analytics tab. The free tier includes 100k events per month.

​
Performance Optimization

Vercel automatically provides several performance optimizations:

​
Global CDN

Your site is distributed across 100+ edge locations worldwide, ensuring fast load times regardless of visitor location.

​
Automatic Compression

Vercel applies Brotli and Gzip compression to all assets, reducing transfer sizes by up to 90%.

​
Image Optimization

While this portfolio doesn’t use Next.js Image, you can optimize images by:
  • Using WebP format for photos
  • Compressing images before committing
  • Using SVG for icons and logos

​
Cache Headers

Vercel automatically sets optimal cache headers:
  • Static assets (/assets/*): cached for 1 year
  • HTML (index.html): no cache (always fresh)

​
Deployment Monitoring

Monitor your deployments in the Vercel dashboard:

​
Build Logs

View complete build output for each deployment:
  1. Go to Deployments
  2. Click on any deployment
  3. View Building and Function Logs tabs

​
Deployment Status

Each deployment shows:
  • ✓ Ready: Successfully deployed and live
  • ⏳ Building: Currently building
  • ✗ Error: Build failed (check logs)
  • Canceled: Manually canceled

​
Build Time

Typical build times for this portfolio:
  • Cold build: 60-90 seconds (first build or after dependency changes)
  • Warm build: 30-45 seconds (subsequent builds)

​
Troubleshooting

Vercel couldn’t find npm to install dependencies.Solution:
  1. Check Node.js version in project settings (should be 20.x)
  2. Verify package.json exists in repository root
  3. Ensure build command is set to npm run build
The vercel.json rewrite rule isn’t working.Solution:
  1. Verify vercel.json exists in repository root
  2. Check that the rewrite rule matches: { "source": "/(.*)", "destination": "/" }
  3. Redeploy after adding/fixing vercel.json
Variables may not be prefixed correctly or not exposed to client.Solution:
  1. Ensure all client-side variables start with VITE_
  2. Verify variables are added in Vercel dashboard
  3. Select correct environments (Production, Preview, Development)
  4. Redeploy after adding variables
Browser caching may be showing a stale version.Solution:
  1. Hard refresh: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac)
  2. Check deployment URL shows as “Current” in Vercel dashboard
  3. Verify correct Git branch is deployed
  4. Clear browser cache and cookies

​
CI/CD Integration

Vercel’s automatic Git integration provides complete CI/CD:

​
Next Steps

Build Process

Learn about the Vite build process and optimization.

Development

Set up local development environment.
Need help? Visit Vercel Documentation or check your deployment logs in the Vercel dashboard.

Build docs developers (and LLMs) love

Get started for freeTalk to us