DEV Community

loading...

Pushing to GitHub and Hosting on Heroku With Postgres for Free

ebereplenty profile image NJOKU SAMSON EBERE ・8 min read

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.

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
Enter fullscreen mode Exit fullscreen mode

Alt Text

  • Login to Heroku CLI. This will open a browser window, which you can use to log in.
heroku login
Enter fullscreen mode Exit fullscreen mode

Alt Text

  • Create an app (It can be any name. I am using node-postgres-cloudinary)
heroku create node-postgres-cloudinary
Enter fullscreen mode Exit fullscreen mode

Alt Text

Alt Text

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)

Alt Text

  • Click on the Resources tab/menu

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

  • Click on the settings

Alt Text

  • Click on View Credentials

Alt Text

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

Alt Text

Back to the terminal

  • Let's confirm if the Heroku Postgres was added successfully. Enter the following in the terminal
heroku addons
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

Alt Text

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

Alt Text

  • 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
Enter fullscreen mode Exit fullscreen mode

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");
});

Enter fullscreen mode Exit fullscreen mode

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!');
});

Enter fullscreen mode Exit fullscreen mode
  • .env file

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

Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

Alt Text

  • 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>
Enter fullscreen mode Exit fullscreen mode

This is what mine looks like:

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

Alt Text

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 .
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode
  • Push the committed files
$ git push origin -u master
Enter fullscreen mode Exit fullscreen mode

Alt Text

Finally deploying our App

  • Go to you app's dashboard

Alt Text

  • Select the GitHub Deployment method

Alt Text

  • Search and select a repo
  • Click on connect

Alt Text

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

Alt Text

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

  • Click on the Deploy button in the manual deploy

Alt Text

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)

Alt Text

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

Tired

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
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

Alt Text

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

Congratulations on reaching this milestone!!!

Congratulations

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.

Discussion (0)

Forem Open with the Forem app