Posted onMar 25, 2020 • Originally published atnotiz.dev onMar 25, 2020

Deploy Nestjs with Prisma to Heroku

#nestjs #prisma #heroku

You will learn how to deploy a NestJS application with Prisma 2.0 toHeroku 🚀. Also we will create aPostgreSQL database on Heroku and connect it with Prisma.

Check out my previous tutorialHow to query your database using Prisma with Nestjs to create aPrismaService for your Nest application.

Preparing Nest application for Heroku

Let's get started by preparing our Nest application to run on Heroku.

First, we modifymain.ts to use the port provided by Heroku as an environment variable. CORS can also be enabled for web or mobile applications making requests to the Nest application.

import{NestFactory}from'@nestjs/core';import{AppModule}from'./app.module';asyncfunctionbootstrap(){constapp=awaitNestFactory.create(AppModule);app.enableCors();awaitapp.listen(process.env.PORT||3000);}bootstrap();

Heroku takes care of installing ournode_modules for us. Before Heroku can start our Nest application usingnpm run start:prod, we need to generate thePrismaClient and build our app. We add"postinstall": "npx prisma generate && npm run build", to thescripts in ourpackage.json which generates a newPrismaClient and performs the app build, creating ourdist folder.

Heroku needs to know how to execute our Nest application via aProcfile. Create aProcfile in the root folder with our start scriptweb: npm run start:prod. Now Heroku will install our dependencies, generate Prisma Client and build the application in thepostinstall script and then start the application.

New Heroku app and CLI

Next, sign up or log into yourHeroku account. Create a new Heroku app by clicking onNew and thenCreate new app.

Choose an app name to identify your app and the name is also used as your default api endpoint athttps://your-app-name.herokuapp.com/. You can also choose between two regions for your appUnited States andEurope.

Note : Heroku let's you configure a custom domain in your app settings.

Alright, our heroku app is set up.

We install theHeroku CLI and deploy our Nest application by pushing to Heroku git.

heroku logincdyour-nest-appheroku git:remote-a your-app-namegit push heroku master

After pushing our current application to Heroku, we see the following output in our terminal or in theActivity tab of our Heroku app.

Heroku printsBuild succeeded! and our application link at the end likehttps://nestjs-prisma-heroku.herokuapp.com/.

Let's visit our app by either clicking on the link or onOpen app in the toolbar.

I am seeingHello World!. The Nest app has been successfully deployed to Heroku 🎉

In the next step we will setup a PostgreSQL database and use Prisma Migrate to apply our database schema.

Setup PostgreSQL and use Prisma Migrate

Navigate toResources tab on Heroku and search for theHeroku Postgres addon.

We select a plan for our Postgres database, we start with theHobby Dev - Free plan and clickProvision. We can upgrade the database plan later at anytime.

Our database has been setup and it appears in the addon list.

To connect Prisma to the database, we need to provide the database connection URL found in theSettings of our database. SelectHeroku Postgres and switch to theSettings tab andView Credentials…. Copy the wholeURI starting withpostgres://.

.env file support is included in Prisma 2.0. Hence, we provide the database connection URL as the environment variableDATABASE_URL.

datasource db {  provider = "postgresql"  url = env("DATABASE_URL")}

Paste theURI from the Heroku Postgres dashboard into theprisma/.env file.

DATABASE_URL=postgres://ytodrxnfzdnxlr:005777fd...

WARNING : Do not commit.env files into version control

Right now our database is empty and has no tables.

datasource db {  provider = "postgresql"  url = env("DATABASE_URL")}generator client {  provider = "prisma-client-js"}model NationalPark {  id Int @id @default(autoincrement())  name String  country Country @relation(fields: [countryId], references: [id])  countryId Int}model Country {  id Int @id @default(autoincrement())  name String @unique  parks NationalPark[]}

Let's usePrisma Migrate to save and apply our migrations for the following schema.

npx prisma migrate save--experimentalnpx prisma migrate up--experimental

We can usePrisma Studio to view if our migration was successful. Run and open studio athttp://localhost:5555.

npx prisma studio--experimental

Our migration was successful 🎉We see theNationalPark andCountry table was created in our database. We can use Prisma Studio to create our test data, start creating a newCountry and then newNationalPark s as they require a connection to a country.

Since we have our database ready, we create two REST endpoints to query allNationalPark s and to create a newNationalPark in our Nest application.

Prisma CRUD operations in Nest

Before we implement our CRUD operations in Nest, we need to generate a newPrismaClient whenever we make a change to ourschema.prisma or our.env file. Runnpx prisma generate and now we have access to theCRUD operations of our models.

Find Many National Parks

We setup theGET endpoint for allNationalPark s at/nationalParks.

import{Controller,Get}from'@nestjs/common';import{PrismaService}from'./prisma/prisma.service';@Controller()exportclassAppController{constructor(privatereadonlyprisma:PrismaService){}@Get('nationalParks')getNationalParks(){returnthis.prisma.nationalPark.findMany();}}

Start the Nest app locally in dev modenpm run start:dev and try the request athttp://localhost:3000/nationalParks.

I have added one national park via Prisma Studio, but we don't see theCountry in the response. To return the countries in the national park response weinclude country in thefindMany() query using theinclude keyword.

@Get('nationalParks')getNationalParks(){returnthis.prisma.nationalPark.findMany({include:{country:true}});}

Awesome, our response now includesCountry.

Create New National Park

We can query our national parks, but we also want to add new national parks. Create theNationalParkDto class with the two propertiesname for the national park andcountry as the country name.

exportclassNationalParkDto{name:string;country:string;}

We use this DTO class in thePOST endpoint for creating a new national park.

@Post('nationalPark')createNationalPark(@Body()nationalParkDto:NationalParkDto){}

As we need a countryid to connect to a national park we useprisma.country.findOne to see if this country already exists in our database. Useasync/await to find the country asPrismaClient CRUD operations always returnPromise's.

@Post('nationalPark')asynccreateNationalPark(@Body()nationalParkDto:NationalParkDto){constcountry=awaitthis.prisma.country.findOne({where:{name:nationalParkDto.country},});if(country){// create national park and connect country});}else{// create national park and create country}}

When we create our national park we have two options for how to create the connection to a country. If the country exists we useconnect using the country idcountry: { connect: { id: country.id } }. Otherwise wecreate the country alongside the national parkcountry: { create: { name: nationalParkDto.country } }. Let's also return the createdNationalPark including theCountry in our response. OurPOST endpoint looks like this:

@Post('nationalPark')asynccreateNationalPark(@Body()nationalParkDto:NationalParkDto){constcountry=awaitthis.prisma.country.findOne({where:{name:nationalParkDto.country},});if(country){returnthis.prisma.nationalPark.create({data:{name:nationalParkDto.name,country:{connect:{id:country.id}},},include:{country:true},});}else{returnthis.prisma.nationalPark.create({data:{name:nationalParkDto.name,country:{create:{name:nationalParkDto.country}},},include:{country:true},});}}

Yeah! 🎉 The request works locally.

We are ready to push our Nest application to Heroku again to expose the two new REST endpoints.

Push to Heroku and test new Endpoints

Rungit push heroku master in your Nest application and wait for the build to succeed. Also, we need to see if the environment variableDATABASE_URL is added to the Heroku app. Head over to theSettings tab and click onReveal Config Vars.DATABASE_URL has already been added when we installed theHeroku Postgres addon. If you like to change your database you can update the URL here.