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 public
directory, 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.