1
2
3
4
5
6
7
8
9
/* snip */
"scripts": {
  "start": "node app/run.js",
  "build": "webpack --config webpack.production.config.js",
  "test": "./node_modules/.bin/mocha --reporter spec --compilers js:babel-core/register './test/**/*.js' ",
  "test-cov": "./node_modules/.bin/babel-node ./node_modules/.bin/babel-istanbul cover ./node_modules/.bin/_mocha -- -R spec './test/**/*.js'",
  "lint": "./node_modules/.bin/eslint -c .eslintrc -o ./reports/eslint.xml -f checkstyle app/**/*"
},
/* snip */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * A Babel wrapper so we can use ES6 on our server configuration file
 * and subsequent files.
 * Babel transpiles ES6 and JSX to ES5 so node.js runtime is able to
 * understand it.
 *
 * After registering the babel hook, we call our development-server
 * application.
 */
/* eslint-disable */
require('babel-core/register')();
var devServer = require('./development-server');
devServer.run();
/* eslint-enable */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/**
 * development-server.js
 * Because we have registered a babel-hook to our application
 * we are able to use ES6 imports in our development server
 * configuration file.
 */

import Webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import config from '../webpack.config';
/* eslint-disable */
export function run() {
  let bundleStart = null;

  /**
   * First we fire up Webpack via code using the configuration we imported
   */
  const compiler = Webpack(config);

  compiler.plugin('compile', () => {
    console.log('Bundling...');
    bundleStart = Date.now();
  });

  compiler.plugin('done', () => {
    console.log('Bundled in ' + (Date.now() - bundleStart) + 'ms!');
  });

  /**
   * We configure webpack dev server. This beast will be the heart
   * of our development cycle when we create the frontend of our application
   */
  const bundler = new WebpackDevServer(compiler, {

    /**
     * Context path where webpack bundled resources are served from. Should match server config
     * (for example <contextPath>/demoApp</contextPath>)
     * /app/dist/ is the source of our bundled app. Since that is the only folder we are serving
     * through dev server, we can hardcode that in.
     */
    publicPath: '/demoApp/app/dist/',

    /**
     * We create a proxy with our dev-server and serve our bundled resources through that.
     *
     * In webpack config we inject webpack-dev-server and hot-reloader to our bundle.
     * To make full use of this functionality when developing we create a lightweight node.js
     * development server that we use as our main entry point to the application. Instead of hitting
     * localhost:8080 with your browser you hit the port of this development server. The dev-server
     * passes through all requests to our Spring application, apart from the ones we have defined.
     * In this case every request endpoint which does not match /dist/bundle.js will be going straight to
     * localhost:8080, in case the request is calling for /dist/*.js the dev-server will serve
     * that resource instead.
     */
    proxy: [{
      path: /(?!bundle.js)$/,
      target: 'http://localhost:8080/'
    }],

    /**
     * We enable hot reloading to our dev-server. This means that everytime you hit ctrl+s
     * to save your file dev-server will notice that and hot-swap/rebundle the application.
     * After that dev-server will notify the browser which will be updated.
    hot: true,
    quiet: false,
    noInfo: true,
    stats: {
      colors: true
    }
  });

  /**
   * Finally we fire up our configured dev-server and start listening the port 3000.
   * This is the endpoint where we should point our browsers into and where the
   * dev-server will proxy our requests to our spring server.
   */
  bundler.listen(3000, 'localhost', () => {
    console.log('Bundling project, please wait...');
  });
}
/* eslint-enable */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/**
 * Development config file for webpack
 * Creates two bundles:
 * 1. bundle.js -> Our application
 * 2. vendor.js -> Vendor bundle containing libraries
 *
 * Injects webpack-dev-server to our page so hot loading
 * of our application is possible.
 */

var path = require('path');
var Webpack = require('webpack');
var buildPath = path.resolve(__dirname, 'dist');

module.exports = {
  /**
   * Key, value config defining the entry points to our application.
   * 1. Bundle entry contains our application entry point and webpack-dev-server entry points.
   * Dev-server is added to the bundle so our application can be hot reloaded while developing
   *
   * 2. vendor entry contains vendor libraries from node_modules. Every time for example react is
   * required/imported webpack replaces that with a module from our vendor bundle
   */
  entry: {
    bundle: [
      'webpack-dev-server/client?http://0.0.0.0:3000',
      'webpack/hot/dev-server',
      './app/index.js'
    ],
    vendor: ['react']
  },

  /**
   * Output files from our build process. [name].js (or [id].js) will create a file
   * based on the key value of entry point configuration.
   */
  output: {
    path: buildPath,
    filename: '[name].js',
    publicPath: '/'
  },

  /**
   * Additional loaders that webpack will run against the bundle it creates.
   * For our production build we use babel and eslint.
   *
   * React hot loader implements hot loading functionality for our react components.
   * This way when running our development server (dev-server) we can modify files and
   * the dev-server will refresh our application keeping the state intact.
   *
   * Babel transpiles ES6 and JSX files to ES5 javascript so it is compatible
   * to current browser versions.
   *
   * Eslint runs static analysis against our code and errors or warns in case
   * we have written possibly bad code.
   */
  module: {
    loaders: [
      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'react-hot-loader'},
      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'eslint-loader'}
    ]
  },

  // Eslint config file location
  eslint: {
    configFile: './.eslintrc'
  },

  /**
   * We tell webpack to create a source map for our devtools. Source maps are supported
   * by both Chrome and Firefox.
   */
  devtool: 'source-map',

  /**
   * Our additional plugins to be used during the build process
   */
  plugins: [

    // HotModuleReplacement runs on our dev server and hot swap new code
    // when changes to the codebase is made during development
    new Webpack.HotModuleReplacementPlugin(),

    // NoErrors plugin makes sure that build process is run only when
    // there are no errors in the code.
    new Webpack.NoErrorsPlugin()
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/**
 * Production config file for webpack
 * Creates two bundles:
 * 1. bundle.js -> Our application
 * 2. vendor.js -> Vendor bundle containing libraries
 *
 */
var path = require('path');
var Webpack = require('webpack');
var buildPath = path.resolve(__dirname, 'dist');

module.exports = {
  /**
   *  Key, value config defining the entry points to our application.
   *  1. bundle entry contains everything that is required by ./app/index.js and its' descendants
   *  2. vendor entry contains vendor libraries from node_modules. Every time for example react is
   *  required/imported webpack replaces that with a module from our vendor bundle
   *
   *  We can define as many entry points as we want. This way we can split out our application to
   *  different pages and include only needed code to those pages.
   */
  entry: {
    bundle: './app/index.js',
    vendor: ['react']
  },
  /**
   * The output defined contains only our bundle, the code from our application.
   * Created bundle will be output to /dist folder and will be called bundle.js
   * In case we would have multiple chunks we can simply name the output filename
   * as [name].js and the bundled file would be named after the key from entry config.
   * (See webpack.config.js for this.)
   */
  output: {
    path: buildPath,
    filename: 'bundle.js',
    publicPath: '/'
  },

  /**
   * Additional loaders that webpack will run against then bundle it creates.
   * For our production build we use babel and eslint.
   *
   * Babel transpiles ES6 and JSX files to ES5 javascript so it is compatible
   * to current browser versions.
   *
   * Eslint runs static analysis against our code and errors or warns in case
   * we have written possibly bad code.
   */
  module: {
    loaders: [
      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
      {test: /\.jsx?$/, exclude: /node_modules/, loader: 'eslint-loader'}
    ]
  },
  // Eslint config file location
  eslint: {
    configFile: './.eslintrc'
  },

  /**
   * Our additional plugins to be used during the build process
   */
  plugins: [
    // Chunk plugin makes the work of pointing our chunked bundle to correct
    // vendor bundle location
    new Webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),

    // Uglify JS minimizes our application bundle
    new Webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    }),

    // Deduping removes duplicated dependencies in case we have accidentally
    // required them multiple times. Decreases bundle size.
    new Webpack.optimize.DedupePlugin(),

    // NoErrors stops bundling in case our code errors out.
    new Webpack.NoErrorsPlugin()
  ]
};