Table Of Contents
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.
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/enOnce 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 You Like Reading My First Blog.