How to deploy and host your Web Applications on Heroku

Heroku is a cloud platform that lets you build, deliver, monitor and scale applications on the go. Heroku helps the developers to deploy and host their web applications on their cloud platform without having to know much about how their cloud infrastructure actually works. Heroku supports multiple programming environments such as Nodejs, Ruby, Java, PHP, Python, Go, Scala and Clojure.

This blog post will discuss about how to deploy your Web Application on Heroku using both Heroku CLI and their Web Interface in simple steps. Once you follow these steps, your project will be live under the heroku's free subdomain <your-preferred-name>.herokuapp.com. For this blog post, I've used a sample project called "Incrementer Demo" and the project code is available on github.

Using Heroku Command Line Interface (CLI)

Step 1 : Download and Install Heroku CLI from Heroku Devcenter
• SignUp/Register a free Heroku account
• Go to https://devcenter.heroku.com, download and Install Heroku CLI that supports your Operating System
• If you don't find the platform you are running on, go for the Standalone installation guide
• If you have node.js and npm already installed in your pc, you can download Heroku CLI using this simple command below

C:\> npm install -g heroku-cli

• Installing Heroku CLI will also install Git on your PC which helps you clone your projects from github to your local computer

• After completing the above steps successfully, you will find Git installed on your pc (which includes Git GUI, Git Bash and Git CMD)
• To verify if your installation process was successful, just type the following command in your Git Bash

$ heroku --version 

which will output the latest Heroku CLI version Id, your platform name along with architecture and your node.js version id

Step 2 : Login and Add your Application to Heroku

• Open Git Bash, enter the following command where you will be prompted to enter your Heroku login id and password

$ heroku login

• If you have issues logging into your heroku using git bash (! Login is currently incompatible with git bash/cygwin) you can open your local command prompt (like CMD in windows systems) and run the heroku login command in there and come back to Git Bash.

• Now that you are logged in to your Heroku account, use Git to clone your project source code from github to your local machine like shown below

$ git clone <repository_link>

which in my case, looks like this $ git clone https://github.com/thetechiexyz/Incrementer. You can also verify checking your cloned project folder created in C:/>Users/user_name/ directory.

Step 3 : Deploy your Application
• Initialise your local git repository

$ cd <project_location>

$ git init

• Create a new remote project repository under Heroku

$ heroku create <project_name>

• Setting git remote heroku to associate a Git repository with an existing application

$ heroku git : remote -a <project_name>

• Finally, push your local project folder to heroku master.

$ git push heroku master

Your project is now deployed successfully and running live on <project_name>.herokuapp.com (which in my case is, incrementer1.herokuapp.com)

If you are facing any troubles deploying your project, please feel free to comment below and we will try to help you out.

Using Heroku Web Interface

Step 1 : Sign up for a free Heroku account

Step 2 : Login to your account, go to Heroku dashboard and select "Create New App" option

Step 3 : Enter App Name, Select Runtime location and Click on "Create App"

Step 4 : Select either Heroku CLI or Github or Dropbox and send your project to Heroku

Since we are already done deploying our project using Heroku CLI, let us select Github as our deployment option

Select your github repository, search for the project you want to deploy and click on "Connect".

You will have to authorise your github account with heroku only while connecting for the first time.  

Step 5 : Deploy the Project

• Enable "Wait for CI to pass before deploy" if you have configured your GitHub repo to use automated Continuous Integration (like Jenkins, CircleCI, Travis CI etc.,)
• Select "Enable Automatic Deploys" button so, Heroku builds and deploys all pushes to that branch.
• Finally, select "Deploy Branch" to manually deploy your project.

Done. Your project is deployed successfully and is live online. Although the Heroku web version of project deployment is simpler, I'd suggest you to use the Heroku Command Line Interface if you like to do things the Programmer's way.

Frequently Asked Questions 

Q1. How to rename an app using Heroku CLI?
Ans. You can rename your app using the "rename" option but, make sure your current directory is set to locate your local project repository.

$ heroku apps:rename newname