Skip to main content

Deploying to Vercel (Part 2) #159

📖 Introduction​

Following our initial deployment to Vercel in Deploying to Vercel (Part 1), this second part explores more advanced features and customization Vercel offers. We'll cover adding custom domains, managing environment variables for different environments (production, preview, development), understanding Vercel's Preview Deployments, using the Vercel CLI, and briefly comparing Vercel with Netlify.

📚 Prerequisites​

Before we begin, you should have:

  • Completed Part 1: Your React app is deploying to a *.vercel.app subdomain via Git.
  • A Vercel account and your site set up on Vercel.
  • (Optional for custom domains) A custom domain name.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ Adding Custom Domains to Vercel: Pointing your domain to your Vercel project.
  • ✅ Managing Environment Variables in Vercel: For production, preview, and development environments.
  • ✅ Vercel Preview Deployments: For branches and pull requests.
  • ✅ Vercel CLI (Brief Introduction): Key commands for local development and manual deploys.
  • ✅ Rollbacks and Deployment History on Vercel.
  • ✅ Vercel vs. Netlify: A Brief Comparison for React SPAs.

🧠 Section 1: Adding Custom Domains to Vercel​

Using a custom domain (e.g., www.yourdomain.com) for your production site is essential. Vercel makes this process straightforward.

Steps to Add a Custom Domain:

  1. Navigate to Project Settings: In your Vercel dashboard, select your project. Go to the "Settings" tab and then select "Domains." Vercel Dashboard - Domains Settings
  2. Add Your Domain: Enter the custom domain you own (e.g., yourdomain.com or www.yourdomain.com) and click "Add." Vercel - Add Domain Input
  3. Choose Configuration Method: Vercel will recommend a configuration method, usually pointing your domain's nameservers to Vercel for optimal performance and automatic SSL renewal. Alternatively, you can configure A records (for root domains) or CNAME records (for subdomains) with your existing DNS provider.
    • Recommended (Using Vercel DNS): Update your domain's NS (nameserver) records at your domain registrar to point to Vercel's nameservers. Vercel will then manage your DNS.
    • Alternative (Using External DNS): Vercel will provide the necessary A or CNAME record values for you to set up at your domain registrar. Vercel - Domain Configuration Options
  4. DNS Propagation: Allow time for DNS changes to propagate (minutes to hours).
  5. Automatic HTTPS/SSL: Vercel automatically provisions and renews SSL certificates (via Let's Encrypt) for your custom domains, ensuring HTTPS.

Vercel provides clear instructions and typically auto-detects when DNS changes have successfully propagated.

💻 Section 2: Managing Environment Variables in Vercel​

Vercel provides a robust system for managing environment variables, crucial for different configurations across environments.

Location:

  • In your Vercel project dashboard: "Settings" tab -> "Environment Variables".

Capabilities:

  • Add Variables: Define key-value pairs (e.g., REACT_APP_API_URL or VITE_STRIPE_KEY).
  • Environments (Scopes): Vercel allows you to scope variables to:
    • Production: Applied to deployments from your main production branch.
    • Preview: Applied to deployments from other Git branches and pull request previews.
    • Development: Values that the Vercel CLI (vercel dev) can pull down for your local development environment. Vercel - Environment Variable Scopes
  • Security: Values can be marked as "Secret" if they are sensitive (though remember, for client-side React SPAs, variables prefixed with REACT_APP_ or VITE_ will be embedded in the build and thus public; true secrets are for Serverless Functions).
  • Build Time and Runtime Access:
    • Variables prefixed with NEXT_PUBLIC_ (for Next.js), REACT_APP_ (for CRA), or VITE_ (for Vite) are exposed to the browser (embedded at build time).
    • Other variables are available only during the build process or in Serverless Functions.

Example: You could have VITE_API_URL set to:

  • https://api.myapp.com for Production.
  • https://staging-api.myapp.com for Preview (all non-production branches/PRs).
  • http://localhost:3001/api for Development (pulled by vercel env pull .env.development.local for vercel dev).

Your React code import.meta.env.VITE_API_URL will automatically get the correct value based on the environment Vercel is building for.

🛠️ Section 3: Vercel Preview Deployments​

Similar to Netlify's Deploy Previews, Vercel's Preview Deployments are a standout feature.

  • Automatic Previews: For every Git branch pushed and every pull/merge request opened, Vercel automatically builds and deploys your project to a unique, shareable URL.
    • Branch URL example: my-feature-branch.username.vercel.app
    • Pull Request URL example: my-project-pr-123.username.vercel.app
  • Git Integration: Vercel posts comments on your pull requests with links to the preview deployment and build status. Vercel - PR Comment with Preview Link
  • Benefits:
    • Live Review: Stakeholders (PMs, designers, QA) can interact with changes live.
    • Collaboration: Simplifies the feedback loop.
    • Isolated Testing: Each preview is a full deployment of that specific branch/PR.
    • Uses "Preview" scoped environment variables.

This feature is invaluable for modern development workflows.

🔬 Section 4: Vercel CLI (Brief Introduction)​

Vercel provides a powerful CLI for interacting with the platform from your terminal.

Installation:

npm install -g vercel

Common Commands:

  • vercel login: Authenticate with your Vercel account.
  • vercel link: Connect your local project directory to an existing Vercel project (or create a new one). This creates a .vercel directory in your project.
  • vercel dev: Starts a local development server that emulates the Vercel environment. It runs your framework's dev command (e.g., npm start for CRA, vite for Vite), but also provides access to Vercel environment variables (after vercel env pull), and can run Serverless Functions locally.
  • vercel deploy: Manually deploy your project.
    • vercel: Deploys to a unique preview URL.
    • vercel --prod: Deploys to your production domain(s) (promotes the latest successful build or builds from the current directory).
    • vercel --prebuilt: Deploys a directory that you've already built locally (e.g., vercel deploy ./build --prebuilt).
  • vercel env ls, vercel env add <name> <value> [environment], vercel env pull [filename]: Manage environment variables. vercel env pull .env.development.local is useful for getting development variables locally for vercel dev.
  • vercel domains ls, vercel domains add <domain> <project>: Manage domains.
  • vercel logs <deployment-url>: View real-time logs for a deployment.

The Vercel CLI is essential for local development that mirrors Vercel's cloud environment and for scripting or manual deployment tasks.

✨ Section 5: Rollbacks and Deployment History​

Vercel maintains a detailed history of all your deployments.

  • Location: In your Vercel project dashboard, under the "Deployments" tab.
  • Immutable Deploys: Each deployment gets a unique URL and is immutable.
  • Instant Rollbacks: If a production deployment has issues, you can instantly roll back:
    1. Go to the "Deployments" list.
    2. Find the previous successful deployment you want to restore.
    3. Click the context menu (three dots) for that deployment and select "Promote to Production." Vercel - Promote to Production (Rollback) Vercel will instantly alias your production domain(s) to this older, stable deployment.

This ensures you can quickly recover from any problematic production releases.

🚀 Section 6: Vercel vs. Netlify (Brief Comparison for React SPAs)​

Both Vercel and Netlify are excellent platforms for deploying React SPAs and offer many similar core features: Git-based CI/CD, global CDNs, custom domains, HTTPS, preview deployments, serverless functions, and generous free tiers.

FeatureVercelNetlify
Primary FocusDeveloper Experience, Next.js, Edge FunctionsJamstack, Static Sites, Broader Ecosystem
Framework SupportExcellent for Next.js, strong for othersExcellent for many SSGs, strong for others
Build PerformanceGenerally very fast, optimized for JS fwksGenerally very fast, build plugins available
Edge FunctionsIntegrated, strong Next.js middleware supportNetlify Functions (AWS Lambda based)
CLIvercel - very polishednetlify - very comprehensive
Ease of UseExtremely highExtremely high
Community/DocsExcellentExcellent
PricingSimilar free tiers, paid plans differSimilar free tiers, paid plans differ

For a standard React SPA (built with CRA or Vite):

  • Both are fantastic choices. You can't really go wrong with either.
  • Vercel might feel slightly more "at home" if you're deep in the React/Next.js ecosystem, and its DX is often praised. Its automatic framework detection and optimization are top-notch.
  • Netlify has a slightly longer history in the "Jamstack" space, a very robust build plugin ecosystem, and features like Forms and Identity that are well-integrated.

Considerations:

  • Next.js: If you're using Next.js, Vercel is the platform built by the creators of Next.js and offers the most seamless and optimized experience.
  • Specific Features: If you need specific features like Netlify's Large Media, Build Plugins, or integrated Forms/Identity, Netlify might have an edge. If Vercel's Analytics or specific Edge Function capabilities are key, it might be preferred.
  • Personal Preference: Often, it comes down to which UI and workflow you prefer. Try deploying a simple app to both to see which feels better for you.

Many developers use both platforms for different projects.

💡 Conclusion & Key Takeaways (Part 2)​

Vercel provides a rich suite of tools for deploying and managing React applications, from custom domains and environment variable management to powerful preview deployments and a versatile CLI. Its focus on developer experience and performance makes it a leading choice for modern web projects.

Key Takeaways:

  • Vercel simplifies custom domain setup with automatic HTTPS.
  • Environment variables can be scoped to Production, Preview, and Development environments.
  • Preview Deployments for branches and PRs are a core feature for collaboration and review.
  • The Vercel CLI (vercel dev, vercel deploy) enhances local development and deployment workflows.
  • Instant rollbacks provide deployment safety.
  • Both Vercel and Netlify are excellent choices for React SPAs, with minor differences in focus and specific feature sets.

➡️ Next Steps​

We've now covered two excellent platforms for deploying your React applications. The final piece of the deployment puzzle for many teams is automating the entire process, including running tests and checks before a deployment goes live. The next and final article in this series and the entire "React JS: From Zero to Hero" book is "Setting up a CI/CD Pipeline with GitHub Actions". We'll learn how to automate our build, test, and deployment process.

You're almost at the finish line of becoming a React Hero!

glossary​

  • Vercel CLI: Command-line interface for interacting with the Vercel platform.
  • vercel dev: A Vercel CLI command to run a local development server that emulates the Vercel cloud environment.
  • Preview Deployments (Vercel): Automatically generated deployments for Git branches and pull requests, each with a unique URL. (Similar to Netlify's Deploy Previews).
  • Edge Network: A geographically distributed network of servers used by platforms like Vercel and Netlify to serve content and run functions closer to users.
  • Immutable Deploys: A deployment strategy where each new version is a completely new, unchangeable instance. Rollbacks involve pointing the live domain to a previous immutable deploy.

Further Reading​