Heroku with React-Router and Create-React-App

Question

This question has been asked multiple times, I have been reading the similar questions and attempting to resolve this issue with no luck so I am posting my code to see if a fresh pair of eyes can help solve my problem.

My app works as expected on Heroku, however when refreshing the page or navigating directly to a route that's not the home page (example myapp.com/whatever). I am getting a 404 not found.

My routing works locally so I know it has to do with my app settings and Heroku. I have a MERN application with create-react-app client and express server backend

Folder Stucture

client/
server/
package.json
static.json

static.json

{
    "root": "client/build/",
    "clean_urls": false,
    "routes": {
        "/**": "index.html"
    }
}

Router.js

<BrowserRouter basename="/">
    <Fragment>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route extact path="/login" component={Login} />
            <PrivateRoute path="/dashboard" component={Dashboard} />
        </Switch>
    </Fragment>
</BrowserRouter>

Server.js

if (process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'))

    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, '../client', 'build', 'index.html'));
    });
}

Anybody see anything that I am missing?

weibenfalk · Answer 1 · 2018-11-25T16:46:05.890

I've had a lot of time spent on this issue also. If I remember correctly you have to create a new property in your package.json file that's called "homepage". You can place it last inside of the object in your package.json. The value for that property would be your URL where you host your App. So for my example it was:

{
  "name": "react_movie_db_course",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-fontawesome": "^1.6.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
   "homepage" : "http://www.weibenfalk.com/react_rmdb/"
}

Don't think you need the basename on your component either if you're not starting from a subfolder.

It may even be so that you have to edit your .htaccess file on the server also. This is what my .htaccess file look like.

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# Fallback all other routes to index.html
RewriteRule ^ /react_rmdb/index.html [L]

I also know that it took maybe 24 hours before the routing started to work correctly on the server.

hmm, didn't seem to do the trick for me at the moment.. thanks for the response though, super frustrating issue — Jason McFarlane, Nov 25 '18 at 16:37
Edited my original anser instead so I could format the code correctly =) — weibenfalk, Nov 25 '18 at 16:46

score 0 · Answer 2 · answered May 17 '21 at 09:03

There is a specific buildpack in heroku for create-react-app that resolved this issue for me:

heroku buildpacks:set mars/create-react-app

The static.json file:

{
    "root": "client/build/",
    "clean_urls": false,
    "routes": {
      "/**": "index.html"
    }
  }

Heroku with React-Router and Create-React-App

2 Answers2