Deploying a Rails API/ React Application on Heroku, Part 2: Frontend Deploy

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 and then come back.

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 [e-mail]: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, 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!