Deploying a NestJS Application on Vercel with a PostgreSQL Database

Deploying a NestJS Application on Vercel with a PostgreSQL Database

Prerequisites:-

• Familiarity with Nest.js
• Nest.js application connected and working locally with PostgreSQL
• Vercel and Supabase accounts

Database Setup:-

Login to Supabase to obtain database credentials: Hostname, Database Name, Username, and Password.

Try to connect your application with the credentials locally to make sure everything is working fine.

You will get this under the settings route. Your route would be something like /settings/database as shown in the piture below:

Prepping for Vercel Deployment:-

Now create a vercel.json file in the root of your application and add the following configuration to it.

{
  "version": 2,

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

It should look like something like this

Project Setup on Vercel:-

Now login/sign-up in to your Vercel account and create a new project there?

Import your Git repository.

Configure your project:-

Now configure your project i.e. name, enter the environment variables if any, and then hit deploy.

And that’s it. Wait for deployment and test using the provided link.

Swagger UI Loading Issue Fix:-

You might not be able to see your swagger docs on your deployed nest.js app, as Vercel is unable to load the swagger CSS. For that you need to load the swagger CSS with external CSS Links, Here is the sample code that shows, how to do it.

?  SwaggerModule.setup("docs", app, document, {
    customSiteTitle: "Api Docs",
    customfavIcon: "https://avatars.githubusercontent.com/u/6936373?s=200&v=4",
    customJs: [
      "https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-bundle.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-standalone-preset.min.js",
    ],
    customCssUrl: [
      "https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.min.css",
      "https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-standalone-preset.min.css",
      "https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.css",
    ],
  });        

And that’s it.

Now you can access your nest.js application on vercel.

Issue With Helmet:-

All those who are using helmet might not be able to see the swagger page as the helmet blocks the request.

Now the hack is just to initialize the helmet after the swagger is initiated, as in the node file is read from top to bottom then the request won’t get blocked and you will get to see swagger docs.

This is how your main file will look like.

  SwaggerModule.setup("docs", app, document, {
    customSiteTitle: "Api Docs",
    customfavIcon: "https://avatars.githubusercontent.com/u/6936373?s=200&v=4",
    customJs: [
      "https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-bundle.min.js",
      "https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-standalone-preset.min.js",
    ],
    customCssUrl: [
      "https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.min.css",
      "https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-standalone-preset.min.css",
      "https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.css",
    ],
  });

 app.use(helmet());? ? ? //here        

Follow Me on GitHub

If you found this article helpful or interesting, consider following me on GitHub for more updates, projects, and resources related to NestJS and other technologies. You can find my GitHub profile here.

That’s it.

Happy Coding!