Webpack-dev-middleware returns a 404 when I refresh

Question

I'm was trying to set up webpack-dev-middleware with a react-redux-app. If I refreshed the homepage, I received a 200 status code. But if I refreshed on any other page ('/signin'), I would get a 404 error.

After some Googling, I found this on Github:

var express = require('express');
var app = express();
var webpack = require('webpack');
var path = require('path');

var compiler = webpack(require('./webpack.config.js'));

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: '/'
}));

app.use('*', function (req, res, next) {
  var filename = path.join(compiler.outputPath,'index.html');
  compiler.outputFileSystem.readFile(filename, function(err, result){
    if (err) {
      return next(err);
    }
    res.set('content-type','text/html');
    res.send(result);
    res.end();
  });
});

app.listen(3000);

This works, but I'm not sure why. I think that index.html is being served to memory, which isn't a issue on the homepage, but for all other pages. Specifically, I can't figure out what compiler.outputFilesystem does. When I console.log(compiler.outputFilesystem), I get:

outputFileSystem: MemoryFileSystem { data: {} }

How is an object with an empty property able to serve index.html to memory?

Webpack-dev-middleware returns a 404 when I refresh

0 Answers0