Cannot refresh page in production when compiled with webpack

Question

I am building an app using node.js + express.js + react.js and I'm using webpack to compile the client side code. The problem I am having is after my client side code is compiled with webpack and I run my app, I cannot refresh the page.

My code:

My webpack compiles my files into /dist/index.html , my app runs on port 3000, and all client side routes are prefixed with /admin .

 app.get('/', function(req, res) {
    res.render('dist/index.html');
});

When I go to localhost:3000 in the browser and click around the links, the app works fine. However, if I go to, as an example, the about page:

localhost:3000/admin/about

And I refresh, I get the error Cannot GET /admin/about .

I believe the reason is my express router only knows about the / route... so If I refresh directly onto a route like /admin/about , express doesn't know what to render so my solution was to include a "catch all" route:

app.get('*', function(req, res) {
  res.render('dist/index.html');
});

However, this keeps giving me the Error: Failed to lookup view "dist/index.html" error.

Can someone help?

Thanks in advance!

Answer 1

经过研究，我发现解决方案不是res.render而是res.sendFile ：

res.sendFile(path.join(__dirname, '/dist/index.html'));