Ezekiel Ekunola

Full-Stack Web Application developer with a passion for web technologies.

Deploying Node App to Heroku

Published Aug 09, 2019Last updated Feb 04, 2020

I will be taking us through the process of deploying a Node App to Heroku.

We'll cover two different ways which include:

Deploying using Github
Deploying using Command-Line-Interface (CLI)

Deploying using Github

The first order of business is to push your code to Github. I'll be using this repository to deploy.

Once you've signed up, follow the steps below to create an application on your dashboard

Click the New button at the top right of the page, you should see a drop-down with Create new App
Click on the Create new App
Provide the name you wish to give your app (Your application name must be lowercase)
Finally, click on the Create button to create the new app.

An example is shown below

After creating the application, under the deploy section, connect your Github account to Heroku and deploy the application. See the example below.

Once deployed you can go ahead and click on view app, and that's it, we've successfully deployed using Github.

Note: Heroku looks for a start script in your package.json file and runs the script to start your application. Example of start script command below.

If you want to use another script to start your application, scroll down to the Procfile section below.

Deploying using CLI

Navigate here to download Heroku-CLI for your operating system.

Install Heroku-CLI on your local machine.
Run the command below on your terminal / command-line to login to heroku.

heroku login

Press any key on the terminal as instructed, and you should be navigated to your browser where you'll see a login page, enter your login details, close the browser and return to your terminal. You should be logged in.

If you want to login via the terminal, without being redirected to the browser you can run the command below

heroku login -i

Run the command below to create an application on Heroku,

heroku create node-api-deploy

Note: node-api-deploy in the above command is the name of the application we are creating, if we run Heroku create only, Heroku would generate a random name for our application.

Add git remote to the application we just created on Heroku

heroku git:remote -a node-api-deploy

Add files and commit
Push files

git add .
git commit -m "Deploy"
git push heroku master

Once the push process is finished you can run the command below to view your app on the browser.

heroku open

Environment Variables

In order to add environment variables on Heroku, we'll use the following steps

Go to settings
Click on reveal-config-vars
add environment variables
You can follow the example shown in the image below *

To add environment variables with CLI

heroku config:set GITHUB_USERNAME=easybuoy

to get environment variable

heroku config:get GITHUB_USERNAME

Learn more about environment variables here

Heroku logs

To view the log on Heroku via Heroku's web interface

Click on settings
Click on view logsExample below.

To view the log on Heroku via CLI

After logging in to the Heroku app, run

heroku logs --tail

Procfile

A Procfile is a file that specifies the commands that are executed by the app on startup.

For example, if you want to run a server script instead of a start script when deploying, you can specify a web command

web: npm run server

Learn more about Heroku Procfile here

Conclusion

In this tutorial, we learned how to deploy a node application using Github and the Command-Line-Interface.

If you have any questions or feedback about this article, feel free to reach out.
Thanks for reading.

Node.js Heroku JavaScript

Report

Enjoy this post? Give Ezekiel Ekunola a like if it's helpful.

Ezekiel Ekunola

Full-Stack Web Application developer with a passion for web technologies.

Experienced Web Developer with a demonstrated history of working in the information technology and services industry. Skilled in NODE, REACT, GRAPHQL, MongoDB, PHP, JAVASCRIPT, HTML and Search Engine Optimization (SEO). Strong eng...

Discover and read more posts from Ezekiel Ekunola

get started

4Replies

Oscar Nevarez

5 years ago

I enjoyed this content, keep going.

Justine Robert Igune

5 years ago

Hi Ezekiel, can you please help me to rectify the error “The SPAN elements within the “data-cart-info” DIV do not have the required CSS style”
on my code as below:
CSS:

span {
dispay: inline-block;
vertical-align: middle;
}
span.material-icons{
font-size: 150px;
}

HTML:
<div data-cart-info>
<header class=“mdc-typography–headline4”>
<span class=“material-icons”>shopping_cart</span>
<span data-bill></span>
</header>
</div>
Thanks

Ezekiel Ekunola

5 years ago

Try doing this

.mdc-typography–headline4 span {
dispay: inline-block;
vertical-align: middle;
}
.mdc-typography–headline4 span.material-icons{
font-size: 150px;
}

Justine Robert Igune

5 years ago

Hi Ezekiel,
Thanks very much. I tried that but it still brings the same error.
My complete code is here:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8” />
<meta name=“viewport”
content=“width=device-width, initial-scale=1.0” />
<meta http-equiv=“X-UA-Compatible” content=“ie=edge” />

<title>Mini App</title>

<style>
  body {
  margin: 0;
  padding: 1em;
  background-color: white; /*White Color for the Background*/
}

[data-cart-info],
[data-credit-card]{
  transform: scale(0.78);
  margin-left: -3.4em;
}

[data-cc-info] input:focus,
[data-cc-digits] input:focus {
  outline: none;
}

.mdc-card__primary-action,
.mdc-card__primary-action:hover {
  cursor: auto;
  padding: 20px;
  min-height: inherit;
}

[data-credit-card] [data-card-type] {
  transition: width 1.5s;
  margin-left: calc(100% - 130px);
}

[data-credit-card].is-visa {
  background: linear-gradient(135deg, #622774 0%, #c53364 100%);
}

[data-credit-card].is-mastercard {
  background: linear-gradient(135deg, #65799b 0%, #5e2563 100%);
}

.is-visa [data-card-type],
.is-mastercard [data-card-type] {
  width: auto;
}

input.is-invalid,
.is-invalid input {
  text-decoration: line-through;
}


::placeholder {
  color: #fff;
}
  
/* Add Your CSS From Here */
span{
	dispay:inline-block;
	vertical-align: middle;
}
span.material-icons{
	font-size: 150px;
}
div[data-credit-card]{
	width: 435px;
	min-height: 240px;
	border-radius: 10px;
	background-color: #5d6874;
}
[data-card-type]{
	display: block;
	width: 120px;
	height: 60px;
}
[data-cc-digits]{
	margin-top: 2em;
}
[data-cc-digits]input{
	color: white;
	font-size: 2em;
	line-height: 2em;
	border: none;
	background: none;
	margin-right: 0.5em;
}
[data-cc-info]{
	margin-top:1em;
}
[data-cc-info] input{
	color:white;
	font-size:1.2em;
	border:none;
	background:none;
}
[data-cc-info] input:nth-child(2){
	padding-right: 10px;
	float:right;
}
[data-pay-btn]{
	position:fixed;
	width:90%;
	border:1px solid;
	bottom: 20px;
}
</style>

</head>
<body>

<!-- your HTML goes here -->
<div data-cart-info>
	<header class="mdc-typography--headline4">
		<span class="material-icons">shopping_cart</span>
		<span data-bill></span>
	</header>
</div>
<div data-credit-card class="mdc-card mdc-card--outlined">
	<div class="mdc-card__primary-action">
		<img data-card-type src="https://placehold.it/120x60.png?text=card"/>
		<div data-cc-digits>
			<input type="text" size="4" placeholder="----">
			<input type="text" size="4" placeholder="----">
			<input type="text" size="4" placeholder="----">
			<input type="text" size="4" placeholder="----">
		</div>
		<div data-cc-info>
			<input type="text" size="20" placeholder="Name Surname"/>
			<input type="text" size="6" placeholder="MM/YY"/>
		</div>
	</div>
</div> 
<button class="mdc-button" data-pay-btn>Pay Now</button>

<script>
  
  const supportedCards = {
    visa, mastercard
  };

  const countries = [
    {
      code: "US",
      currency: "USD",
      currencyName: '',
      country: 'United States'
    },
    {
      code: "NG",
      currency: "NGN",
      currencyName: '',
      country: 'Nigeria'
    },
    {
      code: 'KE',
      currency: 'KES',
      currencyName: '',
      country: 'Kenya'
    },
    {
      code: 'UG',
      currency: 'UGX',
      currencyName: '',
      country: 'Uganda'
    },
    {
      code: 'RW',
      currency: 'RWF',
      currencyName: '',
      country: 'Rwanda'
    },
    {
      code: 'TZ',
      currency: 'TZS',
      currencyName: '',
      country: 'Tanzania'
    },
    {
      code: 'ZA',
      currency: 'ZAR',
      currencyName: '',
      country: 'South Africa'
    },
    {
      code: 'CM',
      currency: 'XAF',
      currencyName: '',
      country: 'Cameroon'
    },
    {
      code: 'GH',
      currency: 'GHS',
      currencyName: '',
      country: 'Ghana'
    }
  ];

  const billHype = () => {
    const billDisplay = document.querySelector('.mdc-typography--headline4');
    if (!billDisplay) return;

    billDisplay.addEventListener('click', () => {
      const billSpan = document.querySelector("[data-bill]");
      if (billSpan &&
        appState.bill &&
        appState.billFormatted &&
        appState.billFormatted === billSpan.textContent) {
        window.speechSynthesis.speak(
          new SpeechSynthesisUtterance(appState.billFormatted)
        );
      }
    });
  };
  
  const fetchBill = () => {
    const apiHost = 'https://randomapi.com/api';
	const apiKey = '006b08a801d82d0c9824dcfdfdfa3b3c';
	const apiEndpoint = `${apiHost}/${apiKey}`;
    
  };
  
  const startApp = () => {
  };

  startApp();
</script>

</body>
</html>

Show more replies