Deploy NodeJS app on Heroku using Github

Table of Content

• Introduction
• Getting Started
• Creating a simple App
• Testing our app
• Pushing to Github
• Authorizing and connecting Heroku with Github
• Deploying our App
• Conclusion

Introduction

• What is Heroku?

Heroku is a container-based cloud Platform as a Service (PaaS). Developers use Heroku to deploy, manage, and scale modern apps. Heroku is elegant, flexible, and easy to use, offering developers the simplest path to getting apps to market.

Heroku is fully managed, giving developers the freedom to focus on their core product without the distraction of maintaining servers, hardware, or infrastructure. The Heroku experience provides services, tools, workflows, and polyglot support—all designed to enhance developer productivity.

Getting Started

One of Heroku's core features is deploying, managing, and scaling apps with your favorite languages [Node, Ruby, Python, Java, PHP, Go, and more]. In this article, I'll show you how to deploy a Node.js app (API) on Heroku through Github. But before we fully dive in, we will need an ExpressJS application running on our machine and one prerequisite to using express is to have Node installed on your machine. We also need

• Github account and
• Heroku account.

Note 🖊️: It is assumed that you have prior knowledge on how to use Git and also understand how Github works. If not see this article for a guide but nonetheless, the usage of git in this article is sufficient.

Creating a Simple Node Application

Now let's create a very simple node app (API) that performs a get request and displays a list of users and then push it to Github. Also, Heroku has made app deployment extremely simple and less complicated.

Note✏️:

• We'll be getting our data from an external API.
• I will also show you where to add environment variables if you need to.
• Completed code can be found here.

Create a new folder in your file manager, I'll call mine github-heroku-api, open it with terminal or your favorite code editor and initialize node (I'll be using yarn for this process). Then create a new file server.js

mkdir github-heroku-api
cd github-heroku-api
yarn init -y
touch server.js
code .

We'll install express and axios yarn add express axios or npm i express axios

Copy and paste the following into your server.js file

const express = require('express')
const axios = require('axios')

const app = express()
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
const PORT = process.env.PORT || 3000

// Fetch dummy user data
app.get('/users', async (req, res) => {
  const url = 'https://jsonplaceholder.typicode.com/users'

  const { data } = await axios.get(url)
  return res.status(200).json(data)
})

app.listen(PORT, () => console.log(`Server started on ${PORT}`))

Testing our app

To test our app we have to modify our package.json by adding a script "scripts": {"start": "node name-of-you-server" }. Mine is server.js so my script will look like this "scripts": { "start": "node server" },. Once that is resolved, you can simply head to your terminal and run the command yarn start, and visit your browser at localhost:PORT/users.

Pushing to Github

Once you verify your app is working fine, then we're ready to push to Github using Git.

We will have to initialize git with git init in our project folder and touch a .gitignore file. Within the .gitignore file add node_modules like this (This helps ignore node_module folder when pushing to Github).

• Create a repo In order to push your code to Github, you'll have to create a git repository on GitHub. Create a repository.

  Give your repo any name of your choice. For the sake of consistency, I'll call mine github-heroku-api.

  Once you have created your repository, you can now push your code using the command below

  git add .
  git commit -m 'Initial Commit'
  git branch -M main
  git remote add origin https://github.com/your-username/your-repository.git
  git push -u origin main
  

  You can check your Github repository for changes.

Authorizing and Connecting Heroku with Github

Once we're done pushing our code to Github, let's now go to Heroku to complete the deployment process.

• Create an Heroku account if you don't have one already.

  

• Once you're done creating an account, simply login. Select New at the top right of your account to create a new app.

  

• Ensure your app name is unique and special 🔹

  

• After creating your app, you'll scroll down to deployment method and select Connect to Github.

  

Deploying our App

• Once we have successfully connected to GitHub, we can search for our repository and connect.

  

• Enable automatic deployment and finally (This allows Heroku to restart automatically when a change is being made to our code.)

  

• Select Deploy branch

  

• Visit your newly deployed app and don't forget to add /users at the end of the URL (You final URL will look like this https://github-heroku-api.herokuapp.com/users )

BONUS: To add environment variables in Heroku, open your app and select Settings and scroll doen to config vars. There you can add you envs. See Image below ;

Conclusion

Now we can easily make changes in our Github repo and it automatically changes in our deployed app.

That's all I have for now. If you got value from this post, kindly Like ❤️, Share📬, and comment your thoughts.".

See you at the top!