Extract webpack-dev-server from server.js to npm scripts

[sandhose]

This allows the server.js to be independent from webpack-dev-server. Since it allows to reload the server without breaking the hot-loader, I also added nodemon, in order to automatically reload the server when a file changes.

Technically, the server.js listens to the 8081 port, and the webpack-dev-server (which is listening to 8080) creates a proxy to the server (using the content-base-taget option)

It also allows to have the same index.html file in dev and production environment, because the dev-server and the production-server are listening to the same port

To launch the server with webpack-dev-server and nodemon, use the dev npm script.

PS: Sorry if I did any spelling error in the README file or in this PR, I'm French 😶

[coveralls]

Coverage remained the same at 90.79% when pulling 1e4aa00 on sandhose:webpack-dev-server-script into 81fef42 on pheuter:master.

[pheuter]

I see where you're going with this, and I think it makes sense to allow devs to run the production build as well. However, I am reluctant to add additional dependencies like nodemon, as well as having longer and potentially harder to understand run scripts like webpack-dev-server --content-base-target http://localhost:8081/ --hot --inline --quiet --config=webpack.local.config.js

There currently exists a comment in build/index.html that allows includes the production bundle of the application. What we can do further is serve that file as a static from express.js, and conditionally start the webpack dev server (maybe depending on an environmental variable?).

I'm all for adding this functionality, but I'm also wary of adding additional dependencies and configurations. There exist many react starter kits out there that do that and much more, but I'm trying to keep Essential React as minimal as possible while providing the necessary functionality to start productive development using React.

With that said, if you could refactor the pull request to not change the package.json file and have express serve the production build depending on an env variable or something, that would be a good start :)

[sandhose]

I am reluctant to add additional dependencies like nodemon...

You're right, I'll remove it

... as well as having longer and potentially harder to understand run scripts...

In fact, I think we could do something equivalent in an external file (like hot-loader-server.js, or dev-proxy.js ?) which could be run directly with node, or via npm scripts. The file would look like this:

var WebpackDevServer = require('webpack-dev-server'),
    webpack = require('webpack'),
    config = require('./webpack.local.config');

new WebpackDevServer(config, {
  hot: true,
  inline: true,
  quiet: true,
  contentBase: {
    target: 'http://localhost:' + (process.env.PORT || 8080)
  }
}).listen(process.env.DEV_PORT || 8081, function(err, result) {
  if(err) throw err;
});

The advantages of this solution are that:

• the server in production no longer need to install webpack and webpack-dev-server (which are both required to run the server, even in a production environment)
• the server and the hot-loader are separated, so you can run the server with nodemon if you want (it doesn't have to be installed by default in essential-react), and kill/reload it without breaking the hot-loader
• you don't have to change the index.html if you are in a dev or in a production environment

The npm scripts could be

• dev-proxy: node dev-proxy, which will be equivalent to the actual webpack-dev-server script
• server: node server
• dev: npm run server & npm run dev-proxy

So if the user want to use nodemon (assuming the user has nodemon globally installed) to reload the server, he just has to run nodemon server.js --ignore src/ --ignore build/ and npm run dev-proxy side by side. For that reason, I think it is important to have the webpack-dev-server and the server separated

[kminehart]

I did something similar, though with more of a net deletion.

#53