Ytukyg

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?

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.