back to all posts

Deploying React NextJS App in Heroku

by Nabendu Biswas / July 13th, 2019

#javascript #react #graphql
Series: React-nextjs

Now that we have completed our Restaurant Billing app, it’s time to deploy it to the web. You can find my earlier article related to the same Restaurant Billing App built in React NextJS

Most apps have just the frontend to deploy or the frontend and backend to deploy. But our app have three pieces, so we need 3 deploys.

Prisma Server— MySQL database
Yoga Server — Mutation and Query Resolvers
React App — Next.js app

We will use heroku for this, as we can deploy all three there. We will start with Prisma

Prisma Server

First go to you Prisma dashboard and goto Servers. And then click on ADD SERVER.


After this in this screen give the Server a name and description.

New Prisma ServerNew Prisma Server

Then click on Create a new database in this screen.

Set up a databaseSet up a database

then in Choose database provider, we choose Heroku

Choose database providerChoose database provider

then click on Connect to Heroku

Connect to HerokuConnect to Heroku

then enter your Heroku credentials.

Link Heroku accountLink Heroku account

then choose Hobby Dev and click on Create Database.

Create new databaseCreate new database

then we will get New database successfully created. Now click on SET UP A SERVER

New database successfully createdNew database successfully created

then Setup the Server.

Setup a ServerSetup a Server

After that again choose the Free plan and click on CREATE SERVER

Create a new ServerCreate a new Server

then we will get the message Prisma server successfully deployed. Click on VIEW THE SERVER

Prisma server successfully deployedPrisma server successfully deployed

We will now see our server successfully created.

New Server addedNew Server added

Then we will head over to our terminal to add Service to our server. Run the command npm run deploy -- -n

Use the down arrow key to navigate to our newly created server and press enter.


Give your service a name and give stage as prod.

Service NameService Name

Next your service will be successfully created.


Head over to Prisma dashboard and you can see the new service.

Newly created serviceNewly created service

If you check your prisma.yml, you can see that our earlier endpoint is commented and a new prod endpoint added.

prisma.yml updateprisma.yml update

We will uncomment the secret in prisma.yml as this is production

uncommenting secretuncommenting secret

Finally, again run npm run deploy

npm againnpm again

Yoga Server

Now, it’s time to deploy our app to Yoga Server. You need to have heroku cli installed for this. Check this link for installation instruction.

Next,head over to the terminal. You should be in the main folder containing your backend and frontend folders. First commit your all uncommited code by -

    git add -A
    git commit -m "Heroku deployment"

main foldermain folder

Now we login to heroku by heroku login We need to press any key

heroku loginheroku login

It will open your default web-browser and show the below screen.


Once you login this screen will be show and you need to close the browser.

Close the browserClose the browser

We will now see the successful login in terminal.

Logged inLogged in

After this we need to create a new heroku app by the below command.

    heroku apps:create billingrestro-yoga-prod

heroku createheroku create

You can now see the app create in your heroku dashboard.

yoga appyoga app

Now we will get a new branch in our terminal. Do a git remote -v

git remotegit remote

Heroku only provided us one endpoint, but we need two — one for backend and other for frontend. So, we will create a new endpoint by the one provide by heroku.

    git remote add heroku-backend

One more endpointOne more endpoint

Now, we will push all our backend code to this heroku-backend remote.

    git subtree push --prefix backend heroku-backend master


Next, we will need to add the secret contents from variables.env to our yoga server. Open the yoga app in heroku and goto Settings. Click on Reveal Config Vars.

heroku appheroku app

So, open your variables.env file. Take everything from here except PRISMA_ENDPOINT, which you have to take from prisma.yml file


Add all the Config Vars as Key value pair.

Config VarsConfig Vars

Now, click on More and then Restart all dynos.

The pop-up will as you to confirm again.

After sometime click on Open App on the top right corner. It will open the yoga graphQL playground, in which you can see all the public facing Queries and mutations

Yoga GraphQLYoga GraphQL

React App

Last we will deploy our frontend code also to heroku. First, we need to update the code a bit. Open you config.js file and add the line for prodEndpoint. The link is the yoga app you deployed in the previous part.


Next, add these to withData.js file. Changes are in line 3 and line 8.


Next, we go to the terminal and create a new heroku app by heroku apps:create billingrestro-react-prod

On checking git remote -v we will find the new remote endpoint

We, also need to do a change in package.json for our frontend, before deploying. We add Line 12 for heroku-postbuild and also add -p $PORT in Line 9.


We, will add these changes before pushing to remote

Next, we will push to heroku-frontend by the below subtree command

    git subtree push --prefix frontend heroku-frontend master

If we check in our heroku dashboard, we will find this newly added app.

React appReact app

Now, if we go to our react app, we get a network error. If we open the console, we will found it’s a CORS error.

CORS errorCORS error

The CORS error occured because in our yoga config, we are pointing to localhost. So, open the yoga app, then go to Settings, then Reveal Config Vars and change the FRONTEND_URL to the react app.

React configsReact configs

Then, as usual click on More and Restart all dynos.

Restart all dynosRestart all dynos

Then, go again to the frontend url and you get no error.

No errorNo error

But we have the same problem, which we had when creating in localhost. We need a login and only ADMIN can Sign for new Account. So, we create the Admin first by opening our Yoga playground and create one user by the below mutation.

    mutation createUser {
        signup(email:"",name: "Admin",password: "valid"){

Valid gmail idValid gmail id

Next, we go to the Prisma dashboard and open our service. In the bottom right in permissions, click on the three dots and it will open an popup. Click on Add an item and select ADMIN from the list.

Prisma dashboardPrisma dashboard

Then a new button Save to Database will appear in the bottom right. Click on it.

Save to DatabaseSave to Database

Head back to the frontend url and login with the Admin user to see all options.

The Admin UserThe Admin User

After adding some items the Web-app looks like below

The complete AppThe complete App

You can visit the deployed url and play here. Use the credentials

Also, visit the github for the project to know all the features. And please give star if you like it. Complete Production Grade Restaurant Billing App

Nabendu Biswas