Auto-Deploy a Node.js Server: Heroku + GitHub

#beginners #node #heroku #github

Yo yo yo, I'm glad you're here! We'll be discussing how to auto-deploy a Node.js server on Heroku through GitHub integration. This means that whenever you push a change to your GitHub repo that it will automatically deploy your server on Heroku with those changes! This makes it easy to keep your live app and repo in sync, you no longer have to keep track of them separately! If you haven't set up a Node.js server locally before, check out Node.js + Express Server Setup first.

You can find the code used in this article on GitHub.

There are three main sections in this article. Following them will take you through the entire process of setting up your GitHub repo/Heroku server, connecting the two, and auto-deploying:

GitHub Repo Setup
Heroku App Setup
Auto-Deploying the Server

GitHub Repo Setup

Creating the Repo

First, you want to make sure that you have the Git CLI installed, this will allow you to perform git commands with your local command-line to interact with your GitHub repo.
Now you need to create your GitHub repo. There are ways to do this with the command-line, but I do this through the GitHub site by clicking the "New repository" option under the "+" drop-down at the top right of the page.

Go ahead and give your repo a name, it can be anything you'd like. Also, check the "Initialize this repository with a README" checkbox. Finish up by clicking "Create repository".

Cloning the Repo

Find and open up your repo on GitHub and look for the green "Clone or download" drop-down, and copy the link inside.

Now that you've got your repo created and its clone link, you can clone it to your computer. On your computer somewhere, create a folder that you would like the code to go under. Open up your command-line and navigate to the inside of the folder that you created. Command-line navigation instruction can be found here. Run the command:

git clone [your repo's clone link]

So, what exactly did this command do? If you take a glance at the folder you cloned in, the README.md file that was created along with your repo is now inside. That's not it, either. Allow your hidden folders to show and you'll see a .git folder. You can give this folder a look, but don't edit anything. It's hidden because its information is sensitive. Its basic function is to connect and sync your GitHub repo with the one that is now on your computer. Cool, now you can move on to getting your Heroku server set up.

Server Preparation

Running a server locally is a bit different than running it on Heroku. If you haven't already, copy the files from this repo to the folder that you created for your server. You'll notice it has a bare-bones Node.js server structure. There's an index file, and a package file, but there's also this Procfile. So, what is the Procfile? It tells Heroku which command to run when starting the app. If you look at its content, you'll see:

web: node index.js

This command node index.js is the same command that you can run from your command-line to start your server locally - but Heroku needs it to be inside of the Procfile so that it knows which command to run in order to start the server itself.

Pushing to GitHub

Now that you've got the files copied to your folder, you can go ahead and push them to your GitHub repo. In order to do that you need to use these commands on the command-line, within your folder, in this order:

git add index.js package.json Procfile
git commit -m "Server prep"
git push origin master

_{^{If you're having trouble pushing to the repo you created, make sure you didn't include the .git folder from the repo you copied the server files from; you should only have one .git folder inside your top-level folder - the one that was copied with your initial GitHub repo.}}

Heroku App Setup

Creating the Heroku App

Jump on over to Heroku and click "Create new app" from the "New" drop-down menu at the top right of the page.

This will prompt you for a name, use kebab casing. After you've entered a name you're happy with, click the "Create app" button.

Connecting GitHub

Navigate to your newly created Heroku app, and click on the "Deploy" tab:

Under this deploy tab, you'll see a section called "Deployment method". In this section you'll see an option "Connect to GitHub", click on that.

It will ask you to connect your GitHub account, and then ask you to choose which GitHub repo to connect to the Heroku app. Connect the Node.js GitHub repo that you created previously.

Auto-Deploying the Server

You've connected your Heroku app and GitHub repo, but you don't have auto-deployments quite yet. Check out the "Automatic deploys" section that's also under the "Deploy" tab.

Click the button "Enable Automatic Deploys". This will make it so that whenever you push changes to the main branch of your GitHub repo, Heroku will detect those changes, and automatically deploy the server.

Triggering Auto-Deployment

In order to trigger an auto-deploy, you've got to make a change to the code, and push it to your GitHub repo. Let's change the response string of your first route in index.js. Change it to anything you want, and it should be displayed on your browser when you open your app. I'm changing my route's response to look like this:

// Our first route
app.get('/', function (req, res) {
  res.send('Hello Node + GitHub! This code push has auto-deployed!');
});

Now go through the same steps we discussed previously to push these changes to the GitHub repo: git add index.js, git commit -m "Changed route response", and finally git push origin master.

If you take a look at your Heroku app's dashboard, you'll see there is a build log under the "Overview" tab:

If you click "Open app", you'll see the response from your auto-deployed code:

Review

Congratulations! You've just set up a Node.js server on Heroku with auto-deploy capability through GitHub integration. You did this by creating a Node.js GitHub repo, defining the server and its Procfile, creating a Heroku app, and configuring the auto-deployment option to deploy on new code pushes to the main branch of your GitHub repo. You no longer have to worry about syncing your Heroku app and GitHub repo manually, the code is all in one place! If you'd like to learn more about organizing your routes, check out External Routes with Node.js.