Replacing webpack-dev-server with express + webpack-dev-middleware/webpack-hot-middleware

Question

I'm currently trying to replace my old setup that was using webpack-dev-server with a more robust solution based on express + webpack-middleware. So I use to run it like this: "webpack-dev-server --content-base public/ --history-api-fallback" but now I'd like to use it like this: "node devServer.js". Here are the details of my current setup.

webpack.config.dev.js:

var path = require('path');
var webpack = require('webpack');
var debug = require('debug');

debug.enable('app:*');

var log = debug('app:webpack');

log('Environment set to development mode.');
var NODE_ENV = process.env.NODE_ENV || 'development';
var DEVELOPMENT = NODE_ENV === 'development';

log('Creating webpack configuration with development settings.');
module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client',
    './src/index',
    './src/scss/main.scss',
  ],
  output: {
    path: path.join(__dirname, 'public/js'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.jsx?/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    },
    {
      test: /\.scss$/,
      loader: 'style!css!sass',
    }]
  },
  compiler: {
    hash_type: 'hash',
    stats: {
      chunks: false,
      chunkModules: false,
      colors: true,
    },
  },
};

devServer.js:

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var debug = require('debug');
// var history = require('connect-history-api-fallback');
var config = require('./webpack.config.dev');
var browserSync = require('browser-sync');

debug.enable('app:*');

var app = express();
var compiler = webpack(config);
var log = debug('app:devServer');

// app.use(history({ verbose: false }));

log('Enabling webpack dev middleware.');
app.use(require('webpack-dev-middleware')(compiler, {
  lazy: false,
  noInfo: true,
  publicPath: config.output.publicPath,
  quiet: false,
  stats: config.compiler.stats,
}));

log('Enabling Webpack Hot Module Replacement (HMR).');
app.use(require('webpack-hot-middleware')(compiler));


log('Redirecting...');
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, '/public/', 'index.html'));
});

app.get('/js/bundle.js', function(req, res) {
    res.sendFile(path.join(__dirname, '/public/js/', 'bundle.js'));
});


var port = 3000;
var hostname = 'localhost';

app.listen(port, hostname, (err) => {
  if (err) {
    log(err);
    return;
  }
  log(`Server is now running at http://${hostname}:${port}.`);
});

var bsPort = 4000;
var bsUI = 4040;
var bsWeInRe = 4444;

browserSync.init({
  proxy: `${hostname}:${port}`,
  port: bsPort,
  ui: {
    port: bsUI,
    weinre: { port: bsWeInRe },
  },
});

Can you tell me where I'm going wrong? I was under impression that I've got all the bases covered, but clearly I'm missing something since despite of being able to access the html and the js, the page is not displaying. :(

Answer 1

You don't need this part:

app.get('/js/bundle.js', function(req, res) {
    res.sendFile(path.join(__dirname, '/public/js/', 'bundle.js'));
});

webpack-dev-server middleware will do that for you. So, I think just removing it will fix it.