Setup webpack dev server

Procfile.dev

@@ -1,2 +1,3 @@
 web: bundle exec rails server
-client: sh -c 'rm app/assets/webpack/* || true && cd client && yarn run build:development'
+client: cd client && yarn build:development
+test: cd client && yarn build:test

README.md

@@ -47,7 +47,7 @@ GoRails should help you to get started on Ruby on Rails.
  4. Install javascript dependencies
 
     ~~~ sh
-    $ cd client/ && yarn; cd -
+    $ cd client && yarn; cd -
     ~~~
 
  5. Create and seed the database
@@ -61,10 +61,13 @@ GoRails should help you to get started on Ruby on Rails.
     ~~~ sh
     $ foreman start
     ~~~
-    Or start the rails server yourself and:
+    Or if you are not using foreman:
     ~~~sh
+    # Start the webpack dev server:
+    $ cd client && yarn build:development
+
     # Run this command to compile the assets before running the test suite.
-    $ cd client/ && yarn build:development
+    $ cd client && yarn build:test
     ~~~
 
  7. You're all set! Simply login with the default username and password:

client/package.json

@@ -7,9 +7,9 @@
     "yarn": "^0.20.3"
   },
   "scripts": {
-    "build:test": "export NODE_ENV=test && yarn run build:translations && webpack",
+    "build:test": "export NODE_ENV=test && yarn run build:translations && webpack -w",
     "build:production": "export NODE_ENV=production && yarn run build:translations && webpack -p",
-    "build:development": "yarn run build:translations && webpack -w",
+    "build:development": "yarn run build:translations && webpack-dev-server",
     "build:translations": "babel-node scripts/aggregate-translations.js",
     "extract-translations": "yarn run build:production && babel-node scripts/extract-translations.js",
     "lint": "eslint . --ext .js --ext .jsx --cache",
@@ -70,7 +70,8 @@
     "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-import": "^2.0.1",
     "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.4.1"
+    "eslint-plugin-react": "^6.4.1",
+    "webpack-dev-server": "^2.4.1"
   },
   "license": "MIT",
   "repository": "git+https://github.com/Coursemology/coursemology2.git",

client/webpack.config.js

@@ -3,7 +3,12 @@ const path = require('path');
 const WebpackMd5Hash = require('webpack-md5-hash');
 const StatsPlugin = require('stats-webpack-plugin');
 
-const devBuild = process.env.NODE_ENV !== 'production';
+const env = process.env.NODE_ENV || 'development';
+const production = env === 'production';
+const development = env === 'development';
+
+// must match config.webpack.dev_server.port
+const devServerPort = 8080;
 
 const config = {
   entry: {
@@ -28,9 +33,9 @@ const config = {
   },
 
   output: {
-    filename: '[name]-[chunkhash].js',
-    chunkFilename: '[name]-[chunkhash].js',
-    path: '../public/webpack',
+    filename: production ? '[name]-[chunkhash].js' : '[name].js',
+    chunkFilename: production ? '[name]-[chunkhash].js' : '[name].js',
+    path: path.join(__dirname, '..', 'public', 'webpack'),
     publicPath: '/webpack/',
   },
 
@@ -102,11 +107,16 @@ const config = {
   },
 };
 
-module.exports = config;
-
-if (devBuild) {
-  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
-  module.exports.devtool = 'eval-source-map';
+if (development) {
+  config.devServer = {
+    compress: true,
+    port: devServerPort,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+  };
+  config.output.publicPath = `//localhost:${devServerPort}/webpack/`;
+  config.devtool = 'cheap-module-eval-source-map';
 } else {
-  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
+  console.log(`\nWebpack ${env} build for Rails...`); // eslint-disable-line no-console
 }
+
+module.exports = config;