Deploying a NestJS Application on Vercel with a PostgreSQL Database
Tags: nestjs, vercel, typescript, helmet
Published: 2024-06-03 07:56:38

Deploying a NestJS Application on Vercel with a PostgreSQL Database

**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


![Supabase database section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvys6thhzmyu5h090be1.png)






**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


![Vercel.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvfwmg9wqvq2yy4mkqw7.png)




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


![Vercel Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qe9dt4l9q02qv7qq00ee.png)


Import your git repository and connect your github repository


![Import your repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4syw1fp2tp8pmji2rfm.png)


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

![Deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd2pb6b077qe1gmypfd8.png)



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


![Build succeed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xu5h2gsir323r3mok6x.png)



**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 ](https://github.com/BilalurRehman-27
)for more updates, projects, and resources related to NestJS and other technologies. You can find my GitHub profile [here](https://github.com/BilalurRehman-27/nestjs-jwt-auth-postgres-type-orm).

That’s it.

Happy Coding !