Introduction
In this tutorial, we deploy the API to Heroku. First, the run-scripts build 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 -vto verify it's installed.
- Run
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 build run-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! 🐝
Top comments (6)
I got the solution and successfully run my app on heroku,
Hello !!! I followed the instructions but failed to push the source code to heroku, any help
I solved using this - medium.com/@andrew.ray.gilbert/dep....
Do build, then remove script build and keep start script.
got it, many thanks <3
Hi, I got error while heroku push, 'Failed at the nxnesapi@0.0.0 build script.', please help.
dev-to-uploads.s3.amazonaws.com/up...