Webpack, Dev-Middleware, and Static Files

Question

I've got a Webpack/React/Redux project served with Express and I'm having some trouble understanding how they fit together. My Express app runs Webpack and serves my root index.html file like so:

const app = express();
const server = require("http").createServer(app);

app.use(bodyParser.json());
app.use("/some/path", express.static(path.join(__dirname, "/public")));

// webpack middleware
const compiler = webpack(webpackConfig);

const webpackDevMid = require("webpack-dev-middleware");
const webpackHotMid = require("webpack-hot-middleware");

app.use(webpackDevMid(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath  // '/static/'
}));

app.use(webpackHotMid(compiler));

app.get("/", (req, res) => {
    if (!req.cookies.access_token) return res.redirect("/login");
    return res.sendFile(path.join(__dirname, "index.html"));
});

My root index file then has the "root" tag in the body and the Webpack "/static/bundle.js" in a script tag. The root tag points to my index.js file bundled in bundle.js and everything renders correctly. This all works fine.

My issue is that I'm trying to include my favicon.ico in my root index.html, which is not bundled up with Webpack, so I want to serve it as a static file with Express, which I usually do with the code:

app.use("/some/path", express.static(path.join(__dirname, "/public")));

Unfortunately, this folder is not getting served to the client, and I cannot access my favicon outside of the Webpack bundle (which my index.html has no discretionary access to). In fact, nothing I try to expose to the client in this way is working. Is there something I'm not understanding about webpack-dev-middleware, or the way an Express server works with Webpack? What gives?

Carman

Answer 1

In your webpack file make sure you have:

target: 'node',
node: {
    __dirname: false,
},

See:

• https://github.com/webpack/webpack/issues/1599
• https://github.com/webpack/docs/wiki/configuration#node

Alternatively, usepath.join( '.' )

Hordein

I don't think that the intended target for OP is node (they're not bundling server-side code). – Terracotta

@robertklep, you may be right, but since the script clearly using express it is a server side script. If webpack builds anything, it will inject its own __dirname. I guess we'll have to see what the OP response is. – Hordein

webpack-dev-middleware is used build your own webpack-dev-server, whose purpose is to dynamically bundle and serve client side code. – Terracotta

@robertklep, that's all right. But the OP may still bundle the server side code with webpack, in which case __dirname may malfunction. I've replied to the issue as I had a similar issue and I'm using webpack to bundle my server code. If the OP doesn't bundle the server with webpack, then the answer would not help. It's a long shot alright, but it might be the case. – Hordein

Answer 2

just set the static folder like this

app.use(express.static(__dirname + '/path-to-static-folder'));

Dodgem