Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

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

Posted on • Edited on

     

How to Deploy your Node.JS Website to Heroku

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, usecd yourProject

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

1. Downloading Heroku.

Download Heroku for your Operating system fromHere

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

brew install heroku/brew/heroku
Enter fullscreen modeExit fullscreen mode

2. Login with Heroku

Once you are done installing heroku, you the command

heroku login
Enter fullscreen modeExit 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 modeExit 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 modeExit 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 Procfilewithout Any extensions like.txt or.rtf

The name should only be "Procfile".

In your procfile add this:

web:nodeyourJsFileName.js
Enter fullscreen modeExit fullscreen mode

5. Initialize Git and GitHub

Next, use the command:

git init
Enter fullscreen modeExit fullscreen mode

It will initialize an empty git repository for you

Then, use:

git add .
Enter fullscreen modeExit fullscreen mode

Now, to commit your changes, use:

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

6. Deploying your App

The next step is to deploy your app to heroku.

Next use the command:

heroku create
Enter fullscreen modeExit 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 modeExit 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 modeExit 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:

Article No Longer Available

Article No Longer Available

Article No Longer Available

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

Keep Coding Y'All 👨🏻‍💻

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
bendev12 profile image
Onayngo Benard
Passionate Software Engineer
  • Location
    Kampala Uganda
  • Work
    Software Engineer at THE MASSAPEQUA TUTOR
  • Joined

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?

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

👋 I am Rithik. I am a Front-End Web Developer. I am good at coding languages like HTML, CSS, Python, and many more!
  • Location
    Dystopia
  • Work
    Python, Front-End and Java Developer
  • Joined

More fromRithik Samanthula

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp