Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

230
Views
Webpack, Dev-Middleware, and Static Files

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?

about 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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( '.' )

about 4 years ago · Santiago Trujillo Report

0

just set the static folder like this

app.use(express.static(__dirname + '/path-to-static-folder'));
about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!