Deploying Nest.js Existing App To Vercel using Git

Nest.js deployment to Vercel

Elevate your NestJS deployment experience in 2024 with Vercel! Dive into this comprehensive guide for lightning-quick deployments, the wonders of serverless technology, and seamless scaling of your backend application. Say goodbye to the headaches of traditional deployment methods and embrace the Vercel revolution. Both your users and your codebase will be grateful!

NestJS Overview

NestJS is swiftly becoming a favorite in the Node.js community, renowned for its capability to craft sophisticated backend solutions. Picture it as the master builder that harnesses Node.js’s robust capabilities to construct well-organized, expandable applications. The buzz around NestJS is well-earned, thanks to its Angular-inspired design, deep integration with TypeScript, exceptional scalability, and a vibrant community backing it.

Wondering if NestJS is the right pick for your project? If your priorities include maintainable code, scalability, and a joyful development experience, NestJS is worth exploring. It’s rapidly becoming the go-to framework for developers aiming to establish a solid foundation for durable, successful backend systems.

Vercel: Your Passport to Cloud Deployment Euphoria

Envision a realm where deploying applications is as simple as setting a paper plane aloft. The days of battling with server configurations, intricate setups, or deployment anxieties are over. Enter Vercel, the deployment haven that transforms this vision into reality.

Vercel streamlines the deployment journey from your codebase to the cloud, endowed with features that’ll have you reveling in the serverless era: instantaneous deployments, the allure of serverless architectures, inherent security measures, a delightful developer experience, and a global presence.

Vercel represents more than just a platform; it signifies a transformative approach to deployment. It allows you to concentrate on crafting remarkable applications while Vercel seamlessly manages the deployment intricacies. So, shed the deployment distress and step into the Vercel era. Your applications and their users will be appreciative.

Preparation and Software Requirements

Setting up your NestJS application on Vercel is straightforward, with only a few essential tools and software installations needed. Here’s your checklist:

Fundamentals:

- Node.js and NPM: The bedrock of your NestJS application. Make sure they are up-to-date.
- NestJS CLI: This handy tool streamlines operations within NestJS projects. Install it globally via `npm install -g @nestjs/cli`.
- Vercel Account: Sign up for a Vercel account, opting for either the free or premium plans, to host your deployed application.

Step 1: Kickstart Your NestJS Project

Launch your terminal and initiate a new NestJS project using the command

npx create-next-app@latest

This command scaffolds a new directory named `my-app`, equipped with the standard NestJS framework structure.

Step 2: Dependency Installation

Move into your project directory and install all required dependencies:

cd my-app
npm install

This step ensures all package dependencies listed in your `package.json` are installed.

Step 3: Application Development

Now, the real fun begins! Embark on developing your NestJS application, integrating controllers, services, modules, and routes. For guidance, tap into the rich resources of NestJS’s documentation and tutorials.

Step 4: Prepping for Vercel Deployment

Ready to deploy? Follow these steps to get your application Vercel-ready:

- Generate a `vercel.json` file at the root of your project. This configuration file guides Vercel on how to efficiently build and serve your application.

• Add the following content to your vercel.json file:

{
  "version": 2,
  "builds": [
    {
      "src": "dist/main.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/main.js",
      "methods": ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"]
    }
  ]
}

Step 5: Deploy to Vercel

With your vercel.json file in place, follow these steps to deploy your application: The build folder is needed so don’t add it to your .ignore file

npm run build

Step 6: Import the project from the Git provider

Step 7: Set the deployment build output directory to dist

Step 8: Set the root directory to ‘./’ and framework Preset to “others”

Step 9: Deploy the app and monitor the build progress

NB: You might need to manually move the deployment to production after completion to reflect changes on the default domain based on your Vercel configurations.

Updated: Also ensure you remove dist from .gitignore

Cheers!!! Your NestJS application is now deployed on Vercel and accessible online.
We hope this guide helps you embark on a successful journey with NestJS and Vercel!