Table Of Contents

• Introduction
• About Heroku
• Creating An Express.js Application
• Installing Git & Heroku CLI
• Conclusion

Introduction

Hello everyone,
Welcome to my first blog. I will try to include most of the information for hosting on Heroku. Let's get into the topic!!
There is a lot of confusion for developers after making a web application on which platform the web application should be hosted. There are lot many hosting services. Some are paid and some even offer free service based upon the usage. Here, in this blog we will cover about Heroku. I thought it would be the best to host ExpressJS/Full-Stack applications.
Note: If you have created an express app already, you can jump into this section

About Heroku

Heroku is a hosting platform for web applications. It supports Node.js, Ruby, Java, PHP, Python, Go, Scala, Clojure.
There are so many plans you can opt for(including a free plan with limited services)
You can find more about Heroku at heroku.com

Creating An Express.js Application

In order to create Express/Node applications, you need to have Node.js installed on your machine. So, let's try to install NodeJS. Download it from nodejs.org/en
Once you download Node, open the installer and install it with default settings. Once you installed it, open your terminal or command prompt and type

node -v

It should display the version number and it means Node has been successfully installed on your machine.

NPM Check
NPM stands for Node Package Manager. It will come bundled in Node. You need not install it explicitly. Using NPM you can download and install many packages, dependencies using your CLI.
To check your NPM version, open your CLI and type

npm -v

Setting Up Our Express Project
Create a folder and open your CLI from that folder and type

npm init

npm install express

After executing these two commands, you will see a package.json, package-lock.json and node-modules folder. We will focus only on package.json file.

Before we proceed further, create an index.js file and write the following basic express code.

const express = require('express');
const app = express();

app.get('/', (req, res) =>{
   res.send('Home Page')
})

app.get('/api', (req, res) =>{
    res.send('API Page')
})

app.get('/users', (req, res) =>{
    res.send('Users Page')
})


let PORT = process.env.PORT || 3000;
app.listen(PORT, ()=>{
    console.log(`Server Up And Running At Port ${PORT}`);
});

After that, Open your package.json file and replace or change it with below mentioned code.

{
  "name": "your_directory_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Then, open your CLI from the root directory of the project and type npm start and then open your browser and type localhost:3000 in the address bar for testing the application.

Home Page

API Page

Users Page

If you get same as mentioned in above screenshots, you're good to move further.

Installing Git & Heroku CLI

Awesome, you have created your Express project. It's now time for installing Git.
What is Git ?
Git is a software used for version controlling and track and maintain the changes done in a project.
Setting it up
Download Git from git-scm.com/downloads
Download and Install it and for checking whether it is installed properly or not, Open your CLI and type git --version. It should display the current version. If yes?, Yay! it's working on your machine

After setting up the Git on your machine, create an account on Heroku from signup.heroku.com and download Heroku CLI from devcenter.heroku.com/articles/heroku-cli#do.. and check whether if it is installed on your machine using CLI.

After setting up your account and Heroku CLI on your machine, execute these commands.

heroku login -i

After logging in from the CLI. Type another command

heroku create <yourAppName>

eg: heroku create testblog, heroku create lcofirstblog. This will create a Heroku project.
Now, you need to Initialize your project directory with Git, create a local remote branch, commit the changes and push the changes from local branch to Heroku master branch.

Go to your project root directory and create .gitignore file and write node-modules in it and save it. Now, open your CLI and type

git init

heroku git:remote -a <yourAppName>

git add .

git commit -m 'First Git Commit For Hosting'

git status

After executing git status you should get

On branch master nothing to commit, working tree clean

Finally, execute this command for pushing our local repository to heroku master branch.

git push heroku master

At last, you can find your app at 'yourAppName.herokuapp.com'

Well done!! You have just hosted your application on Heroku.

Conclusion

These are the steps you need to follow for hosting your application on Heroku. You can monitor the build logs, Activity, logs and many more on Heroku client. Try giving it a look.

Thanks!!
Hope This Blog Helped You.