Skip to main content

Command Palette

Search for a command to run...

Heroku Deployment

Step By Step Deployment To Heroku

Published
β€’3 min read
Heroku Deployment
A

Backend Developer

Heroku is a cloud platform as a service that makes hosting of servers easy and beginner friendly, supporting several programming languages like Ruby, Java, Node.js, Scala, Clojure, Python, PHP, and Go

And however it is a very easy and you'll be learning to host on heroku step by step in this guide. Lets Get To It!!! πŸ™‚.

SETTING UP HEROKU

To host on heroku, first you create an account and verify email, like every other basic software service

Now we need to login to heroku from our command line -It is important you have your heroku CLI Installed- click to find the installation that best suits your OS

run $ heroku --version to check if it was properly installed, if it does throws error, reference the paragraph above πŸ‘†

Next we run a command $ heroku login from the root of our project folder we should see an output like this

HerokuLO.png following the prompt we should be directed to a login web page

Screenshot from 2022-06-10 06-20-31.png so we click login and we can close the tab and check our terminal for something like this

HerokuLoginSucces.png If we see this output the we are logged in successfully

HOSTING YOUR WEB APP ON HEROKU

Still from our project root folder we run the command $ heroku create from our terminal it gives you a url like mine below "https://still-refuge-70109.herokuapp.com/"

Heroku Create.png which on opening your heroku dashbord it should be displayed there e.g mine will be displayed as "still-refuge-70109"

πŸ“Note: To give your app a custom name you run your $ heroku create as $ heroku create my web app name i.e

$ heroku create todo-app

in which heroku will append ".herokuapp.com", and the url will show up as "todo-app.herokuapp.com", and also shows up as "todo-app"on your heroku dashboard.

However on clicking the link i.e "https://still-refuge-70109.herokuapp.com/" as shown above, you are directed to a heroku welcome page like this πŸ‘‡

heroku-urlpage.png letting you know heroku is expecting some code for the app.

Run $ git remote -v in your terminal too check your heroku remote server you should see something like this

HerokuRemote.png πŸ“Note: make sure git is initialized, make sure to also commit your code, make sure you ignore the necessary files e.g node_module, .env files and the likes and also set your ports and your scripts and configure your environment variables, and generally make your project production ready before moving to the next stage to avoid errors.

After final commit then run in your terminal

$ git push heroku master

to push to your heroku remote

If your build succeeds then we can revisit our link to check our deployed web app

However heroku might show an application error page

Herokuapperror.png

We should however check little configs like

  • whitelisting your database IP address to be accessed from anywhere - if you're using one
  • set your env varibles on the heroku site by going to your dashboard > project link > settings > Revel config var and add your environment variables manually

envHeroku.png

or you can add it through your terminal buy running a simple command like

$ heroku config:set API_SECRET=qwerty12345

and you should get an output like this

Screenshot from 2022-06-10 07-41-04.png

and with all set run

$ heroku restart

and all should be up and running

i hope this was helpful πŸ™‚

bye for now πŸ‘‹πŸ‘‹πŸ‘‹