How To Host Express.js Application On Heroku
This is a basic installation guide, for more complex guide, just wait and we will post it soon.
Subscribe to our newsletter and never miss any upcoming articles
Play this article
Table Of Contents
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
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
It should display the version number and it means Node has been successfully installed on your machine.
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
Setting Up Our Express Project
Create a folder and open your CLI from that folder and type
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.
After that, Open your package.json file and replace or change it with below mentioned code.
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.
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.
After logging in from the CLI. Type another command
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
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.
Well done!! You have just hosted your application on Heroku.
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.
Hope This Blog Helped You.
Did you find this article valuable?
Support Learn Code Online by becoming a sponsor. Any amount is appreciated!