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',
    }]
  },
  piler: {
    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 piler = webpack(config);
var log = debug('app:devServer');

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

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

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


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. :(

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',
    }]
  },
  piler: {
    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 piler = webpack(config);
var log = debug('app:devServer');

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

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

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


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. :(

• javascript
• express
• webpack
• webpack-dev-server

3 Answers 3

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.

Try relative paths for static assets , e.g instead of /public/ , use ./public/, as shown:

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'));
});

• And I guess you are sure that where ever this devServer.js is , at exactly same location there are a parallel folder public exists

• You are hitting localhost:3000/ and not localhost:3000

If this does not work try this

app.use(express.static(path.resolve(__dirname, './public'),{
    index: 'index.html'
}));

Something like this is what works for me:

change:

app.use(require('webpack-dev-middleware')(piler, {

to:

var middleware = require('webpack-dev-middleware');
app.use(middleware)(piler, {

Then change your app.get(s) to:

app.get('/js/bundle.js', function(req, res){
  res.write(middleware.fileSystem.readFileSync(req.url));
  res.end();
});

app.get('*', function(req, res){
  res.write(middleware.fileSystem.readFileSync(path.join(__dirname, '/public/', 'index.html'))));
  res.end();
});

I am unable to test your particular configuration so I'm wondering if you'll have issues with the first app.get because you are requesting a different url than you are serving, i.e. '/js/bundle.js' to '/public/js/bundle.js' If so, try path.join(__dirname, '/public/js/bundle.js') instead of req.url.

The second app.get should serve up index.html for any unresolved request which works great for React routing.