x

How Code Deployment Happens in Vercel on a very Highlevel

How Code Deployment Happens in Vercel on a very Highlevel

01/06/2025 - 0 Comments
  1. Connect Repository:
    • Link your GitHub, GitLab, or Bitbucket repository to Vercel.
    • Vercel sets up a webhook to trigger builds automatically on code changes.
  2. Push Code:
    • When you push code to the repository, Vercel detects the change and triggers a new deployment.
  3. Build Phase:
    • Vercel pulls the latest code from your repository.
    • Runs the build script defined in your package.json file.
      1. For example, for Next.js, it runs next build.
    • Performs the following tasks:
      1. Transpilation: Converts modern JavaScript/TypeScript (ES6+) to browser-compatible versions.
      2. Bundling: Combines all your code and dependencies into efficient bundles using Webpack/Vite.
      3. Static Asset Optimization: Optimizes images, fonts, and other static assets.
      4. Page Generation:
        1. Pre-generates static pages for SSG and ISR.
        2. Prepares server-side rendered pages for SSR.
  4. Serverless Function Deployment:
    • If you have API routes or serverless functions, Vercel packages these into isolated, stateless functions.
    • Deploys them to their serverless infrastructure.
  5. Deployment to CDN:
    • After the build is complete, Vercel uploads your app to its global edge network (CDN).
    • Each deployment is immutable and gets a unique URL (e.g., https://projectname.vercel.app).
    • For production, a custom domain can be linked.
  6. Caching & Invalidations:
    • Vercel caches static assets and pre-generated pages for improved performance.
    • Automatically invalidates the cache when new deployments occur.
  7. Preview URLs:
    • Vercel provides a unique preview URL for every branch or pull request.
    • Allows developers and stakeholders to preview changes before merging into production.
Tags
Nextjs