Deploy Your Application

In these instructions, we will walk you through how to deploy your application using Heroku for backend deployment and surge for frontend deployment. Depending on the complexity of your application, we have provided a series of instructions custom to possible feature variations. These instructions will cover the following situations:

1. Backend Node/Express, React Frontend, and No Database
2. Backend Node/Express, React Frontend, and Postgres Database
3. Backend Node/Express, React Frontend, Postgres Database, and Twilio Sengrid

1: Deployment with No Database We're going to use Heroku to deploy our backend and Surge to deploy our frontend!

First, [download and install the Heroku command line interface](https://devcenter.heroku.com/articles/heroku-cli#download-and-install). Mac users can use the `brew` command line shown there, while Windows users can run the appropriate installer for their system.

Next, make sure you have two folders, **each with their own git repository**.

Your folder structure might look something like this:

express-api
react-ui

It's important to have this structure because we need two different deployments, one for the front-end and one for the backend. ### Backend Make sure you are running the following commands in the `express-api` directory for your project.

Replace `NAME_OF_APP` with whatever you decide to name your application.

heroku login
heroku create NAME_OF_APP

Take note of the url that was just created for your new application.

Then run these commands, again making sure to replace `NAME_OF_APP` with whatever you decide to name your application.

echo "web: node server.js" > Procfile
heroku git:remote -a NAME_OF_APP

These commands will create a web application and the `Procfile` which tells Heroku what command to run to start the server.

Now that you have a remote named, run the following commands in the same directory. We're going to push our code to Heroku and trigger a new deploy.

git add .
git commit -m "Deploying express api"
git push heroku master

Tada! The backend should now be deployed to Heroku. ### Frontend Let's now handle deploying our React app. To deploy this repo, we'll be using a tool called **Surge**, which is a very easy way to deploy static websites.

Make sure that you have the `surge` command installed. You can run this command anywhere in the Terminal:

npm install --global surge

Then replace look for all places in your app where you use `http://localhost:3001` as the endpoint. Replace all of them with this variable: `process.env.REACT_APP_REMOTE_HOST_URL`. Here's an example:

const res = await axios.get(`http://localhost:3001/store/${productId}`)
// should become:
const res = await axios.get(`${process.env.REACT_APP_REMOTE_HOST_URL}/store/${productId}`)

Make sure you replace all of them! We'll explain the reason for this in a future lesson.

With the current working directory set to the frontend of your project, run the following commands, replacing `HEROKU_BACKEND_URL` with the url that heroku provided during the backend deploy process.

REACT_APP_REMOTE_HOST_URL=HEROKU_BACKEND_URL npm run build
cp build/index.html build/200.html
surge build

Choose your own domain or let Surge pick one for you.

Open the link provided and paste it into the browser to make sure things are working. ### Test out your app! Make sure everything is working as expected. 2: Deployment with Postgres Database We're going to use Heroku to deploy our backend and Surge to deploy our frontend! Before you continue, make sure you have two folders, **each with their own git repository**.

Your folder structure might look something like this:

express-api
react-ui

It's important to have this structure because we need two different deployments, one for the front-end and one for the backend. ### Backend Make sure you are running the following commands in the `express-api` directory for your project.

Replace `NAME_OF_APP` with whatever you decide to name your application.

heroku login
heroku create NAME_OF_APP

Take note of the url that was just created for your new application.

Then run these commands, again making sure to replace `NAME_OF_APP` with whatever you decide to name your application.

echo "web: node server.js" > Procfile
heroku git:remote -a NAME_OF_APP
git add .
git commit -m "Deploying express api"

This commands will create a web application and the `Procfile` which tells Heroku what command to run to start the server.

Now that you have a remote named, run the following commands in the same directory. We're going to push our code to Heroku and spin up a new postgres database instance for our app.

git push heroku master
heroku addons:create heroku-postgresql:hobby-dev -a NAME_OF_APP

This will create a `DATABASE_URL` variable for us that we can then use in the next command. Now we'll go ahead and copy our local database to the production one so that we can have our seed data in production.

Replace `DATABASE_NAME` with the name of your database and `NAME_OF_APP` with whatever you decide to name your application. Leave `DATABASE_URL` as the exact text `DATABASE_URL`.

heroku pg:push DATABASE_NAME DATABASE_URL -a NAME_OF_APP
heroku open

If you are getting any errors, run `heroku logs -t -a NAME_OF_APP` to attempt to debug them.

We'll need to set some environment variables as well, since our `.env` file isn't committed to git.

See what environment variables are currently present by running `heroku config`.

heroku config

Then, go ahead and an environment variable update to get our database connection working:

heroku config:set PGSSLMODE=no-verify

All Heroku Postgres production databases require using SSL connections to ensure that communications between applications and the database remain secure, so we're ensuring that our postgres instance doesn't reject our database connection.

Run `heroku config` again to make sure it's working as expected.

This update should now should our backend up and running as expected.

Feel free to add any more missing environment variables that might be needed. ### Frontend Let's now handle deploying our React app. To deploy this repo, we'll be using a tool called **Surge**, which is a very easy way to deploy static websites.

Make sure that you have the `surge` command installed. You can run this command anywhere in the Terminal:

npm install --global surge

With the current working directory set to the frontend of your project, run the following commands, replacing `HEROKU_BACKEND_URL` with the url that Heroku provided during the backend deploy process.

REACT_APP_REMOTE_HOST_URL=HEROKU_BACKEND_URL npm run build
cp build/index.html build/200.html
surge build

Choose your own domain or let Surge pick one for you.

Open the link provided and paste it into the browser to make sure things are working. 3: Deployment with Postgres Database & Twilio Sengrid We're going to use Heroku to deploy our backend and Surge to deploy our frontend! Before you continue, make sure you have two folders, **each with their own git repository**. Your folder structure might look something like this:

express-api
react-ui

It's important to have this structure because we need two different deployments, one for the front-end and one for the backend. ### Backend Make sure you are running the following commands in the `express-api` directory for your project.

Replace `NAME_OF_APP` with whatever you decide to name your application.

heroku login
heroku create NAME_OF_APP

Take note of the url that was just created for your new application.

Then run these commands, again making sure to replace `NAME_OF_APP` with whatever you decide to name your application.

echo "web: node server.js" > Procfile
heroku git:remote -a NAME_OF_APP
git add .
git commit -m "Deploying express api"

This commands will create a web application and the `Procfile` which tells Heroku what command to run to start the server.

Now that you have a remote named, run the following commands in the same directory. We're going to push our code to Heroku and spin up a new postgres database instance for our app.

git push heroku master
heroku addons:create heroku-postgresql:hobby-dev -a NAME_OF_APP

This will create a `DATABASE_URL` variable for us that we can then use in the next command. Now we'll go ahead and copy our local database to the production one so that we can have our seed data in production.

Replace `DATABASE_NAME` with the name of your database and `NAME_OF_APP` with whatever you decide to name your application. Leave `DATABASE_URL` as the exact text `DATABASE_URL`.

heroku pg:push DATABASE_NAME DATABASE_URL -a NAME_OF_APP
heroku open

If you are getting any errors, run `heroku logs -t -a NAME_OF_APP` to attempt to debug them.

We'll need to set some environment variables as well, since our `.env` file isn't committed to git.

See what environment variables are currently present by running `heroku config`.

Then, go ahead and set one that we know for sure:

heroku config:set EMAIL_SERVICE_STATUS=active

That should update the `EMAIL_SERVICE_STATUS` to `active` so that our application can send emails. Run `heroku config` again to make sure it's working as expected.

Let's handle one more environment variable update to get our database connection working.

heroku config:set PGSSLMODE=no-verify

All Heroku Postgres production databases require using SSL connections to ensure that communications between applications and the database remain secure, so we're ensuring that our postgres instance doesn't reject our database connection.

This update should now should our backend up and running as expected.

We'll come back to this in a bit so don't worry if we're still missing a few environment variables. ### Frontend Let's now handle deploying our React app. To deploy this repo, we'll be using a tool called **Surge**, which is a very easy way to deploy static websites.

Make sure that you have the `surge` command installed. You can run this command anywhere in the Terminal:

npm install --global surge

With the current working directory set to the frontend of your project, run the following commands, replacing `HEROKU_BACKEND_URL` with the url that Heroku provided during the backend deploy process.

REACT_APP_REMOTE_HOST_URL=HEROKU_BACKEND_URL npm run build
cp build/index.html build/200.html
surge build

Choose your own domain or let Surge pick one for you.

Open the link provided and paste it into the browser to make sure things are working. ### Putting It All Together Now that the frontend and backend are both deployed, make sure to add any remaining environment variables the backend depends on.

heroku config:set EMAIL_FROM_ADDRESS=YOUR_SENDGRID_EMAIL_FROM_ADDRESS

This should match up with your Twilio SendGrid configuration.

heroku config:set CLIENT_URL=YOUR_FRONTEND_URL

This will help when creating links for use by your email service. Make sure not to have a trailing slash on your frontend url.

heroku config:set SENDGRID_API_KEY=YOUR_SENDGRID_API_KEY

This should allow you to start sending emails with Twilio Sendgrid.

Now test your application and make sure everything is in order.