Deploying a Full-Stack App with Heroku

Note: This article is currently teaching deployment using Heroku which no longer offers a free tier plan.

Deploying a Full-Stack App

A full-stack app is an app that includes a front-end that allows visitors to see and interact with the page, as well as a back-end, where code is executed to handle those interactions, and store long-term data. In the Deploying a Back-End with Heroku article you learned how to deploy a simple back-end app using Heroku’s Graphic User Interface (GUI) and GitHub. The app made a request to The Bored API and sent the results to the browser. All of this was done through a Node.js back-end, and did not include any front-end code.

In this article, you’ll deploy another back-end app, similar in function to the previous app, but this time it will include a front-end to make it a true full-stack app. And to top it off, you’ll provision a database to store the calls returned from the The Bored API into your own Heroku Postgres database!

The stack you’ll be working with consists of:

• PostgreSQL - for the database.
• Express.js - to simplify requests and routing.
• React.js - as the front-end.
• Node.js - for the web server.

This is commonly referred to as the PERN stack.

You will use Heroku’s GUI to create a new app, and deploy it from a forked GitHub repo, just like in the Deploying a Back-End with Heroku article. You’ll then see how easy it is to add the Heroku Postgres add on to your app, and create a table using the Heroku Command Line Interface (CLI).

Prerequisites

Before starting, you’ll need to have:

• a Heroku account.
• a GitHub account.
• The Heroku CLI installed.
• and PostgreSQL, installed on your computer.

Set Up

To get started, login to your Heroku, and GitHub accounts in the browser.

Next, check your Heroku CLI installation by opening your terminal and running the following command:

heroku --version

If an error is returned, double check your Heroku CLI installation and follow any necessary troubleshooting steps. If the command returns a version, continue by running the heroku login command:

heroku login

The heroku login command will initiate a login process by prompting you to press any key to open a new page in your web browser. After verifying your credentials in the browser, the CLI will log you in automatically. Next, use the command:

Finally, check that PostgreSQL is installed by typing:

which psql

This command will return the local directory containing the PostgreSQL installation. If you get an error, try following Heroku’s installation steps again, or take a look at the official PostgreSQL docs to troubleshoot further.

Having these prerequisites in place beforehand will help to prevent any diversions later on.

Fork the Repo

The app you’ll be deploying to Heroku can be found at this deploying-fullstack-with-heroku-sample GitHub repo. You’re free to use your own project, but be sure to modify the steps as needed. Fork the repository to your own GitHub account by clicking the Fork button in the source repository.

You’ll now have a copy of the app in your own GitHub account. Take a look at the provided code. There are a few files to explore further:

• Procfile - A text file that is used by Heroku to tell it what commands to run on startup. Your Procfile contains a process type: web that lets Heroku know that this app will receive web traffic, and a command to start the process: node app.js which starts the server (just like if you were to type node app.js to start a server on your local host).

• app.js - The app’s entry point. This file defines the port for your web server, and contains all of the logic for the app. Express is used to route requests, send and receive data from the front front-end, and render a page. It also uses node-postgres to interface with the PostgreSQL database you will be setting up later on. Specifically the pool constant, where the connection to the Heroku Postgres database is made. Be sure to read over the comments in this file to gain a better understanding of what all of the code does.

• /client - Which contains the React front-end to create the views of this full-stack application.

• /build - Contains the production ready code that Node is communicating with to establish a back-end to front-end connection.

Here is a preview of the app’s front-end.

When the page loads, a new activity is fetched from The Bored API, and a suggestion is made to do that activity today. The user can then press the Sounds Fun button to add it to the “Today’s Activities” list, as well as store it in the Postgres database, or they can press the No Thanks button to fetch another activity.

Create a New App in Heroku

The process for creating and deploying a full-stack app in Heroku is identical to the steps used to deploy a back-end app.

1 - Create New App

2 - Choose GitHub as the deployment method, and select the app you forked earlier.

3 - This final step would be where the deployment would normally happen, but since the code in the forked app connects to a database (which hasn’t been created yet), the app will crash. So skip this step for now, and we’ll come back to it when there is a database ready to accept the code.

Add a Heroku Postgres Database

Creating a database to store the activities can be done in Heroku’s GUI, as well as the Heroku CLI.

In the GUI, navigate to the Resources tab of your new app’s dashboard. Under Add-ons type “postgres”, and click Heroku Postgres from the dropdown.

Then click Submit Order Form to create a free Hobby Dev plan.

If using the CLI, type:

heroku addons:create heroku-postgresql:hobby-dev

This command uses the addons:create argument to create an add-on. Then, the heroku-postgresql:hobby-dev argument specifies the add-on and plan.

Once a database has been created, click Heroku Postgres to view more details about it.

The Overview tab contains some general information about the database. Take note of the database name at the top because this is what you will be connecting to when making your first table. As you can see in the “Utilization” section, the database is currently empty, and contains no tables yet.

Create a Table

Creating a table in the database requires using the Heroku CLI and a local installation of PostgreSQL, which should be installed at this point.

Before creating the table, you first need to connect to the remote database in the Heroku app. In your terminal type:

heroku pg:psql -a <app name>

The pg:psql argument establishes a psql session with your remote database, and the -a flag, followed by the name of your app, tells the Heroku CLI which app to run the command against. In other words, this command allows you to use your local PostgreSQL client to talk to the Heroku Postgres database through the Heroku CLI.

In the image above, notice how the --> Connecting to… line matches the name of the database from earlier in the GUI. You’re now able to run the commands to create a table in that database.

To create the table, run the command:

CREATE TABLE my_activities (activity text);

Breaking down this command, you’ll see that it defines a new table named “my_activities”, with a single column: “activity”, that has a data type of “text”.

The command will return CREATE TABLE confirming the table was created. If your command doesn’t return CREATE TABLE, double check that you’re including the semicolon ; to terminate the command. You can also check that the table was created by running the \dt command to see all tables:

\dt

You should have one table named “my_activities”.

Deploy the App

Now that you have the new Heroku app connected to your forked GitHub repository, and a Heroku Postgres database provisioned with a “my_activities” table, you’re ready to deploy! In the Heroku GUI, within your app’s dashboard, navigate to the Deploy tab and click the Deploy Branch button.

After the app finishes building, click the View button to see your new full-stack app up-and-running.

Add some activities to the list, then refresh the page to see the data stick using the Heroku Postgres database!

Wrap Up

Wow, nice work! Congratulations on deploying a full-stack app with Heroku. You forked an app with a front-end using React, and a back-end with code in place to connect to a database. Then got a refresher on how to deploy an app with Heroku, and a crash course in provisioning a Heroku Postgres database.

Explore the new app further by cloning it, and running it locally. Try changing some of the code to break it, and then fix it again. Once you have a good understanding of the code, try creating your own app, with a database, all from the Heroku CLI!