Minimum nodejs server setup needed for React using react-router and browserHistory

Question

My current server.js:

let express = require('express');
let harp = require('harp');
let path = require('path');

let app = express();

app.use(express.static(__dirname + "/dist"));
app.use(harp.mount(__dirname + "/dist"));

let port = process.env.PORT || 3333;
app.listen(port, () => console.log("Listening on port " + port) );

// ... other routes for data fetching ...

// For browserHistory: https://github.com/reactjs/react-router/blob/1.0.x/docs/guides/basics/Histories.md
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

This works fine when I start navigation at mysite.com/. However, if I enter mySite.com/someRoute, it breaks. Specifically, I see the below in console:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3333/dashboards/styles/normalize-3.0.3.min.css".
...
Uncaught SyntaxError: Unexpected token <
...

My understanding is that to fix this I also need to implement server-side rendering. Is that accurate? If so, what is the minimum setup needed for that? All the guides I've seen are much more in-depth than I would like to go right now.

(I am fine upgrading dependencies if it will help.) react: 0.14.7 react-router: 1.0.3

score 8 · Accepted Answer · answered Mar 11 '16 at 05:58

Assuming your css file is in your static folder and that the path for the file matches the path below __dirname + "/dist" and that you are NOT navigating to /someRoute within your app but directing browser to that address via the address bar, I suspect the problem is you are serving the index.html when you need to serve the css file. (You gave us the error that the browser reported, but not the actual response from server for that request.)

This is caused by directing the browser towards mySite.com/someRoute. The browser now thinks /someRoute is the root path of all requests when using relative urls. So if the index.html page requires assets/css/mysite.css. The browser will actually send a request for someRoute/assets/css/mysite.css. You can verify this by watching the network tab in your browser.

To fix this, set the base tag to / in your <head>. This will tell the browser to not prefix any path on relative urls.

Example:

<head>
  <base href="/">
  <link >
</head>

Makes total sense. Another reason to make sure I always use absolute paths. Thanks! — Matthew Herbst, Mar 11 '16 at 16:19
You don't have to use absolute paths if you use the base tag. — Josh C., Mar 14 '16 at 19:06

score 0 · Answer 2 · answered Mar 11 '16 at 05:29

0

This doesn't look React specific, but without more details...

In your index.html you're including a reference to a CSS file stored on the same server. That server has a routing rule set for '*' that returns index.html. So every URL you access on that server will return index.html. Every time.

You can either set a separate rule to handle requests for static resources (maybe put them in a separate folder?) or serve the resources from a different server.

answered Mar 11 '16 at 05:29

Yair

182
2
10

I have plenty of other routes which I intentionally didn't include since they would just be clutter - see the comment in the example. Putting the `'*'` route at the end causes it to match all non-previously matched routes. – Matthew Herbst Mar 11 '16 at 07:53

Minimum nodejs server setup needed for React using react-router and browserHistory

2 Answers2

Linked