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.

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

Then click on Create a new database in this screen.

then in Choose database provider, we choose Heroku

then click on Connect to Heroku

then enter your Heroku credentials.

then choose Hobby Dev and click on Create Database.

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

then Setup the Server.

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

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

We will now see our server successfully created.

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.

Next your service will be successfully created.

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

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

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

Finally, again run npm run deploy

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"

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

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.

We will now see the successful login in terminal.

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

heroku apps:create billingrestro-yoga-prod

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

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

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

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.

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.

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

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.

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.

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.

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

Then, go again to the frontend url and you get 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
}
}

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.

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

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

After adding some items the Web-app looks like below

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.

--

--

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
Nabendu Biswas

Nabendu Biswas

589 Followers

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger