Deploying NestJS Application using Vercel and Supabase

Understand that deploying to Vercel is quite easy, however, there are some setups you need to take into consideration during deployment.

Prerequisites

• NestJS Project connected and working properly locally in the development environment with PostgreSQL
• Vercel Account for deployment
• Supabase Account (we will be setting up our PostgreSQL Database here)

Let's start with the Supabase setup considering that your NestJS app is ready for deployment.

Supabase Account

Supabase is an opensource firebase alternative with full support and seamless configuration of your PostgreSQL database, and it also provides additional features such as authentication, storage, etc.

Set up a new account on Supabase and create a new project in the account.

Once the setup is completed, click on the connect button on the Home page. This will show you different options for connecting the DB to your project

Test the connection on your locals with the credentials provided to make sure everything is working perfectly well.

NOTE: Make sure the credentials are not exposed and stored in your .env file (I believe you know this already 😉)

Next, Let's set up our Vercel account and deploy the project

Vercel

Typically, Vercel is known mostly to be used for front-end app deployment, however, it can also be used to deploy backend projects.

PS: Use a suited service provider instead if you're working on a medium to large-scale project for your backend deployments.

On your Vercel account, create a new project and connect to your Git repository. Import your .env file and click the Deploy button.

Voila, that's it 🎉🎉🎉.
...

Common Issues likely encountered

# Error: No Output Directory named "public"

This is a common error because Vercel needs to know your output directory during the build process. To fix this, simply add a versel.json file and copy this:

{
  "version": 2,

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

Run deployment again and that's all

...

# Error: This Serverless Function has crashed

In my case, it was because of a module not found error

...
There are several ways to fix this problem:

Method 1 (Replace all your imports with relative path)

From

import { UsersService } from 'src/users/users.service';

to

import { UsersService } from '../users/users.service';

...

Method 2 (Modify your vercel.json file and .gitignore file)

I eventually went with this method because I didn't need to confine my app to using only relative path imports.

So, modify the vercel.json to this

{
  "version": 2,

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

Go to your .gitignore file and remove /dist.

Run a new deployment and that's all.

Happy coding! 😎