1. Heroku Brewster
2. Homebrew Heroku
3. Heroku Brew Bar
4. Heroku Brewery
5. Heroku Brew Wine
6. Heroku Crewlink
7. Heroku Redis

In this tutorial, we will learn how to deploy a React app with a back-end API to Heroku. We will cover deploying an Express.js API to interact with the React front-end.

AdGuard Home is a network-wide software for blocking ads & tracking. After you set it up, it'll cover ALL your home devices, and you don't need any client-side software for that. Jul 26, 2020 Deploying to Heroku. To deploy to Heroku, the project would need to be in a local Git repository. Below are the steps to initialize a new Git repo. Cd my-app-directory/ git init. Then you will need to create an app instance in Heroku. To do so, type the following in your terminal (make sure you are at the root of the project) heroku create app. May 19, 2018 Try to use this command: brew tap heroku/brew && brew install heroku For me it is working now. Use sudo snap install -classic heroku.

I have written two other tutorials where we will deploy the same app to Vercel and Netlify. (Links below)

Let’s get started

Our React app will be very basic in nature, it calls an Express.js API with only one POST route and one GET route.

$ brew install heroku/brew/heroku. Download the appropriate installer for your Windows installation: 64-bit installer. 32-bit installer. Ubuntu 16+ Run the following from your terminal: $ sudo snap install heroku -classic. Snap is available on other Linux OS’s as well.

The GET route returns “Hello from Express” and the POST route is just one field that when posting, it returns “I received your POST request. This is what you sent me: [from input]”.

Below is an extract from the Express.js code showing both routes.

The app also has client side routing withReact Router that navigates to a secondary page and displays a 404 page when we enter a URL that does not exist.

Below you can see the demo app.

Upon loading, React calls the Express.js GET endpoint and displays a message. When submitting the single field form, React calls the Express.js POST endpoint and displays a message.

I decided to include client-side routing because Single Page Applications (SPAs) utilize the history API and when deployed, we need to include some “extra” steps. (Hint: we need to configure redirects)

Let’s say we deploy the app to demoapp.com. When we hit demoapp.com the app loads. Then we click “Another Page (demoapp.com/another-page)” menu link, and the page loads fine; but if we refresh the page we receive an error. That is because the server is looking for a file named “another-page”, but that file does not exist since our entire app (including routing) is being loaded from index.html. So somehow we need to tell the server to redirect all of the requests to index.html.

I will point that exact step in each of the deployments to correct this “issue”.

The React app was bootstrapped with Create React App (CRA), so the directory structure is pretty standard with the source files under the src directory and public assets under the public directory.

Deployment to Heroku

Take a look at the repo under the heroku directory.

Heroku is a little different than Now and Netlify. Here you have to run your React app by configuring your server technology of preference. Heroku supports Node, Ruby, Python, and PHP, among others.

In our case we will create a Node instance and have Express.js serve our React app and the API. Heroku will also build the React app on their servers when you deploy.

Before starting, head over to Heroku and create an account or log in. You will also need to install their CLI tool.

To install the Heroku CLI tool, type the following in your terminal (macOS)

You can also download the installer. For Windows users, you would need to download the Windows installer. You can find out more about it in the installation instructions.

To log in, in your terminal type

It will open a browser window where you would need to log in with your credentials. After that, the CLI will log you in automatically.

Project Structure

Take a look at the repo under the Heroku directory.

Here we have the Express.js API right under the root directory, and the React app under the client directory.

Required Configurations

Just like the previous example, here we also have the Express.js app running on port 5000 and the React app on port 3000. So we would need to setup the proxy server.

This time, the client-side package.json is located under the client directory and we add the proxy like so

Now, let’s open the package.json from the Express.js side (under root directory) and notice we have a special npm script

This script tells Heroku what to do after deploying the Express.js app. In our case, we want to build our React app for production, which will be served by our Express.js app. You can read more about Heroku’s Node support in their docs.

Express.js

Let’s take a look at the Express.js code

Everything is the same as the previous example, with the exception of the bolded code. Here we are specifying if NODE_ENV environment variable is equal to production, then we will run some code. Basically we are serving the production ready React app and re-routing client-side routes to index.html.

The reason we do it this way is because when deployed, Heroku will automatically assign production to NODE_ENV environment variable and we only want to run that specific code in production. During local development, React has its own development server, so there is no need for our Express.js app to serve it.

React App

This is how we call the API in our React app

Deploying to Heroku

To deploy to Heroku, the project would need to be in a local Git repository.
Below are the steps to initialize a new Git repo.

Then you will need to create an app instance in Heroku. To do so, type the following in your terminal (make sure you are at the root of the project)

app-name would be the name of the application.

If you notice in the screenshot, I attempted to create a project with the name create-react-app-express but the name was already taken. When you create apps, the name should be unique across the board. After I chose an alternate name (create-react-app-expressjs), I was able to create the app. Heroku gave me the link to the app and add a git remote.

In the above screenshot I’m inspecting the git configuration, and we can see a remote named heroku. This is where we are going to push our code to deploy.

Before deploying, we need to commit the code

Now we can deploy to Heroku

More about deploying in their docs.

And we have the live app here: https://create-react-app-expressjs.herokuapp.com/

Bonus

Heroku also supports continuous delivery, and they have several options. Take a look at their docs. Another thing about Heroku is that you can install a plethora of add-ons, such as sending emails and authentication.

Conclusion

In this article, we learned how to deploy a React app with an Express.js API to Heroku. If you also read my other React Production tutorials, now you have the tools to deploy not only to Heroku but to Netlify and Vercel as well.

By learning how to deploy to multiple providers, you will be able to make an informed decision when it is time to deploy your project to production.

Thanks for reading this far. I hope you enjoyed the article and will share it on your social media accounts. You can connect with me on LinkedIn or on Twitter.

Originally Published on Bits and Pieces

Introduction

If you’re using the Heroku platform to build and run your apps, you may want some of your applications to make use of a PostgreSQL database. Fortunately, it’s easy to use Heroku and PostgreSQL together to store an app’s data. In this article, we’ll show you how to set up a Heroku app and a PostgreSQL database for the app’s backend data.

Prerequisites

Before following along with the instructions in this tutorial, make sure to first sign up for a Heroku account using a valid email address.

Create a new Heroku application

Once you’ve created a Heroku account, you can create a unique app name. Be sure to use lowercase words and hyphens instead of spaces. You can also use the heroku create command to have Heroku generate a name and a new app for you.

Install PostgreSQL on your machine

PostgreSQL will need to be installed on your machine in order to follow along with this tutorial. The which psql command can be used to see if the psql command-line interface for Postgres is already installed. You can also use the postgres -V command to get the current installed version of Postgres.

Install Postgres on Debian Linux

If you’re using a Debian-based Linux machine or server, use the following apt-get command to install Postgres:

Install Postgres on macOS X

If you’re doing your local development on macOS, you can use Homebrew to install PostgreSQL using the following brew command:

Heroku Brewster

Install Git on your local machine

Heroku allows you to deploy your applications using git and stores your application on a github repo, so you’ll need to have git installed on your machine as well. Run the following command to confirm that git is installed and working:

Homebrew Heroku

Heroku CLI and Heroku-Repo

You’ll need to install the ‎Heroku command-line interface (CLI) so that you can manage the repo for your app on your local machine. The CLI will also allow you to test apps locally for development purposes.

Install the Heroku CLI on your local machine

To set up the CLI on your local machine, download the appropriate interactive installer for your operating system; otherwise, you can use the following Homebrew command if you’re developing locally on a Mac:

If you have the SNAP package manager installed on your Linux server or machine, you can also install Heroku CLI using the following snap install command:

You can then use the following command to confirm that Heroku installed correctly:

Install the heroku-repo package

Next, let’s install the heroku-repo plugin for the Heroku CLI. This will provide additional commands to alter your app’s repo:

NOTE: To use the plugin to manage your repository, simply use the following command: heroku repo:COMMAND.

Set up the Heroku project

Now that we’ve installed all the tools needed to work with Heroku and PostgreSQL, let’s try creating a new project folder for our Heroku app. In your terminal or command prompt window, run the mkdir command followed by the folder name for your project, and then change into that directory. You can accomplish both of these tasks using the following commands:

You’ll need to create a Procfile for the app so that Heroku will know which commands and processes to run when building the app. The command shown below will create the Procfile in your project directory and deploy a special HTTP Server:

We’ll also need a requirements.txt file so that Heroku knows what applications and packages the app will use. For the time being, we’ll just instruct it to install gunicorn:

Log into Heroku

At this point, we’re ready to complete the authentication. Make sure you are already signed into Heroku on your default browser before executing the command shown below:

NOTE: If you’d rather authenticate and login interactively in your terminal instead of using the browser, you can run the following command: heroku login -i. This command will prompt you for a password.

Deploy the Heroku app

If you haven’t yet created one, you can now use the heroku create command to have Heroku automatically generate a name for an app and create one; otherwise, you can use the heroku access --app {SOME_APP_NAME} command to connect to the app you already created in the browser.

Heroku Brew Bar

Set the repo for the Heroku app

Next, we’ll use the following git:remote command to set the current repo and directory to the correct Heroku app for our account:

heroku git:remote -a {SOME_APP_NAME}

Once everything has been created and set, we can use the git remote -v command to confirm that git has initialized to the correct Heroku application.

Clone the Heroku app

The following command can be used to download and clone an app from your remote repo into your local project directory if needed:

NOTE: It’s not recommended to store or back up your Heroku app on its Git repository, since the main purpose of this repo is to deploy the app. Instead, back up your app project directory on another, dedicated github repository, server or hard drive.

Heroku and Postgres

We’ll need to access the psql PostgreSQL command-line interface in order to create tables and record data for your app’s data.

Install the PostgreSQL add-on for the Heroku app

We can install the heroku-postgresql add-on using the following command. This will allow us to have access to the Heroku app’s psql interface:

NOTE: The hobby-dev billing tier is the free PostgreSQL database plan for hobbyists and smaller apps. If you’d like more support and storage for your app data, you’ll need to upgrade the billing plan for your app on the Heroku website.

The response from the create heroku-postgresql command will look like this:

If you’re not sure of your current billing tier, use the heroku pg:info command to get more information about your Postgres database plan for your Heroku app.

Get the Heroku PostgreSQL database credentials

Next, let’s navigate to the data management section of Heroku’s website. Once you’re in this section, click on the heroku-postgresql service for the application that you just created.

After you access the PostgreSQL database service, you’ll need to navigate to the Settings tab and then click View Credentials to see your Postgres username and password.

NOTE: Heroku will periodically change the psql username and password for your PostgreSQL databases. If you get a permission denied error while accessing your app’s psql interface, navigate back to Heroku’s data management page to check your credentials.

Copy the Heroku CLI psql command for Postgres

At the end of your Postgres database credentials you should see a heroku pg:psql command; this value is found under the Heroku CLI field. Copy that psql command and paste it into a terminal window, and this will allow you to access your Heroku-Postgres database using the credentials defined in the database credentials.

Creating PostgreSQL credentials for a Heroku app

We can now use the following command syntax to create Postgres credentials for our app:

NOTE: Keep in mind that you’re not allowed to create your own credentials if you only have the free hobby-dev Postgres add-on.

If you need to get your Heroku PostgreSQL credentials, use the command shown below:

Heroku’s psql interface

The heroku pg:psql command listed on your database’s credentials page will look something like this:

NOTE: If you try to enter the psql interface without using the correct arguments for --app and for the database URL, you’ll encounter an ERROR: syntax error at or near '...' error whenever you attempt to alter the database.

Execute a PostgresSQL statement

There’s no need to create a database with the CREATE DATABASE SQL statement– Heroku has already taken care of that for you, and it doesn’t allow you to create roles or databases anyway. However, you can create tables and row data in the heroku pg psql interface.

Create a table for your Heroku app Postgres data

Heroku Brewery

If we try to execute the dt command in psql, we’ll get the response shown below:

The reason we get this response is because we don’t have any tables for our app yet. Let’s use the following SQL command to create a simple table. This will allow us to test if we can successfully execute SQL statements to alter the app’s database:

The above command should return a CREATE TABLE response if successful.

Heroku Brew Wine

Now, let’s execute the dt command once again. This time we should see the test_table PostgreSQL table listed. We can then use the q command to quit the interface.

Heroku Crewlink

Conclusion

Heroku Redis

When you’re doing app development with Heroku, it’s important to know how to use PostgreSQL to store the application’s data. In this tutorial, we showed you how to create and set up and app that uses both Heroku and PostgreSQL. With our step-by-step instructions and examples, you’ll be able to build your own applications and use a PostgreSQL database in your work.