Solving CORS Errors Associated with Deploying a Node.js + PostgreSQL API to Heroku
Part 2: Deploying a GraphQL API
In the first part of this guide, I shed light on how to solve CORS errors while deploying a Node.js + PostgreSQL REST API to Heroku.
You can check out the article from the link above because I will be making reference to it, to avoid repeating myself.
In this second part, I will cover in detail the things we need to do to deploy a GraphQL API to Heroku stress-free. But we will take a different approach, which is deploying a GraphQL API to Heroku via Docker.
According to opensource.com, Docker is a DevOps tool used to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and deploy it as one package. This container will now make it possible for the application to run on any other Linux machine regardless of any customized settings that the machine might have that could differ from the machine used for writing and testing the code.
I would assume you know GraphQL, Docker, Typescript, as well as other technologies mentioned in part 1 of this guide. We will use Apollo Server for our GraphQL server, Typeorm to handle Postgres functions, Express-Session for sessions and cookies, and Redis to store our cookies.
In this guide, we will cover the following steps:
- Setting up our Server
- Configuring CORS on our Server
- Setting up Dockerfile
- Configuring Environment Variables
- Deploying to Heroku
Dependencies we will use:
- express
- apollo-server-express
- type-graphql
- ioredis
- connect-redis
- express-session
- typeorm
- heroku-cli installed globally
- dotenv-safe
- cors
Setting up our Server
Setting up our server the right way is very crucial if we want to avoid getting CORS error in production. CORS errors are sometimes a result of the server inability to set cookies due to a wrong configuration. To solve this, our server setup needs to look something like this:
Configuring CORS on our Server
It is advisable to explicitly configure CORS to permit a particular client-side URL. This can be achieved by doing this:
In this case, our client-side needs to be configured too before it will be able to access our API. For Apollo Client, the following configuration will work just fine:
Setting up Dockerfile
First of all, we need to download and install Docker and make sure it is running in the background. If you have not used Docker before, I suggest you watch this complete Docker tutorial by Academind to help you get started.
The next step is to create a Dockerfile and a .dockerignore file, adding node_modules and our error file (yarn-error.log or package-error.log) to the .dockerignore file. Our Dockerfile needs to look something like this:
This contains the step by step process Docker needs to run to create a Docker image for our API. You can read more on how to dockerize your Node.js web app via the link below.
Configuring Environment Variables
Our environment variable setup, both local and on Heroku, will still be the same as in the case of part 1.
Deploying to Heroku
Now that we are done setting up our server, the final step is to deploy to Heroku. The first thing we need to do is log into Heroku and Heroku container registry via the heroku-cli:
Next, we need to create a Heroku app, build the image, push it to the container registry, and release the image to our app:
And we are done! If you’ve enabled GraphQL playground in production, you can go ahead and open your API heroku URL in your browser:
Or you can consume your API via your client-side.
