7. We need to allow access to your MongoDB database now from a new IP address. For simplicity, I added all IP addresses to be allowed.
    - **BIG NOTE**: In a production app **_you do not want to allow all IP addresses to access your database_**! You will want to find the specific IP address that hosts your server-side and add just that one as allowed.
    - The app I deployed does not contain any sensitive information. It's just a simple card game so no need for me to be super secure. _Once more_, do not do this for a real production app or even a side project that may contain sensitive information.
        1. Go to the [MongoDB Website](https://www.mongodb.com/) and sign in
        2. Navigate to the Project you're deploying using the dropdown on the top left
        ![MongoDB project drop down menu](https://dev-to-uploads.s3.amazonaws.com/i/mioopez440kdf4lbaxen.png)
        3. Then click the `Network Access` tab on the left side bar
        ![MongoDB Network Access Tab](https://dev-to-uploads.s3.amazonaws.com/i/xnosrkijcoy4o6rt259b.png)
        4. Click the green button on the right of the screen that says `Add IP Address`
        ![MongoDB Add IP address button](https://dev-to-uploads.s3.amazonaws.com/i/i4wg95qv9jpuzec054hu.png)
        5. A modal will popup. Click the button that says `Allow Access from Anywhere`. This will place `0.0.0.0/0` in the `Whitelist Entry` input. Then click `Confirm`.
        ![MongoDB Add IP address modal](https://dev-to-uploads.s3.amazonaws.com/i/k7rniqtjzn2ulf4wqrdy.png)

8. In development I had the express server listen to `localhost:5000` to run there and my react app ran on port `3000`. We must change what this Express server will listen for to `app.listen(process.env.PORT || 5000)`
    - So this will tell the server to listen to the `.env` environment variable `PORT` which **_we should not have set in our own_** `.env` _file_. OR it will listen to port 5000.
    - The `process.env.PORT` will be set by Heroku's `.env` - they essentially will tell our server which port to listen to.
    - If there is no such `process.env.PORT`, in other words there is no `.env` file that has been configured, then it will default to `5000`. This will allow us to keep that code in *and* be able to run it in our local development environment on port `5000` because we *do not* have a `.env` variable `PORT`.
    ```js


    // server.js

    /*
      Other code...
    */

    app.listen(process.env.PORT || 3000);

---

**Ensure in your terminal that you are inside the _root_ of the project you are deploying for these next two steps**

---

10. The command we need to push our `server` code specifically, because we have the separation of `client` and `server` in our project structure, is `git subtree push --prefix server heroku master`
    - This is telling git to push a subtree, or in other words a *subdirectory*, from our current git repo. The `--prefix` flag comes before that subdirectory that we want to push, in our case it is `server`. And lastly we're telling it to push to the remote `heroku` our `master` branch.
    ```


    git subtree push --prefix server heroku master

---

**IF you want to test and ensure that you've deployed your server to Heroku just add in a test route in your `server.js` like:** 
```js

app.get('/', (req, res) => { res.send('Hello from Express!')

    You can view your app by:
        - Copy and pasting the url that will appear in your Terminal after successfully pushing your code to the remote Heroku branch
        - Navigating to your project on [the Heroku website](http://heroku.com) and there will be a button that says 'View App' - click it and it will take you there
    - If you see the 'Hello from Express!' (or whatever test message you used) then that means your server is running correctly

    ---

11. Now for our MongoDB connection to work we must define an environment variable for Heroku to store our MongoDB connection string. 
    > We want to keep our connection string secret as we don't want anybody able to connect to our database and change, delete, add things etc. 
    > In our local build the connection string, is stored in our `.env` file inside of `/server`. I named by connection string `MONGODB_URI`. You can do this next step on the Heroku CLI or on the Heroku website. 
    > I recommend the website it's more straightforward and you don't have to worry about escaping special characters. I'm going to describe the next steps going through the website.
    - Navigate to your dashboard on Heroku
    - Click on your project name that will be present from our previous steps where we created our remote branch and pushed the code
    - Navigate to the Settings tab near the top
    - The second section is 'Config Vars' - click on 'Reveal Config Vars'
    - You'll see two inputs:
        - One is the name of your environment variable - name this **whatever you have it named in your local build**. For me that is `MONGODB_URI`.
        - Second is the value - paste your whole connection string here that you should copy from your `.env` file directly to avoid any typos.
    - Then just click 'Add' and our MongoDB connection environment variable is set.
    ![Heroku site config vars](https://dev-to-uploads.s3.amazonaws.com/i/7ewhhh5fybrk94691c6i.png)

    ---

    Our `server` code is officially deployed and configured correctly. Now onto the `client` code with Netlify.

    ---

12. Next is to deploy the front-end React code in `/client` to Netlify. Login to Netlify if you haven't already, the default tab should be `Sites` or just navigate to that tab.
    - Click the button that says `New site from Git`
    ![Netlify new site from git button](https://dev-to-uploads.s3.amazonaws.com/i/y01zt0d6tout6tvt3757.png)
    - Click the `Github` (or `GitLab` / `BitBucket` if that's where your repo is hosted) button below `Continuous Deployment`
    ![Netlify new site continuous deployment provider](https://dev-to-uploads.s3.amazonaws.com/i/egvtiqb6tc31p36ao838.png)
    - There will be a search bar that says `Search Repos` - type in the name of your project repo here to find it then click the line that has the repo you're looking for
    ![Netlify find repo for new site](https://dev-to-uploads.s3.amazonaws.com/i/ruf2nbhjpasof8z5ayv6.png)
    - Click `Deploy Site`. 
    ![Netlify new site deploy button](https://dev-to-uploads.s3.amazonaws.com/i/3kcvihxjge4zze3x1prn.png)
    - Once that's done it will take you to a page that shows a box near the top with your auto-generated site name and your site url right under it. In that box click `Site Settings`.
    ![Netlify post deploy screen](https://dev-to-uploads.s3.amazonaws.com/i/kt8un31fsx5ljswffwo1.png)
    - First you can change your site name here if you'd like by clicking the `Change site name` button on that first page. Do that if you'd like.
    ![Netlify change site name button](https://dev-to-uploads.s3.amazonaws.com/i/ze54wf50bk7vv9cz6nwm.png)
    - Now on the left menu bar click on the tab that says `Build & Deploy`.
    ![Netlify sidebar](https://dev-to-uploads.s3.amazonaws.com/i/bbjpw5oqo41pr4x5rcen.png)
    - Click the `Edit Settings`
    ![Netlify edit site settings button](https://dev-to-uploads.s3.amazonaws.com/i/os7b2tio2luqtew0azkn.png)
    - Change your `Base directory` to `client`, change your `Build command` to `yarn build`, and change your `Publish directory` to `client/build`. Then click the `Save` button on the bottom left.
    ![Netlify edit site build settings form](https://dev-to-uploads.s3.amazonaws.com/i/t8d1x1jsckuk24v5tfns.png)
    To ensure this all redeploys after we change these settings I like to explicity trigger a redeploy.
    - Near the top in the tabs located right under your team name and site name click on `Deploys`
    ![Netlify deploys tab](https://dev-to-uploads.s3.amazonaws.com/i/31mwopk5aw35ybs80p3x.png)
    - Then click the `Trigger deploy` button which has a drop down with two options. I always use `clear cache and deploy site` to ensure a fresh build that has all changes I've made.
    ![Netlify deploys tab](https://dev-to-uploads.s3.amazonaws.com/i/o05ey38l34lsdu80dhm6.png)

13. **LASTLY** after we deploy our front-end React code we must ensure _any requests_ we're sending from the client-side is changed to use our Heroku URL now instead of localhost.
    - In my structure the requests were being made from `client/api/index.js` so navigate to that file and *any request that contains* `http://localhost:5000` must be replaced by your Heroku URL.
    ```js


    // Before
    const res = await fetch('http://localhost:5000/scores/'

    // After
    const res = await fetch('https://my-project.herokuapp.com/scores/')

    // 'my-project' in the URL will either be the auto-generated
    // name from Netlify or if you changed the name it will
    // be the name you gave it