Nodejs Application On Heroku

Nodejs Application On Heroku

Deploy your favorite nodejs application on Heroku

ยท

4 min read

Hello Everyone. ๐Ÿ˜Š

Ever wanted to share that your amazing nodejs application to your friends. Tired of 'localhost:1234' ?
Let make your friends access that app in their browser anywhere and on any device.

Hosting your application on a cloud platform called HEROKU makes this possible, get that unique url link and share to others.
Interesting. right?

We will follow two steps:

  1. Preparing our application to deploy

  2. Deployment Proper

As a prerequisite :-

  • You should have nodejs installed in your system. check the link below to do so :
  • And that your favorite nodejs app ready.

As a demo, we will use this simple nodejs application shown below.

NB, even if yours is complex. No worries. Same method works fine.

Shall we ?

const http = require("http");

const plainTextRequestListener = async (req, res) => {
  try {
    res.writeHead(200, {
      "Content-Type": "text/plain",
    });
    await res.end("Hello world!!!\n We want to host this amazing app to heroku");
  } catch (error) {
    res.end("An Error occur ERROR!!!");
    console.log(`An error occur ${error}`);
  }
};

const PORT = process.env.PORT || 4000;
const server = http.createServer(plainTextRequestListener);

server.listen(PORT, () => {
  console.log(`server is currently running on PORT ${PORT}`);
});

File Structure Below:

structure.png

PREPARING THE APPLICATION

Code and File Structure above

  • Our app.js: contains the script our server is running on. This file must be on the root directory, and from it code its contained as shown above, you see that the PORT is process.env.PORT || 4000.

This environment variable is necessary because, on a normal, the cloud hosting platform, (heroku as in our case) uses different port to host your application which we might not necessarily be aware of, so it's best we don't explicitly set it to '4000' rather we use process.environment.PORT || 4000 (i.e whatever, Heroku decides to use or 4000 when testing locally).

  • Then the package.json file also at the root folder. This is like a container of all your dependencies, well we didn't use any, but it's needed to deploy on HEROKU (Use 'npm init -y' on your terminal after navigating to the project folder to create the basic skeleton) Important additional info there is the start script and engine, to specify your nodejs start base and version respectively (to check your nodejs version, on your terminal type 'node -v' ).

package.json file

  "name": "nodejs-app-on-heroku",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "caesarsage",
  "engines": {
    "node": "14.6.0"
  },
  "license": "ISC"
}
  • procfile :- This basically tells HEROKU, how to run your nodejs app on the clouds (note the file has no extension) and its syntax is
    <process type>:<command>
    
    see code below:-
    web: node app.js
    

These are very important to proceed.
Now our basic preparation of the application is done.
It's time to get to the real deal, yay!.


DEPLOYMENT PROPER

  • To get started , Go to and create an account if you haven't already.
  • click the create new app button.
  • choose a unique name and a region.
  • and click the create button

On the deploy Tab, navigate to deployment methods as shown in the screenshot below.

screencapture-dashboard-heroku-apps-my-fav-nodejs-deploy-heroku-git-2021-04-07-11_03_53.png

You will see Three(3) method. We will be treating just two. (Any options is okay)

Method-1 Using HEROKU cli

On the deployment method, click HEROKU git. Here it's required, you download the HEROKU cli and install it. Use the link below:

Next,

  • Open your terminal and write
 heroku login

This login your local system to the heruko cloud platform. Kindly input your credentials if requested and after logged in, go back to your terminal

  • Initialise a new git repository (Make sure you are in your project folder in the terminal window) using
    git init
    
    Then
    heroku git:remote -a my-fav-nodejs
    
    (You should see this in your HEROKU site)
  • Commit your code to the repository and deploy it to Heroku using the commands below :-.
  git add .
  git commit -am "make it better"
  git push heroku master
  • After the build process, check and see your unique link as shown below

final.png

yeep!!๐Ÿ‘ your app is ready.

our fav-site

site.png

Method-2 Github Method

Let's talk about using GitHub.

  • On the deployment method, click GitHub.

This method requires you to have a GitHub account. Create one with the link below :

  • create a new repository in your GitHub
  • give it a unique name, mine was myfav-nodejs and
  • use the following command to push your code from the terminal to your newly created repository on GitHub.

note that your 'git remote add origin should be your repository origin'.

git init
git remote add origin https://github.com/Caesarsage/myfav-nodejs.git
git add .
git commit -m 'nodejs app'
git push

After pushing, now go back to your heroku site.

  • Connect your github account and the newly repository we just created by searching the repo name. Once found click and deploy.

  • Choose the branch to deploy and bam!!! ๐Ÿ’ฅ . Your application is set.

Hope you had a nice Read? Feel free to Share, like and comment.

You are the best ๐Ÿ’“

ย