Deploying a NestJS Application on Vercel with a PostgreSQL Database

Bilal Ur Rehman — Mon, 03 Jun 2024 07:56:38 +0000

Prerequisites:-
This article is for someone who already knows the nest.js.

Familiarity with Nest.js
Nest.js application connected and working locally with PostgreSQL
Vercel account to deploy your application
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 under
/settings/database section

Prepping for Vercel Deployment:-

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



{
  "version": 2,

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

It should look like something like this

Project Setup on Vercel:-
Now login/signup to your vercel account and create a new project there

Import your git repository and connect your github 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 was unable to load the swagger css. For that you need to load the swagger css with external css,
Here is the sample code which shoes, 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:-

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

Now the hack is just initialize the helmet after the swagger is initilized, as in node file is read from top to bottom then the request won’t get’s blocked and you will got to see segger 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 !

DEV Community: Bilal Ur Rehman

Deploying a NestJS Application on Vercel with a PostgreSQL Database