Pushing to GitHub and Hosting on Heroku With Postgres for Free

I have decided to make this tutorial because even though there are a number of tutorials out there on hosting on Heroku, I couldn't find many that are so detailed like this one you are about to read.

After creating applications, it is our desire to share it and let people use it because our efforts might be a waste if no one uses it. To make this possible, Github and Heroku provides us with certain services to showcase our work/project for free.

Jump to:
Uploading to GitHub
Deploying to Heroku
Adding Heroku Postgres
Prepare our database connection to match that of Heroku
Export Database and tables
Let GitHub Know that we made some recent changes
Finally deploying our App
Fixing Heroku Application Error

In the course of this tutorial, I will be walking you through uploading our node-posgres-cloudinary project from the last article to Github and deploying it to Heroku.

If you intend to use the project that I am using for this tutorial, please do the following:

1. Clone the project here.
2. Delete the .git file that may have come with it. Another .git file will be created for you in the process of you pushing to GitHub.

So without further ado, let's get our hands dirty.

Uploading to GitHub

Uploading or pushing to GitHub is as easy as taking your favorite meal. Please checkout any of the following links to get directed on just how to push your project from you local machine to GitHub

1. Adding an existing project to GitHub using the command line

2. Adding an existing project to GitHub using the command line

3. You can jump to Let GitHub Know that we made some recent changes

Deploying to Heroku

I am going to make this process so easy that you will just smile throughout.

As a prerequisite, please you may need to have taken the last tutorial. This will have helped you setup PostgreSQL and cloudinary.

However, if you are just interested in seeing how a nodejs project is deployed on Heroku, let's proceed.

• Let's begin by creating an account on Heroku

If you have created an account, you may have been prompted to create an app (i.e. a folder where your app will be housed). You can choose to do that and continue here

Since we are working with PostgreSQL and cloudinary, let's use our terminal.

• Please open your project in a terminal if you have not done so already. I will be using the VS Code terminal.

• Install Heroku CLI
  

npm install heroku

• Login to Heroku CLI. This will open a browser window, which you can use to log in.

heroku login

• Create an app (It can be any name. I am using node-postgres-cloudinary)

heroku create node-postgres-cloudinary

• Go to your Heroku dashboard and you will find the newly created app.

Waalaah!!!

That is how mine looks in the image above. I have some apps there already but you can see the one I just created.

Let's now add PostgreSQL database to the app.

Adding Heroku Postgres

• Click on the app you just created. (It will take you to the app's dashboard)

• Click on the Resources tab/menu

• In the Add-ons Section, search and select Heroku Postgres

• Make sure you select the Hobby Dev - Free plan in the pop-up window that follows

• Click on the provision button to add it to the app like so:

• Click on the Heroku Postgres to take you to the Heroku Postgres dashboard.

• Click on the settings

• Click on View Credentials

• In the Credentials, we are interested in the Heroku CLI. We will be using it in a bit.

Back to the terminal

• Let's confirm if the Heroku Postgres was added successfully. Enter the following in the terminal

heroku addons

Yeeeeaaaah!!! It was added successfully.

Before we proceed, please ensure that your PostgreSQL path is set correctly if you are on windows. Follow this link to learn how to set a path. The path should be like this: C:\Program Files\PostgreSQL\<VERSION>\bin. The version will depend on the one installed in you machine. Mine is: C:\Program Files\PostgreSQL\12\bin since I am using the version 12.

The following image might be helpful

You may have to navigate to the folder where PostgreSQL is installed on your machine to find out you own path

• Login into the Heroku Postgres using the Heroku CLI from our Heroku Postgres credentials. This is mine. Yours will be different

heroku pg:psql postgresql-slippery-19135 --app node-postgres-cloudinary

In case you got an error, it is most likely, that your path is not set properly

Prepare our database connection to match that of Heroku

At the moment, my database looks like this:

const pg = require("pg");

const config = {
  user: "tutorial",
  database: "tutorial",
  password: "tutorial",
  port: 5432,
  max: 10, // max number of clients in the pool
  idleTimeoutMillis: 30000,
};

const pool = new pg.Pool(config);

pool.on("connect", () => {
  console.log("connected to the Database");
});

If you try connecting Heroku to this, you are going to get an error. This is because Heroku has a connection string setup already. So we have to setup our connection such that Heroku can easily connect. I am going to refactor my database connection file (dbConnect.js) and .env file to make this happen.

• dbConnect.js

const pg = require('pg');
require('dotenv').config();

// set production variable. This will be called when deployed to a live host
const isProduction = process.env.NODE_ENV === 'production';

// configuration details
const connectionString = `postgresql://${process.env.DB_USER}:${process.env.DB_PASSWORD}@${process.env.DB_HOST}:${process.env.DB_PORT}/${process.env.DB_DATABASE}`;

// if project has been deployed, connect with the host's DATABASE_URL
// else connect with the local DATABASE_URL
const pool = new pg.Pool({
  connectionString: isProduction ? process.env.DATABASE_URL : connectionString,
  ssl: isProduction,
});

// display message on success message if successful
pool.on('connect', () => {
  console.log('Teamwork Database connected successfully!');
});

• .env file

DB_USER="tutorial"
DB_PASSWORD="tutorial"
DB_HOST="localhost"
DB_PORT="5432"
DB_DATABASE="tutorial"

With the setup of the dbconnect and .env file, we are ready to export our database and tables from our local machine to heroku postgres.

Export Database and tables

Go to your pgAdmin and locate the database for this tutorial. Mine is tutorial

• Right-Click on it and select Backup. (This will bring up a new window)

• Enter a name for the SQL file like I did
• Select plain format
• Click Backup. (This will save the file to your documents folder)
• Locate the file and move it into the project directory. It can be anywhere in the directory but I choose to move mine into the services directory because it holds my database related files

Back in terminal, navigate to the folder containing the SQL file and run the following code to add the tables we just exported to the heroku postgres database

cat <your-SQL-file> | <heroku-CLI-from-the-heroku-posgres-credentials>

This is what mine looks like:

cat tutorial.sql | heroku pg:psql postgresql-slippery-19135 --app node-postgres-cloudinary

Notice that I changed directory to services (cd services)? That is where my sql file is located

WOW!!! We have just successfully exported our database and tables to heroku.

It is almost over

Let GitHub Know that we made some recent changes

• Add the files we have made changes to

$ git add .

The period (.) adds all files

• Commit your latest changes

$ git commit -m "refactored the dbConnect and .env file to fit in to heroku; Added the database SQL file"

• Push the committed files

$ git push origin -u master

Finally deploying our App

• Go to you app's dashboard

• Select the GitHub Deployment method

• Search and select a repo
• Click on connect

• Select the branch you want to deploy (In my own case, it is the master branch)

• Enable automatic deployment by clicking Enable automatic deployment button as in the image above.

• Click on the Deploy button in the manual deploy

We will not have to do all these for subsequent deployment

• Now you have a button telling you to "view site" after build is completed. Click it. (This will open your app in a new tab)

OHHH NOOOO!!!! A BUG? APPLICATION ERROR?

Well, it just a small issue. Something you should never forget to do while making deployments. Most hosting service will require it

Fixing Heroku Application Error

Get back to the root directory of your project

• Create a file and name it Procfile (It has no extension)
• In the file, enter the following

web: node index.js

This directs Heroku to the server file (index.js) which is the entry point of the application. If your server is in a different file, please modify as required

• Save the file
• Push the new changes to GitHub
• Wait 2 to 5 minutes for Heroku to automatically detect changes in your github repo and effect the changes on the app.
• You can now refresh that error page and see your hard work paying off

You can also test the retrieve image route and see it working.

Congratulations on reaching this milestone!!!

Other routes (persist-image, update-image and delete-image) will not be working because we have not provisioned or added cloudinary add-on. It is as simple as the PostgreSQL one we just did.

We would look into it in a future tutorial.

We will also be documenting out APIs with postman soon.

Conclusion

Starting from the onset till the end, it has been a juicy tutorial as we were tapping from the free gifts of Github and Heroku.

It is important that your projects are showcase-able especially to employers and clients. That is another reason I have made this tutorial.

In a future tutorial, I will be diving into some other fun stuff. See you soon!

Meanwhile, drop your comments and/or questions in the comment section.