8

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?

D Vorona
  • 136
  • 1
  • 8

2 Answers2

0

In your webpack file make sure you have:

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

See:

Alternatively, usepath.join( '.' )

Izhaki
  • 23,372
  • 9
  • 69
  • 107
  • I don't think that the intended target for OP is `node` (they're not bundling server-side code). – robertklep Jun 25 '17 at 20:14
  • @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. – Izhaki Jun 25 '17 at 20:51
  • `webpack-dev-middleware` is used build your own [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/), whose purpose is to dynamically bundle and serve _client side_ code. – robertklep Jun 25 '17 at 20:55
  • @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. – Izhaki Jun 25 '17 at 21:23
0

just set the static folder like this

app.use(express.static(__dirname + '/path-to-static-folder'));
Mirza Andriamanamisoa
  • 423
  • 5
  • 16