Deploying React NextJS GraphQL App in Heroku

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

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.

Image for post
Image for post
ADD SERVER

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

Image for post
Image for post
New Prisma Server

Then click on Create a new database in this screen.

Image for post
Image for post
Set up a database

then in Choose database provider, we choose Heroku

Image for post
Image for post
Choose database provider

then click on Connect to Heroku

Image for post
Image for post
Connect to Heroku

then enter your Heroku credentials.

Image for post
Image for post
Link Heroku account

then choose Hobby Dev and click on Create Database.

Image for post
Image for post
Create new database

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

Image for post
Image for post
New database successfully created

then Setup the Server.

Image for post
Image for post
Setup a Server

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

Image for post
Image for post
Create a new Server

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

Image for post
Image for post
Prisma server successfully deployed

We will now see our server successfully created.

Image for post
Image for post
New 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.

Image for post
Image for post
npm

Give your service a name and give stage as prod.

Image for post
Image for post
Service Name

Next your service will be successfully created.

Image for post
Image for post
Successful

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

Image for post
Image for post
Newly created service

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

Image for post
Image for post
prisma.yml update

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

Image for post
Image for post
uncommenting secret

Finally, again run npm run deploy

Image for post
Image for post
npm 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"
Image for post
Image for post
main folder

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

Image for post
Image for post
heroku login

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

Image for post
Image for post
Login

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

Image for post
Image for post
Close the browser

We will now see the successful login in terminal.

Image for post
Image for post
Logged in

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

heroku apps:create billingrestro-yoga-prod
Image for post
Image for post
heroku create

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

Image for post
Image for post
yoga app

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

Image for post
Image for post
git 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 https://git.heroku.com/billingrestro-yoga-prod.git
Image for post
Image for post
One more endpoint

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

git subtree push --prefix backend heroku-backend master
Image for post
Image for post
subtree

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.

Image for post
Image for post
heroku app

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

Image for post
Image for post
variables.env

Add all the Config Vars as Key value pair.

Image for post
Image for post
Config Vars

Now, click on More and then Restart all dynos.

Image for post
Image for post

The pop-up will as you to confirm again.

Image for post
Image for post

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

Image for post
Image for post
Yoga 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.

Image for post
Image for post
config.js

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

Image for post
Image for post
withData.js

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

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post
package.json

We, will add these changes before pushing to remote

Image for post
Image for post

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

git subtree push --prefix frontend heroku-frontend master
Image for post
Image for post

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

Image for post
Image for post
React 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.

Image for post
Image for post
CORS 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.

Image for post
Image for post
React configs

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

Image for post
Image for post
Restart all dynos

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

Image for post
Image for post
No 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:"validemail@gmail.com",name: "Admin",password: "valid"){
email
}
}
Image for post
Image for post
Valid 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.

Image for post
Image for post
Prisma dashboard

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

Image for post
Image for post
Save to Database

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

Image for post
Image for post
The Admin User

After adding some items the Web-app looks like below

Image for post
Image for post
The complete App

You can visit the deployed url and play here. Use the credentials normal@gmail.com/normal

Also, visit the github for the project to know all the features. And please give star if you like it.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store