Deploy PERN Fullstack App on Heroku and Netlify(Automatic Deploy)
Tags: react, postgres, node, express
Published: 2021-07-14 17:55:47


![Photo by [Danielle MacInnes](https://unsplash.com/@dsmacinnes?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/5356/0*ePv-q6-x4IPpO4yL)

## Deploy PERN Fullstack App on Heroku and Netlify

This article will walk you through how to deploy a PERN full-stack app with automatic deployment.

## Prerequisites

* [Heroku ](https://www.heroku.com/)account

* [Heroku ](https://devcenter.heroku.com/articles/heroku-cli)CLI

* [Netlify ](https://www.netlify.com/)account

* [PostgreSQL ](https://www.postgresql.org/)database

## What is PERN?

The PERN stack consists of **P**ostgreSQL, **E**xpress, **R**eact, and **N**ode. With the Express.js framework, PostgreSQL is used as a backend database. React.js serves as the frontend, and Node.js serves as the backend server.

## Deployment Process

Fork this [repository ](https://github.com/dhatGuy/yelp-clone-PERN)to get started.

Take a look at the code provided. There are two folders:

* client — which contains the front-end code built with React.js, and

* server — which has the backend developed using Express.js

Let’s make sure the app is running well locally.

Change directory to the server and install the dependencies

    cd server

    npm install

Open a new terminal. Change directory to the client and install dependencies

    cd client

    npm install 

### Create database

Since we are using PostgreSQL for the database. Make sure you have it [installed](https://www.postgresql.org/download/).

Open your terminal and login into Postgres

    psql -U postgres

Enter `postgres` as password.

Create a database named yelp and connect to it.

    create database yelp;

    \c yelp

We only need two tables for the app.

Create `restaurants` table

    CREATE TABLE restaurants (

      id BIGSERIAL NOT NULL PRIMARY KEY,

      name VARCHAR(50) NOT NULL,

      location VARCHAR(50) NOT NULL,

      price_range INT NOT NULL check(

        price_range >= 1

        AND price_range <= 5

      )

    );

Create the second table, `reviews` 

    CREATE TABLE reviews (

      id BIGSERIAL NOT NULL PRIMARY KEY,

      restaurant_id BIGINT REFERENCES restaurants(id) ON DELETE CASCADE,

      name VARCHAR(50) NOT NULL,

      review TEXT NOT NULL,

      rating INT NOT NULL check(

        rating >= 1

        AND rating <= 5

      )

    );

Populate a row in the `restaurants` table.

    INSERT INTO restaurants(name, location, price_range)

    VALUES ('Iya Toyosi Canteen', 'Sagamu', 3);

### Set environment variables

Change directory into the `server` folder and create a `.env` file. Add the following contents.

    PG_USER=postgres

    PG_PASSWORD=postgres

    PG_HOST=localhost

    PG_PORT=5432

    PG_DATABASE=yelp

    PORT=7000

### Start the app

Open your terminal and navigate to the client folder. Start the client.

    npm start

Open a new terminal and navigate to the server folder and start the server.

    npm start

Open your browser and go to [http://localhost:3000](http://localhost:3000) to see the app running like the screenshot below. You can play around with it.

![The app running](https://cdn-images-1.medium.com/max/3708/1*6ITDgp_7UedIio1fS0WdyA.png)

## Server Deployment Process

Let’s start with deploying the server on Heroku.

 1. Visit [Heroku](https://heroku.com) and create an account if you don’t have one. 

 2. Install the [Heroku CLI](https://cli.heroku.com/). 

 3. Open your terminal and run the `heroku login` command after installing the CLI. To complete your login, you will be prompted to enter any key to navigate your web browser. The CLI will then automatically log you in.

 4. Create a new Heroku app

    heroku create

Heroku will generate a random name for your app or pass a parameter to specify your own app name.

    heroku create your-app-name

The output

![Output](https://cdn-images-1.medium.com/max/2000/1*q3Li1-BPffVMXua3bqnRNQ.png)

The app name is **alluring-bryce-canyon-75245**, and the URL to view the app is **[https://alluring-bryce-canyon-75245.herokuapp.com/](https://alluring-bryce-canyon-75245.herokuapp.com/).** Relax, it won’t work yet.

### Setup Heroku Postgres Database

To create a Postgres database, run this command in your terminal

    heroku addons:create heroku-postgresql:hobby-dev --app your-app-name

This will create a database and sets a DATABASE_URL environment variable.

![Output after creating the database](https://cdn-images-1.medium.com/max/2000/1*TRozHh6sMpRhizpW9H_0ww.png)

Run command `heroku addons` to check the new addon you just created. You will see the Postgres database created with a name generated automatically, for example `postgresql-pointy-04867`

    nameless-journey-88760  postgresql-pointy-04867  heroku-postgresql:hobby-dev  free   created

To create the tables in the Postgres database, log into the Heroku database

    heroku pg:psql database-name  --app your-app-name

Copy and paste the contents from `server/config/db.sql` to create the two tables and insert a row.

![output after creating table](https://cdn-images-1.medium.com/max/2130/1*CCjuyh86Q7BLCyw1B4DFGA.png)
>  Don’t forget to replace the database name and app name with your own Heroku info.

### Test the app locally.

Run 

    heroku local web

Running this will show you how it will run on Heroku. Open [http://localhost:7000/api/v1/restaurants](http://localhost:7000/api/v1/restaurants) to see the app running locally.

### Deploy the server

Finally, it is time to deploy the server on Heroku.

Open your terminal. From the root folder of the project, run this command

    heroku git:remote -a alluring-bryce-canyon-75245

You can replace `alluring-bryce-canyon-75245` with anything, preferable your Heroku app name. 

To push the code, specifically, the server folder, run 

    git subtree push --prefix server heroku main

The server should be up and running now. Visit [https://your-heroku-app-name/api/v1/restaurants](https://alluring-bryce-canyon-75245.herokuapp.com/api/v1/restaurants)

### Automate server deployment from a subfolder

Since our project has two folders, server and client, we can let Heroku know the path that leads to the server folder. We won’t have to run the above command every time we want to deploy the server.

* Go to the [Heroku dashboard](https://dashboard.heroku.com/apps) and choose the app you are working on

* Click on the Settings tab. You will see the Config Vars section. Click on reveal vars.

![environment variables](https://cdn-images-1.medium.com/max/3070/1*FDYDdrhIIu9fuN_tH8zX4A.png)

* Set the input with placeholder KEY with `PROJECT_PATH` and the input with placeholder VALUE with `server` and click on Add. 

* Still on the Settings tab, you must add a Buildpack that instructs Heroku to locate your folder.

* Under the Config Vars section, you will see the Buildpack section. Click on add Buildpack and enter [https://github.com/timanovsky/subdir-heroku-buildpack.git](https://github.com/timanovsky/subdir-heroku-buildpack.git) as the URL. Save changes. 

Ensure it’s at the top of the Buildpack chain (drag the lines on the left to move it above any other Buildpacks you’ve added).

![Heroku buildpacks](https://cdn-images-1.medium.com/max/3398/1*lU9CkAFmppxDmIRrw_1JEg.gif)



Next, we will enable automatic deployment. To enable it, you must connect the GitHub repository of the project.

 1. Go to the deploy tab. From the deployment method, choose GitHub.

 2. Search and connect the Github repo.

 3. Finally, enable automatic deployment.

Anytime you run `git push` , the server will deploy automatically. You don’t have to run the below command anymore.

    git subtree push --prefix server heroku main

![enable automatic deployment](https://cdn-images-1.medium.com/max/3398/1*-AgOClMcwLnaTJDTXR5Bew.gif)

## Client Deployment Process

Before deploying, open the project folder and navigate to `client/src/apis`. Open the `RestaurantFinder.js` file.

Replace “https://alluringbrycecanyon75245.herokuapp.com/api/v1/restaurants" with “https://your-heroku-app-url/api/v1/restaurants"

Commit the change and push. 

### Let’s get started

* Go to [Netlify ](https://netlify.com)and login into your account. Create if you don’t have one.

* After logging in, click on the button `new site from git`

* Choose your git provider.

* Choose the repository you want to deploy.

* Under Basic Build Settings, fill the inputs as below.

![Netlify build settings](https://cdn-images-1.medium.com/max/2000/1*IIMrfpb8sb2rpKTqOv-_kQ.png)

* Click on Deploy site.

* After deploying successfully, you will see a link to preview the app.

Netlify also supports automatic deployment. By default, it is enabled. 

Anytime you run `git push`, automatic deployment will start for both Heroku(server) and Netlify(client).

That’s all! You’ve just deployed a full-stack PERN web app successfully.

## References
[**Automated heroku deploy from subfolder**](https://stackoverflow.com/a/53221996/11885780)

[How To Deploy a Full-Stack MERN App with Heroku/Netlify — DEV Community 👩‍💻👨‍💻](https://dev.to/stlnick/how-to-deploy-a-full-stack-mern-app-with-heroku-netlify-ncb)