Hosting Node App on Heroku Steps

Hosting Node App on Heroku Steps

This is the best steps to Hosting Node App on Heroku Steps for the complete beginner.

I recall as a newbie always wishing to host my site. The notion of creating a website and having a URL that I could access from anywhere captured my imagination. It will be free, so let’s see how to do it.
Prerequisites
a fundamental comprehension of Node.js and GitHub

Hosting Node App on Heroku Steps

Git is now on the system.
free Heroku account
what we are constructing
In this post, we will deploy a Node.js site on Heroku with a few simple steps. Although Heroku docs are well-done, for me as a beginner, they are difficult to use, as they go into overly specific details, which puts me off. Only steps that are necessary and simple to follow are included in this blog post to host a Node.js application.
Despite the simplicity of the app we’re hosting, you can also expand it to support Node applications that have multiple routers, controllers, and databases.
When creating a new application, consider using MongoDB Atlas.
Setup
nstalled?

Hosting Node App on Heroku Steps

node -v
  • Create a project directory and cd into it.
mkdir nodejs-heroku
cd nodejs-heroku
  • Initialise project. This command will create a package.json inside project root directory.
npm init -y
  • Install required npm packages
npm i express
  • Create index.js file inside project directory. This is how your folder should look like.
Hosting Node App on Heroku Steps
  • Add the following code to index.js. Basically this is code will run a server which will display “Hello World” when we visit it in the browser.

https://javascript.plainenglish.io/media/252c58025b24eb013a73a108205149a2

  • cd to project directory and run the server by entering following in cmd
node index.js
Hosting Node App on Heroku Steps
Hosting Node App on Heroku Steps
  • Now think about it. You manually executed the “node index.js” command, but when we will host it on Heroku, how will Heroku know what script needs to be executed. Let’s see how to do it.

Open “package.json” file and you will see “scripts” key.

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

Replace it with:

"scripts": {
"start": "node index.js"
},

To understand why we did this, read the following and you will see that to tell Heroku what to execute we need to add either make Procfile or add command we want to execute into “start” tag in “package.json”.

Hosting Node App on Heroku Steps
  • One more thing we need to do is tell Heroku which version of Node.js we want to use.
Hosting Node App on Heroku Steps
  • Add the above “engines” tag and after completing it this is how “package.json” should look like.

https://javascript.plainenglish.io/media/66d90a05ef1f1815f68e333fde4cb180

Initializing git

Here, I am not explaining each command because I am assuming you know the basics of git. Even if you don’t know, just execute them for now.

git init
git add .
git commit -m "first commit"

Github

  • Visit https://github.com/ and login
  • Create a new repository. You will be shown a page like this.
Hosting Node App on Heroku Steps
  • Copy the line I highlighted in the above image. It will be different for you based on username and project name. For me, it was:
git remote add origin git@github.com:RugvedB/Nodejs-Heroku-Deploy-Demo.git
  • Paste it in cmd and press enter.
    Doing this will tell git that whenever we perform any action like pushing, pulling the code we want it with respect to this repository which we just mentioned.
  • Now push the code to GitHub.
git push origin master
Hosting Node App on Heroku Steps
  • After successfully executing the above command, refresh the GitHub page and you will see that your code has been pushed to GitHub.

We did this so that we can later tell Heroku to refer to this GitHub repository for code.

Hosting Node App on Heroku Steps
https://github.com/RugvedB/Nodejs-Heroku-Deploy-Demo

Heroku

  • Login to Heroku by executing the following in cmd.
    If you don’t have Heroku CLI installed, visit here.
heroku login
  • After login is successful, go to https://dashboard.heroku.com/apps you will list of apps created on this account.
  • Click on “New” -> “Create new app” button at top right.
  • Give a name to your app and click “Create app”. Note that this needs to be a unique name.
Hosting Node App on Heroku Steps
  • You will be redirected to a new page where find the “Deployment method” section and click on Github.
  • Enter the repository name -> click search -> Select correct repository -> Click connect.
Hosting Node App on Heroku Steps
  • Click on “Enable automatic deploys” button which would mean that whenever you add any code to your GitHub repository, Heroku will update your hosted app too.
  • And finally, click on “Deploy branch ”. Wait for a couple of minutes and let the deploying process finish.
  • After successfully deploying the website you will get a success message as shown.
Hosting Node App on Heroku Steps
  • Click on “View ” to visit the website hosted by you.
Hosting Node App on Heroku Steps

Even though it’s a very simple app, the above steps can be followed to build apps with complex structures too.

Yay! That’s all is needed to host a Node.js app.

Setup config vars

Everything is done. You don’t need to follow this unless required.

Here is the answer to one of the most frequently asked questions.

If you have added some secrets like email, password, MongoDB Atlas URI, etc, then in the code, you shouldn’t directly paste it. Instead, put the following in the code and set its value in the Heroku “config vars” section here.

Eg:

// In the code
process.env.EMAIL_PASSWORD
Hosting Node App on Heroku Steps
Setting config vars on settings page

source

How to Use Your Phone as a Microphone on PC: 6 Easy Steps

Similar Posts

Leave a Reply

Your email address will not be published.