7

My issue here is incredibly similar if not exactly the same as the one outlined in this issue. Unfortunately, I haven't been able to resolve it using the strategy it provides. So here are my own details:

I am using Create React App, React Router 4, Express, and Heroku and have followed the instructions here with regards to setting up a server with CRA.

Locally, I am able to access routes such as myapp/about, yet after building and pushing to heroku, these 404.

I can navigate to this route via the UI (i.e. by clicking on a menu item that pushes a route onto history), yet am unable to navigate to this route using only my browser's address bar. Furthermore, when I navigate using the UI, I'm not seeing any network activity related to the route such as an /about request. Yet when I change the address bar and hit enter, this yields a network request to said route.

Here are some select snippets from my code:

app.js 

<Switch>
  <Route exact path="/about" component={About} />
  <Route path="/" 
    render={props => <coolListContainer {...props}/>} />
</Switch>

server.js 

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

//...what some of my api routes look like:

app.route('/api/verify')
  .post( async (req, res) => {
      try {
        await db.verifyCode(req.body)
        res.json('success')
      } catch (err) {
        res.json(err);
      }
    }
  });

My directory structure as provided by full-stack-react`'s express demo.

└── myapp
    ├── Procfile
    ├── README.md
    ├── client
    │   ├── build
    │   │   ├── asset-manifest.json
    │   │   ├── index.html
    │   │   └── static
    │   │       ├── css
    │   │       │   ├── main.e8c50ca0.css
    │   │       │   └── main.e8c50ca0.css.map
    │   │       └── js
    │   │           ├── main.24fe0ebe.js
    │   │           └── main.24fe0ebe.js.map
    │   ├── package.json
    │   ├── public
    │   │   └── index.html
    │   ├── src
    │   │   ├── About.js
    │   │   └── index.js
    │   └── styles
    │       └── about..css
    ├── package.json
    ├── server.js
    └── static.json

Per answer given to this post, I've also plopped a static.json file into the root directory.

static.json 

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

The above configuration gives me 404s on any route.

Karoh
  • 2,390
  • 3
  • 23
  • 29
  • What URI is being generated when you receive a 404 and does it match your expectations? – Richard_G Jun 25 '17 at 16:54
  • @R_G, I'm not sure. I've added some information about navigating via the address bar and via the UI that may help parse my confusion. I'd say it matches my expectations, but apparently not my app's. That's my problem, I'm not sure how to set the app's expectation's for handling certain routes. I though what I have in my `app.js`would suffice. – Karoh Jun 25 '17 at 17:13

1 Answers1

13

Alrighty, I figured this out.

All I needed was to ensure that any request not relevant for my internal API, such as a GET request via the address bar, is routed directly to my index.html file which handles the dynamic routing via React Router. Seems obvious enough now.

Here is the final route in my app.js:

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/client/build/index.html'));
});
Karoh
  • 2,390
  • 3
  • 23
  • 29
  • 1
    Seems to go without saying, but make sure to add `var path = require('path');` at the top of your server js file. Had to print out my heroku logs to finally see that I needed to add that *smh*. – HaulinOats Jul 31 '19 at 22:41
  • This does not work when I copy and paste a url with a path. – ajbraus Mar 17 '22 at 21:37