Deploying a Rails API/ React Application on Heroku, Part 2: Frontend Deploy
Tags: react, heroku, deploy
Published: 2020-11-18 02:25:54

Hero-ku! You've probably ended up here after deploying your application's Rails API backend to Heroku. Haven't done that yet? Take a look at [Part I](https://dev.to/lizlaffitte/deploying-a-rails-api-react-application-on-heroku-part-1-backend-deploy-1hc3) and then come back.

![Katt Williams gif](https://media.giphy.com/media/hc5tlLxEX4k5G/giphy.gif)

**You're going to need your backend app's URL, so have it handy.**

## Step 4: Prep Your Rails Frontend
Let's make sure your app doesn't say no to Heroku. (I'll never stop, and you can't make me.)

### 4.1 Create a New Branch
You did it for your backend, let's do it again. Create a new branch in your local repo and push to remote. For consistency, we're going to call it main, but you can choose any name you'd like. We'll use this branch to auto-deploy from GitHub later on.

```
$ git checkout -b main
$ git push -u origin main
```

### 4.2 Update Actions
Update any of your actions that fetch info from your backend API. You're looking for any code using localhost. Replace the URL with your new Heroku app domain.

*myActions.js*
```

export const updateListing = (listingUpdateData, listingId) => {
    return dispatch => {
        const listing = {listing: listingUpdateData}
        return fetch(`https://your-app-name.herokuapp.com/${listingId}`, {
            method: "PATCH",
            headers: {
              "Content-Type": "application/json"
            }, body: JSON.stringify(listing)
          })
        .then(response => response.json())
        .then(resp => {
            if(resp.errors){
                alert(resp.errors)
            } else {
                dispatch(editListing(resp.data))
            }
        })
    }
}

``` 
## Step 5: Create Frontend Heroku app
You can do this from the Heroku CLI, or from within the Heroku web application.

This next part is only if you want to use the Heroku CLI.
In the CLI, from within your repo directory:
```
$ heroku create app-frontend --buildpack https://github.com/mars/create-react-app-buildpack.git
$ git remote add heroku git@heroku.com:app-frontend.git 
```
If you'd like to use the the web app:

1. Login
2. New > Create New App: app-frontend
3. Settings > Buildpacks > Add > https://github.com/mars/create-react-app-buildpack.git

Whichever way you create the application, I recommend choosing to auto-deploy from GitHub:

1. Deployment Method > Connect to GitHub
2. Find your frontend React GitHub repo
3. Pick the branch you created above (I used main in my example)
4. Enable Automatic deploys

My app was very broken when I first attempted to deploy it. After frantic Googling, I found [this](https://hackernoon.com/deploying-any-react-app-to-heroku-1ee6db9b97d3), which instructs you to create a static.json file in your root directory.

*static.json*
```
{ "root": "build/", "routes": { "/**": "index.html" } }
```

I also had a yarn.lock file as well as a package-lock.json file because I was apparently playing the package manager field when I first created this application. I deleted my yarn.lock file, after making sure any needed packages were added with the npm command. 

Overall, the frontend deploy would've been a lot easier if I was aware

Questions, comments, smart remarks? I hope your deployment went smoothly! Let me know if you think I missed anything!