ArslArsl ArslArsl - 10 days ago 4
React JSX Question

React Js front end and Express backend - can't load static files properly

I have a React app on front end. Here is the routes:

var React = require("react");
var ReactDOM = require("react-dom");
var {Route, Router, IndexRoute, browserHistory} = require("react-router");
var Main = require("Main");
var BlogList = require('BlogList');
var Blogpost = require('Blogpost');
var NewBlog = require('NewBlog');
var EditBlog = require('EditBlog');
var NotFound404 = require('NotFound404');


ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={Main}>
<IndexRoute component={BlogList} />
<Route path="blogs/new" component={NewBlog} />
<Route path="blogs/:id/edit" component={EditBlog} />
<Route path="blogs/:id" component={Blogpost} />
<Route path='404' component={NotFound404} />
<Route path='*' component={NotFound404} />
</Route>
</Router>,

document.getElementById("app")
);


and here is index.html from
public
directory:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./stylesheets/app.css">
<title>MERN Blog</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>


My express backend:

app.use(express.static(__dirname + '/public'));

.....

//index route
app.get("/api/blogs", function(request, response){
...
});
//show route
app.get("/api/blogs/:id", function(request, response){
...
});

app.get('*', function (request, response){
response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
});


All works fine when I click links - all renders correct.
But when I refresh the same page - I got blank page.
My index.html loads some files - bundle.js etc. And those requests are handled by "*" route from backend - and index.html is alwas returned.




How to make static files handled properly?

Answer

Try using absolute paths in the index.html

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./stylesheets/app.css">
    <title>MERN Blog</title>
</head>

<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>

</html>

The problem using relative paths and browserHistory occurs when you refresh a page in path like /route/x/y/z and it loads index.html then it tries to load relative css (for instance) /route/x/y/z/stylesheets/app.css

When you use absolute paths it will be handled by your express.static

app.use(express.static(__dirname + '/public'));

It will load index.html and tries to load /stylesheets/app.css which will be handled correctly... like this

...
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
...
<script src="/bundle.js"></script>