# MERN Deploy Jam SEI 503

Instructions for how to deploy decoupled MERN apps using MongoDB Atlas, Heroku, and Netlify.

We will be using a **CD** or *Continuos Deployment* approach to have our apps updated online as new features are completed. This will complement the **CI** or *Continuos Integration* workflow we have been using for this project.

### Overview

* Our Database will be hosted with [MongoDB Atlas](https://www.mongodb.com/cloud/atlas)

> MongoDB Atlas is a cloud hosting service provided by MongoDB. We will have to sign up for an account and configure our server to use MongoDB Atlas when it is deployed.

* We will be using [Heroku](https://www.heroku.com/) once again to host our express server.

> This time around we a going to be using heroku's continuos deployment from github option -- don't worry its super easy

* Our React front end will be deployed with [Netlify](https://www.netlify.com/) and will be configured to speak to our server on heroku.

> Netlify is a cloud computing that offers easy to use frontend deployment hosting and continuos deployment integrations from github

## Configuring the server for deployment

First we will configure the backend for deployment, we need to checkout to a `deployment` branch, so we can keep developing the app with the `main` branch and merge new features into `deployment` when they are ready for production.

* in your server repo:
* make sure you are on the `main` branch
* make sure you have the most recent changes from `upstream`
* make sure you have no uncommited changes
* afterwards use the command `git checkout -b deployment` to create a deployment branch

## MongoDB Atlas

We will be using Atlas as the host for our MongoDB database.

We are already setup for this part 🥳

Horray! we can keep using MongoDB atlas just like how we have for development.

## Heroku

We will be using Heroku to host our Express Servers that will serve as the API for our frontend to connect to.

1. Create a Procfile with the command `touch Procfile`
* Note the capitol `P` in `Procfile`. it is important.
2. In this Procfile add the following code, except replace `server.js` with whichever file contains your Express server declaration (your entry point). After you save `Procfile`, commit your code.

web: node server.js

3. push your deploy branch to github: git add, git commit and `git push --set-upstream origin deployment`
3. Go to Heroku and login. Create a new app using the top right hand button. Name this app something unique and relevant to your project, but doesn't have to be super specific.
4. Click Settings on the app, and click Reveal Config Vars to show the equivalent for setting up `.env` variables.
5. Here, list all the key value pairs that are in your local `.env`
*Note - strings should be passed without quotes. Heroku will format them appropriately.*
6. Click on the deply tab
* Under dployment method Select 'connect to github'
* Serch for your repository name and connect it to heroku
* after it connects, select the `deployment` branhc to deploy
* click on 'Enable automatic deploy'

You can can use the heroku CLI with this app, and it will automatically deploy from your repo's deployment branch.

to configure the heroku CLI:

heroku login
// this will ask you to click any key
// then will take you to web platform for authentication

heroku git:remote -a name-of-your-heroku-app

heroku logs --tail

7. Navigate back to heroku and click on the 'deploy' button
8. Give Heroku 1-2 mins to do the initial build of your app, and then click "open app" in the top right hand corner. If you have any bugs, or if you do not have a home route (`/`) set for your Express app, nothing will render. To debug, type in `heroku logs --tail` into your terminal window and, if needed, grab a Dev to help debug. 🦑

## Netlify

We will be using Netlify to deploy our React frontend, and this frontend will be our Client URL for the backend API calls.

1. At this point, double check that your own personal repo is up to date with the main git repo for your team, and that all your own personal most recent work has been committed and merged into the main git repo.
* once your client repo is up to date, checkout to a deployment branch
2. **If you currently have any non-breaking React errors on the terminal when you deploy the frontend:** We have to let Netlify know we are okay with these. Netlify, by default, is not. Longterm, you will want to correct all these errors and then undo the next bit of instructions, but for deployment today do the following. In your `package.json` on the frontend, replace the current `"build": "react-scripts-build",` with `"build": "CI= react-scripts build",`. Commit and push your changes.
3. Use your Github to sign up for Netlify [here](https://www.netlify.com/).
4. After login, on your dashboard, click "New site from Git" in the top right hand corner.
5. Under "Continuous Deployment" click "Github", and authorize Netlify to access your Github repositories.
6. Under "Deploy settings" leave as default, and
7. To add environmental variables (like your `REACT_APP_SERVER_URL`) click on the "Advanced options" above the Deploy button, then click the "Add variable" button. This should look a lot like the Heroku site. Add your variables and press deploy!
8. Netlify will take several minutes to build the app; check in with a Dev if there are any bugs.

A few things to note:

- Netlify's environmental variables are set on deploy—if your variable changes, you'll need to trigger a redeploy to make that change go into effect.

- if your routes aren't working you may be encounting a netlify bug with single page apps where it gets confused with the routes. You can tell netlify to redirect all the routes to the `index.html` so react-router-dom can handle them.
- use the command `echo '/* /index.html 200' ./ >> ./public/_redirects` to create the config file that redirects all routes to `index.html`

###### tags: `lessons`