Solving CORS Errors Associated with Deploying a Node.js + PostgreSQL API to Heroku

Part 2: Deploying a GraphQL API

Stephen Okpalaononuju
Feb 28 · 3 min read

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 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:

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:

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.

Our environment variable setup, both local and on Heroku, will still be the same as in the case of part 1.

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:

https://yourherokuurl.com/graphql

Or you can consume your API via your client-side.

From Confusion to Clarification

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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