Skip to main content

Deploying to Vercel (Part 1) #158

📖 Introduction​

After exploring deployment with Netlify in Deploying to Netlify (Part 2), it's time to look at another extremely popular and powerful platform for hosting modern web applications: Vercel. Vercel is the company behind the Next.js framework, but it's also an excellent choice for deploying standard React Single Page Applications (SPAs), Vite projects, and other static or serverless sites. This article, Part 1, will cover introducing Vercel and the initial steps to deploy your React app.

📚 Prerequisites​

Before we begin, you will need:

  • A React application built for production (output in a build or dist folder).
  • Your React project hosted on a Git provider (GitHub, GitLab, Bitbucket).
  • A free Vercel account (signup at vercel.com).

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ What is Vercel? Key features and its strengths, especially for React and Next.js.
  • ✅ Preparing Your React App for Vercel: Build command and output directory (similar to Netlify).
  • ✅ Deployment Method: Connecting Your Git Repository (Continuous Deployment).
    • Signing up/Logging into Vercel.
    • Importing a Git repository.
    • Configuring project settings (framework preset, build command, output directory).
    • First deployment and accessing your live site.
  • ✅ Understanding Vercel's Build and Deployment Process.

🧠 Section 1: What is Vercel?​

Vercel (formerly ZEIT) is a cloud platform for static sites and Serverless Functions that focuses heavily on developer experience and performance. While it's widely known as the home of Next.js (a popular React framework), Vercel provides first-class support for deploying a wide variety of frontend frameworks and static site generators, including Create React App, Vite, Gatsby, Angular, Vue, etc.

Key Features and Benefits of Vercel:

  • Global Edge Network: Deploys your static assets and Serverless Functions to a global network of edge locations, ensuring low latency for users worldwide.
  • Continuous Deployment from Git: Seamless integration with GitHub, GitLab, and Bitbucket for automatic builds and deploys on every push.
  • Optimized for Frontend Frameworks: Vercel automatically detects and optimizes builds for many popular frameworks (e.g., it knows how to build a CRA or Vite app).
  • Instant Rollbacks & Atomic Deploys: Similar to Netlify, deploys are atomic, and you can instantly revert to previous versions.
  • Preview Deployments: Automatically creates unique URLs for every Git branch and pull request, allowing for easy review and collaboration.
  • Serverless Functions: Easily deploy backend API endpoints (Node.js, Go, Python, Ruby) alongside your frontend.
  • Custom Domains & Free HTTPS/SSL: Simple custom domain setup with automatic SSL.
  • Image Optimization: Built-in, on-demand image optimization for Next.js apps (and available for others).
  • Analytics: Provides insights into your site's traffic and performance (Vercel Analytics).
  • Generous Free Tier ("Hobby" plan): Suitable for personal projects and experimentation.
  • Excellent Developer Experience: Intuitive dashboard and powerful CLI.

Vercel excels at making the deployment process for modern JavaScript applications incredibly smooth and fast.

💻 Section 2: Preparing Your React App for Vercel​

Preparation for Vercel is very similar to preparing for Netlify or any other static hosting platform.

  1. Build Command:

    • The command Vercel will run to build your application.
      • Create React App: npm run build or yarn build
      • Vite: npm run build or yarn build (which runs vite build)
    • This command must produce static assets in an output directory.

  2. Output Directory (Publish Directory):

    • The directory containing the static files after your build command completes.
      • Create React App: build
      • Vite: dist
    • Vercel is usually very good at auto-detecting this for common frameworks.

  3. Handling Client-Side Routing (for SPAs):

    • Like Netlify, Vercel automatically handles SPA routing for most frameworks. When a user navigates directly to a client-side route (e.g., yoursite.vercel.app/profile), Vercel serves your index.html, allowing React Router (or similar) to manage the routing on the client.
    • This typically requires no manual configuration for standard CRA or Vite SPAs. Vercel's framework presets often include the necessary rewrite rules. If you have a very custom setup, you might need a vercel.json file to configure rewrites, but it's rare for basic SPAs.

🛠️ Section 3: Deployment Method - Connecting Your Git Repository​

This is the recommended method for deploying to Vercel, enabling Continuous Deployment.

Step 1: Sign Up/Log In to Vercel Go to vercel.com and sign up, typically using your GitHub, GitLab, or Bitbucket account for the smoothest integration.

Step 2: Import Your Git Repository

  1. From your Vercel dashboard, click on "Add New..." and then select "Project". Vercel Dashboard - Add New Project
  2. Import Git Repository: Vercel will prompt you to connect to your Git provider (GitHub, GitLab, Bitbucket) if you haven't already. Authorize Vercel.
  3. Select Your Repository: Choose the repository containing your React application. You might need to install the Vercel app on your Git provider account or specific repositories. Vercel - Select Git Repository

Step 3: Configure Your Project After selecting your repository, Vercel will attempt to auto-detect your framework and settings. Vercel - Configure Project

  • Framework Preset: Vercel will likely detect "Create React App," "Vite," or another relevant preset. If it does, many settings below will be pre-filled correctly. If not, select the appropriate one or "Other" for a custom setup.
  • Root Directory: If your React app is in a subdirectory of your repository (e.g., in a monorepo), change this setting. Otherwise, it's usually the root.
  • Build and Output Settings (Often auto-filled by Framework Preset):
    • Build Command: Override if necessary (e.g., if your build script is not npm run build). For CRA/Vite, it's often yarn build or npm run build.
    • Output Directory: The directory your build command generates (e.g., build for CRA, dist for Vite).
    • Install Command: Override if you use something other than yarn install or npm install.
  • Environment Variables: You can add environment variables here (e.g., REACT_APP_API_URL or VITE_API_KEY). Vercel securely stores these and makes them available during the build process and to Serverless Functions (if you use them). We'll cover this more in Part 2.

Step 4: Deploy Click the "Deploy" button.

Step 5: First Deployment and Accessing Your Site

  • Vercel will clone your repository, install dependencies, run your build command, and deploy the output.
  • You can monitor the build logs in real-time on the Vercel dashboard for your project. Vercel - Build Logs
  • Once complete, Vercel provides you with:
    • A unique deployment URL for this specific build (e.g., my-app-git-main-username.vercel.app).
    • It also assigns default "Production Domains" (e.g., my-app.vercel.app and often a my-app-username.vercel.app variant).
  • Click on one of the domains to see your live React application!

Continuous Deployment in Action: Just like Netlify, Vercel sets up webhooks with your Git provider. Any push to your main branch (or other configured branches) will automatically trigger a new build and deployment on Vercel.

🔬 Section 4: Understanding Vercel's Build and Deployment Process​

Vercel's process is highly optimized and generally involves:

  1. Webhook Trigger: A Git push triggers a webhook that notifies Vercel.
  2. Clones Repository: Vercel clones the specific commit.
  3. Analyzes Project: Detects the framework and applies appropriate build optimizations and settings (or uses your overrides).
  4. Sets up Build Environment: Uses a containerized environment with Node.js and other necessary tools.
  5. Installs Dependencies: Runs your install command (e.g., yarn install or npm install).
  6. Injects Environment Variables: Makes configured environment variables available.
  7. Runs Build Command: Executes your specified build command (e.g., npm run build).
  8. Deploys Output:
    • The contents of your "Output Directory" are deployed to Vercel's Edge Network.
    • This includes static assets (HTML, JS, CSS, images).
    • If you have Serverless Functions (e.g., in an api directory), Vercel builds and deploys those too.
  9. Assigns Domains: The new deployment is made available at its unique deployment URL and then aliased to your production domain(s) if it's a production deployment.

Vercel's build system is designed for speed and efficiency, often utilizing caching for dependencies and build outputs to accelerate subsequent builds.

💡 Conclusion & Key Takeaways (Part 1)​

Vercel offers a streamlined and powerful platform for deploying React applications, with a strong emphasis on developer experience and performance. Its Git-based continuous deployment workflow, automatic framework detection, and global edge network make it an excellent choice for hosting modern frontend projects.

Key Takeaways:

  • Vercel is a cloud platform ideal for static sites and Serverless Functions, with excellent support for React, Next.js, Vite, and other frontend frameworks.
  • Deployment via Git integration is the primary method, enabling CI/CD.
  • Vercel often auto-detects framework settings (build command, output directory) but allows overrides.
  • Deployments are distributed globally via Vercel's Edge Network.
  • Pushes to your main branch (or other configured branches) trigger automatic rebuilds and deploys.

➡️ Next Steps​

We've successfully deployed our React app to Vercel! In "Deploying to Vercel (Part 2)", we will explore further Vercel features, including:

  • Adding custom domains.
  • Managing environment variables for different environments (production, preview).
  • Understanding Vercel's Preview Deployments for branches and pull requests.
  • Using the Vercel CLI.
  • Comparing Vercel with Netlify for common use cases.

Get ready to further leverage the power of Vercel for your deployments!

glossary​

  • Vercel: A cloud platform for frontend developers, providing infrastructure and tools to deploy static sites and Serverless Functions globally. Creator of Next.js.
  • Edge Network (Vercel): Vercel's global network of servers that cache and serve content, as well as execute Serverless Functions, close to users.
  • Framework Preset (Vercel): Pre-configured build settings Vercel uses when it detects a known framework (like Create React App, Vite, Next.js).
  • Output Directory (Vercel): The directory Vercel expects to find your static build assets (e.g., build for CRA, dist for Vite).
  • Preview Deployments (Vercel): Unique, shareable URLs automatically generated by Vercel for every Git branch and pull request, allowing for easy review of changes.

Further Reading​