DEV Community

loading...
Cover image for How to Deploy your Node.JS Website to Heroku

How to Deploy your Node.JS Website to Heroku

Rithik Samanthula
👋 I am Rithik. I am a Front-End Web Developer. I am good at coding languages like HTML, CSS, Python, and Many More!
Updated on ・3 min read

Want to deploy your website to Heroku?

Here are the steps to do exactly that:

Requirements:

  • Node.js and npm installed.
  • An existing Node.js app.
  • A free Heroku account.
  • Having a Node.JS version higher than Version 8
  • Having NPM Installed. It is installed with Node so don't worry :)
  • Having Git Installed
  • Be in your current project directory in the CLI. If not, use cd yourProject

Assuming that you have already done that, let's start.

1. Downloading Heroku.

Download Heroku for your Operating system from Here

Alternatively, if you are on a macbook, use the command:

brew install heroku/brew/heroku
Enter fullscreen mode Exit fullscreen mode

2. Login with Heroku

Once you are done installing heroku, you the command

heroku login
Enter fullscreen mode Exit fullscreen mode

to connect your heroku account with the CLI.

3. Changing the Port

Currently, your project is on a local server. But we don't want that to happen. Since we are deploying it to heroku, add this code to your Node.JS app:

app.listen(process.env.PORT, function() {
  console.log("Listening to port 3000");
});
Enter fullscreen mode Exit fullscreen mode

If you want it to listen at Port 3000 as well as heroku's servers, replace the code with this:

app.listen(process.env.PORT || 3000, function() {
  console.log("Listening to port 3000");
});
Enter fullscreen mode Exit fullscreen mode

4. Creating a Procfile

Now, we need to define a Procfile

This is the file that heroku is going to check to see how to launch your app.

Create a Procfile without Any extensions like .txt or .rtf

The name should only be "Procfile".

In your procfile add this:

web: node yourJsFileName.js
Enter fullscreen mode Exit fullscreen mode

5. Initialize Git and GitHub

Next, use the command:

git init
Enter fullscreen mode Exit fullscreen mode

It will initialize an empty git repository for you

Then, use:

git add .
Enter fullscreen mode Exit fullscreen mode

Now, to commit your changes, use:

git commit -m "Your Message"
Enter fullscreen mode Exit fullscreen mode

6. Deploying your App

The next step is to deploy your app to heroku.

Next use the command:

heroku create
Enter fullscreen mode Exit fullscreen mode

To create a new heroku project.

Then, it will give you a link to visit your website. For now, it will only Display: "Heroku | Welcome to your New App!" Don't worry as this is a regular part of the process.

Now, to deploy your code, use the command

git push heroku master
Enter fullscreen mode Exit fullscreen mode

This will push our local version that's been stored using git to heroku.

It will take a couple of minutes to complete the process.

As a success message, it should show you

remote: Verifying deploy...done.
Enter fullscreen mode Exit fullscreen mode

Now, refresh the link that they showed you previously and VOILA your content displays. If this happened, then give yourself a pat on the back.

If you get an error like this:

Alt Text

Not to worry!

This means that the website is still taking some time to upload. Try after some time. Then, you will see your Node.JS website up and LIVE!

Thank You For reading this blog.

If you want to deploy your website on other platforms, check out the different blogs in this series:

If you liked it then do it share it with your friends and remember...

Keep Coding Y'All 👨🏻‍💻

Discussion (1)

Collapse
bendev12 profile image
Onayngo Benard

Thanks for this tip.
However I recently tried deploying a node application written in modern es6 syntax.
It took me a couple of try and error but eventually succeeded.
Still figuring out a none brute force way of doing it. any tips?