Introduction

In this tutorial, we deploy the API to Heroku. First, the run-scriptsbuild and start in package.json are configured and tested. After that, we use the Heroku CLI to create a new app under our account, and deploy the API.

Requirements

For this tutorial, you need:

  • An account on Heroku, sign up here if you don't have one.

    • A free account is sufficient, and you don't need a credit card to get one!

  • The Heroku CLI, visit this page and follow the installation instructions.

    • Run heroku -v to verify it's installed.

1. Configure and test the production build.

In this step, we run the build command locally to make sure everything works as expected.

1.1 Update the run-scripts in package.json

Open package.json and find the scripts object. Replace the values of the start and build scripts with the following commands:

  "scripts": {
    //...
    "start": "node dist/apps/api/main.js",
    "build": "nx build api --prod",
    //...
  },

1.2 Build and run the API locally

With these scripts in place, run the following command to build the API:

yarn build

The output will be similar to the following:

yarn run v1.22.4
$ nx build api --prod

> nx run api:build:production
Starting type checking service...
Using 14 workers with 2048MB memory limit
Hash: c521fa45a781fce8412b
Built at: 08/20/2020 10:02:15 PM
Entrypoint main = main.js main.js.map
chunk    {0} main.js, main.js.map (main) 4.15 KiB [entry] [rendered]
✨  Done in 9.95s.

Once the API has been built, run the following command to start the API:

yarn start

💡 Make sure to stop your development server before starting the API, because you can only have one process listening on the same port. If you forget that, the API will fail, and print message like this:

Error: listen EADDRINUSE: address already in use :::3000

1.3 Commit your changes

The Heroku deployments work by pushing a branch to the created application. That means that in order for the last changes to take effect, we need to commit the changes before we move on.

Run the following command to commit the changes:

git commit -am "Update run-scripts"

2. Deploy to Heroku.

In order to deploy the API to Heroku, we first create an application on Heroku. After that, we can use git push to actually deploy the API.

2.1 Create the application on Heroku

Run the following command to create the application on Heroku:

heroku create beehive-graphql

💡 The application name on Heroku has to be unique. If you use an existing name, Heroku will tell you:

Creating ⬢ beehive-graphql... !
 ▸    Name beehive-graphql is already taken

2.2 Deploy the application to Heroku

Run the following command to trigger the deployment on Heroku:

git push heroku master

This will push the latest commit to Heroku, and start the build process. You can follow the output in your terminal.

Once you get the following text, the application has been successfully deployed:

remote: https://beehive-graphql.herokuapp.com/ deployed to Heroku

2.3 Test the GraphQL API on Heroku

You can now visit the GraphQL endpoint on your newly deployed API:

Visit https://beehive-graphql.herokuapp.com/graphql to check it out!

However, what you see now not the playground you saw in the previous tutorial 😲.

GET query missing.

The reason is that the API on Heroku runs in production mode, and this disabled playground the playground by default.

Luckily, we can use a curl command to verify the API is working

Run the following command to execute the uptime query:

curl -XPOST \
     -H "Content-Type: application/json" \
     --data ' { "query": "query { uptime }"  }' \
     https://beehive-graphql.herokuapp.com/graphql

2.4 Enable the Playground on production servers (optional)

Sometimes it can be useful to deploy a GraphQL server with the playground enabled in production mode.

In order to do so, open libs/core/src/lib/core.module.ts and change the configuration of the GraphQLModule , and set the playground option to true :

GraphQLModule.forRoot({
  autoSchemaFile: true,
  playground: true,
}),

In order to deploy this, commit the changes and run the deployment again:

git commit -am "Enable playground in Production mode"
git push heroku master

When you now visit https://beehive-graphql.herokuapp.com/graphql, you should be greeted with the playground again! 🎉

Summary

In this tutorial, we configured the start and buildrun-scripts in package.json and made sure they worked as expected. We committed those changes in order for them to be pushed to Heroku.

After that, we created a new application on Heroku and used the git push command to deploy the API.

Because Heroku runs the apps in production by default, we did not get the GraphQL Playground when visiting the /graphql endpoint on the API. Luckily, this is easy to fix by enabling the playground option in the GrapQLModule .

Thanks!

And with that, this series comes to an end, I hope it was useful. If you want to see more content like this, make sure to follow me on Twitter. If you have any questions, send me a tweet or leave a comment on DEV! Cheers! 🐝

This post is also available on DEV.