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:
- Clone the project here.
- 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
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 selectHeroku 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 theHeroku 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 ourHeroku 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.
Top comments (0)