Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

node.js
communitycreator

How to deploy a Node app to Heroku from Github

Chidume Nnamdi

Heroku has made it simpler to deploy apps to its production environment. We can now integrate Heroku with Github to make it easy to deploy code to apps on Heroku.

In this shot, we will build a simple Node.js app, push it to Github, and deploy it to Heroku. We will start by scaffolding a Node app, setting up Express, pushing it to Github, and making the configurations to link a Node app in Heroku to the app’s Github repository.

This Node app will be a web server powered by Express.js that will serve a simple index.html.

Requirements

You need to have Node.js installed on your machine. If you don’t have it already, go to the Node.js website and download the binaries meant for your machine.

You also need to have a basic knowledge of Express.js and how a web server works.

The Node app

Now that you have Node and npmA package manager for the JavaScript programming language (this comes bundled with the Node binaries) installed in your machine, we can move forward.

Create a folder in your machine named node-app. Use cd to move into the folder:

cd node-app

Initialize a Node environment in the folder:

npm init -y

This will generate a package.json file.

Create an app.js file:

touch app.js

Express server

Install the express library:

npm i express

Open the app.js file and add the following code:

/** require dependencies */
const express = require("express")

const app = express()

/** !important */
let port = process.env.PORT || 5000

app.get("/", (request, response) => {
    response.sendFile(path.join(__dirname, 'index.html'));
});

/** start server */
app.listen(port, () => {
    console.log(`Server started at port: ${port}`);
});

Explanation

  • Line 1: We install the express library.

  • Line 2: We create an express app.

  • Line 3: We set the port number. In the Heroku environment, we first check for the Heroku port number via process.env.PORT before we set our own port number if Heroku has none.

This line is important because Heroku sets its own port number for apps in its environment, and if you try to set your own port number, your app will throw errors and fail.

  • Line 4: We use get("/") to serve the index.html` file on the index page navigation.

  • Line 5: We start the server so it starts listening for requests.

Create the index.html file and add the code below:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

<meta name="title" content="">
<meta name="description" content="">
<meta name="image" content="">
<meta name="site" content="">

<title>Node server</title>

<body>
    <div class="container">
        A Node Server on Heroku
    </div>
</body>

This is the index.html that will be served by our Node server from Heroku.

package.json configurations

Now, we have to configure our package.json file.

Heroku runs the “start” script on the package.json “scripts” section on every deployment.

This actually starts with the Node app already deployed. With this information, we create our “start” in the “scripts” section of our package.json and point it to run our app.js file:

// package.json
{
    ...,
    "scripts": {
        "start": "node app.js"
        ...
    }
}

We make the “start” section run the app.js file.

We are now good to go.

Github

Create a Github account if you don’t have one already. If you have one, make sure you are logged in.

Create a repository node-app or any other name if you already have a node-app repository.

From your command line, run the following commands:

git init

git add .

git commit -m "Initial commit"

git remote add origin https:github.com/YOUR_USERNAME/node-app.git

git push origin master

After successfully running these commands, you will see the local node-app project on your Github repository.

Heroku

Now, go to Heroku and make sure you are logged in (if you don’t have an account, go ahead and create one).

Create a new app from your Heroku Dashboard. After successfully creating one, make sure you click to open the app. Then, move to the Deploy tab. Scroll down to the Deployment method section and you will see a Connect to Github option.

You can search for our repository, node-app. If this is your first time with Github integration, you will have to authenticate with Github.

To configure GitHub integration, you have to authenticate with GitHub. You only have to do this once per Heroku account.

Make sure the node-app repository is selected. Now, click on connect; this will link your Heroku app to the node-app Github repo.

After you link your Heroku app to a GitHub repository, you can selectively deploy from branches or configure auto-deploys.

We now need the URL of our deployed Heroku app. To get that URL, go to the Settings tab and then Domains and certificates, and you will see the URL of the Heroku app.

Copy it and enjoy.

Conclusion

We have seen how to create a Node/Express-backed server, push it to Github, and how to deploy the Node app on Github from Heroku.

RELATED TAGS

node.js
communitycreator
RELATED COURSES

View all Courses

Keep Exploring