1

Project structure:

  1. Webpack is building the app into the public folder
  2. At the same time I have some static assets located there, like: public/assets/font-awesome-4.7.0/css/font-awesome.css

What I want:

  1. I want to run my express app with the webpack-dev-middleware for the dev purposes
  2. I want that all the requests for the static assets (which are not processed by webpack) were served from the public folder

How I tried to do that:

first attempt

app.use(require('webpack-dev-middleware')(compiler, {
    stats: { colors: true }
}));

app.use(require('webpack-hot-middleware')(compiler));
app.use('/', feathers.static(app.get('public'))); // express.static

This works good, until you have index.html in the public folder. If you have it there - the static one would be served, NOT the one which is the actual version according to the webpack-dev-middleware.

second attempt

Then I thought - probably I must use express.static only for the production case, I removed it. Now I was not able to open /assets/font-awesome-4.7.0/css/font-awesome.css

third attempt (hack which works right now)

Finally I made it work, but I'm not satisfied with the current solution. I manually put all the assets directory into the webpack realm by extending the webpack config with this:

new CopyWebpackPlugin([
            { from: 'public/assets/', to: 'assets' },
            { from: 'node_modules/bootstrap/dist/', to: 'vendor/bootstrap/dist' }
        ]),

however this method assumes that one need to point every static file which he wants to be served by webpack-dev-middleware

Any thoughts are appreciated.

Regards,

Pavel Polyakov
  • 866
  • 1
  • 8
  • 13

0 Answers0