Deploying Gatsby With Express To Heroku

This is a follow-up to my previous tutorial/guide thing, where I showed how to use reCAPTCHA v3 on Gatsby.js, the React-based static site generator. I chose Heroku for this one because that’s what I normally work with, but any other platform that supports Node.js should be near-identical in the process of deployment.

If you’re using just plain Gatsby.js or React app, Heroku is still a good choice but literally any other hosting platform should be just fine, as you’re just uploading the build or publicdirectory, the static web files, to the host.

Anyway, let’s begin the deployment process, using my previous example project.

Two Similar Methods

There are actually two methods to deploy your project, both involve using git in the terminal, but the other one is through Github. They will appear and in fact feel identical but it’s really all up to you to decide which you think is more comfortable for you as the developer.

Optional: Project Pipeline

If you want to create a separate instance for staging and production then you’ll want to something like a pipeline. This will allow you to rapidly deploy and test on the staging environment, then just as easily deploy to production with the press of a single button.

Just fill out the forms accordingly and you should be ready for the next part. If you already have a Github repository, now would be a good time to connect that.

Click on Add app, this will allow you to either create a new app, or choose from your existing ones from your Heroku personal account. Creating a new one is pretty simple, again, just fill out the forms on the side, and it should be good to go.

Once you’re done with this part, let’s move on to actually configuring the project to source and build your application.

Project Configuration

Firstly, click on your newly-created application (if you haven’t made one already) and go to the Settings tab by the far right. Then scroll down a bit and click on Add buildpack.

At the popup screen, you’re gonna want the heroku/nodejs buildpack. You’re almost done. After that, we’ll head over to the Deploy tab. Now comes the two methods I was talking about earlier.

Remember app.json and static.json? If not, then you’re going to need these in your project root.

app.json

{
   "buildpacks": [{
      "url": "heroku/nodejs"
      }]
}

static.json

{
   "root": "public/"
}

One final thing to do is to change your package.json scripts so Heroku knows what to do next after the build. Gatsby already comes with a build script, so you may leave it as it already is, but your start script needs to tell Heroku that you want Node to run the Express app.

"scripts": {
   "start": "node src/server/app.js"
}

Method One: Heroku CLI

If you don’t already have Heroku CLI, go ahead and grab it over here. Then we’ll go over some of the commands you’ll need to push your source to Heroku. Don’t worry, I promise this is easy.

You first want to login to your Heroku account using the CLI:

$ heroku login

Then, assuming you’re already at your project directory, initialize git using:

$ git init

After that, you’ll want to add the remote using Heroku CLI (your project has to already exist at your Heroku account):

$ heroku git:remote -a your-project-name

Then the rest is just doing your typical git process of staging, committing, then pushing:

$ git add .
$ git commit -m "Init commit"
$ git push heroku master

And just like that, you’re done! Your app should be on its way to building itself then deploying to your Heroku dyno. It can take a while to build and initialize everything, as this tutorial assumes we’re using free dynos.

Method Two: Github

If you don’t like Heroku CLI and/or have already pushed your application to Github, then this second method is for you! Again, this is just as easy and also equally convenient.

For the sake of brevity, let’s assume you’ve done the staging, committing, and pushing part already, and are ready to deploy to Heroku. Follow these easy steps:

Connect Your Github Repository

If your account hasn’t been connected yet, it will bring up some permissions regarding the account-linking process. Just do that and eventually the form to search for your repository should show up. Just search for your repository name and click connect.

You should be able to see something like that. If you see the screen like the one above, you’ve done it correctly. We’re almost done actually.

Deployment

This part is super easy and possibly the most convenient part for you as a developer. You get to choose if you want to deploy automatically, or manually. Both are extremely easy and just require clicking a button.

Automatic deploys are good if you’re a solo developer and just want to see results instantly the moment you push to your repository. Word of caution: it’s your responsibility to determine if your application is in a deployable state. This is especially important if you don’t have a pipeline.

Then there’s Manual deploys, these are just a little bit slower, but on the plus side, if you spot any bugs during testing over at your local environment, then you can just patch that out, push to master, then click on Deploy Branch.

Congrats

Pat yourself on the back because you just successfully deployed your Gatsby app with Express to Heroku.

If you hit any snags or something breaks during deployment, feel free to ask me about it on my channels. I’ll try to help out as best I can.

Support Me

If you liked this tutorial, you can support me by, well, buying me coffee! By supporting me, I get to post more tutorials, and maybe even post side-content for fun in the near future. For now, my only promise is that I will improve my content.

If you want to collaborate with me or hire a front-end developer, you can do that over at my website.