set up proxy for web pack bundle. Development and Production can be d…

…one without hassle.

README.md

@@ -41,18 +41,11 @@ cd stylechecker
 gradlew run
 ```
 
-Second, we need to run webpack dev server:
-
-```
-cd website
-npm run dev
-```
-
-Third, we need to run backend server:
+Second, we need to run backend server:
 
 ```
 cd webiste
-npm run serve
+npm run dev
 ```
 
 Finally, open your browser and go to `http://localhost:8080`. You should see a nice React application in your browser. 

website/.gitignore

@@ -27,4 +27,4 @@ build/Release
 node_modules
 
 # Webpack autogenerate files
-public/bundle.js
+public/build

website/backend/app.js

@@ -4,11 +4,15 @@ import path from 'path';
 import bodyParser from 'body-parser';
 import jadeAutoRouting from './jadeAutoRouting';
 import submitSourceCode from './submitSourceCode';
+import httpProxy from 'http-proxy';
+import bundle from './bundle.js';
 
 let app = express();
 
+let isProduction = process.env.NODE_ENV === 'production';
+
 // setting port and views
-const PORT = process.env.PORT || 8080;
+const PORT = isProduction ? process.env.PORT : 8080;
 const VIEWS_PATH = path.join(__dirname, '../views');
 
 app.set('port', PORT);
@@ -36,6 +40,32 @@ jadeAutoRouting(app);
 // Routing
 app.post('/submitSourceCode', submitSourceCode);
 
+let proxy = httpProxy.createProxyServer();
+
+// We only want to run the workflow when not in production
+if (!isProduction) {
+  // We require the bundler inside the if block because
+  // it is only needed in a development environment. Later
+  // you will see why this is a good idea
+  bundle();
+
+  // Any requests to localhost:3000/build is proxied
+  // to webpack-dev-server
+  app.all('/build/*', (req, res) => {
+    proxy.web(req, res, {
+      target: 'http://localhost:8090'
+    });
+  });
+
+}
+
+// It is important to catch any errors from the proxy or the
+// server will crash. An example of this is connecting to the
+// server when webpack is bundling
+proxy.on('error', (error) => {
+  console.log('Could not connect to proxy, please try again...');
+});
+
 // Create and start the server
 let server = http.createServer(app);
 

website/backend/bundle.js

@@ -0,0 +1,51 @@
+import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import webpackConfig from './../webpack.config.js';
+import path from 'path';
+import fs from 'fs';
+
+export default function() {
+
+  // First we fire up Webpack an pass in the configuration we
+  // created
+  let bundleStart = null;
+  let compiler = webpack(webpackConfig);
+
+  // We give notice in the terminal when it starts bundling and
+  // set the time it started
+  compiler.plugin('compile', () => {
+    console.log('Bundling...');
+    bundleStart = Date.now();
+  });
+
+  // We also give notice when it is done compiling, including the
+  // time it took. Nice to have
+  compiler.plugin('done', () => {
+    console.log('Bundled in ' + (Date.now() - bundleStart) + 'ms!');
+  });
+
+  var bundler = new WebpackDevServer(compiler, {
+
+    // We need to tell Webpack to serve our bundled application
+    // from the build path. When proxying:
+    // http://localhost:3000/build -> http://localhost:8080/build
+    publicPath: '/build/',
+
+    // Configure hot replacement
+    hot: true,
+
+    // The rest is terminal configurations
+    quiet: false,
+    noInfo: true,
+    stats: {
+      colors: true
+    }
+  });
+
+  // We fire up the development server and give notice in the terminal
+  // that we are starting the initial bundle
+  bundler.listen(8090, 'localhost', () => {
+    console.log('Bundling project, please wait...');
+  });
+
+};

website/package.json

@@ -8,9 +8,9 @@
   "description": "Software Quality Analysis Tool website",
   "main": "index.js",
   "scripts": {
-    "start": "npm run serve | npm run dev",
-    "serve": "node ./backend/babel_index.js",
-    "dev": "webpack-dev-server --progress --colors --port 8090"
+    "dev": "node ./backend/babel_index.js",
+    "deploy": "NODE_ENV=production webpack --config webpack.production.config.js",
+    "start": "NODE_ENV=production PORT=8080 node ./backend/babel_index.js"
   },
   "repository": {
     "type": "git",
@@ -33,6 +33,7 @@
     "es6-promise": "^3.0.2",
     "express": "^4.13.3",
     "grpc": "^0.10.1",
+    "http-proxy": "^1.12.0",
     "jade": "^1.11.0",
     "node-dir": "^0.1.9",
     "radium": "^0.14.1",
@@ -49,7 +50,7 @@
     "grunt": "^0.4.5",
     "grunt-babel": "^5.0.1",
     "jsx-loader": "^0.13.2",
-    "webpack": "^1.12.1",
+    "webpack": "^1.12.9",
     "webpack-dev-server": "^1.11.0"
   }
 }

website/views/index.jade

@@ -14,14 +14,8 @@ html
   body
     #content
 
-    // this is where the root react component will get rendered
-    // include the webpack-dev-server script so our scripts get reloaded when we make a change
-    // we'll run the webpack dev server on port 8090, so make sure it is correct
-    script(src='http://localhost:8090/webpack-dev-server.js')
-
-    // include the bundle that contains all our scripts, produced by webpack
-    // the bundle is served by the webpack-dev-server, so serve it also from localhost:8090
-    script(type='text/javascript', src='http://localhost:8090/assets/bundle.js')
+    // webpack bundle
+    script(type='text/javascript', src='/build/bundle.js', charset='utf-8')
 
     script(src='https://code.jquery.com/jquery-1.10.2.min.js')
     script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js')

website/webpack.config.js

@@ -1,13 +1,26 @@
 var path = require('path');
+var webpack = require('webpack');
+
+var buildPath = path.resolve(__dirname, 'public', 'build');
+var mainPath = path.resolve(__dirname, 'frontend', 'index.jsx');
 
 module.exports = {
-  entry: './frontend/index.jsx',
+  // Makes sure errors in console map to the correct file
+  // and line number
+  devtool: 'eval',
+  entry: mainPath,
   output: {
-    path: path.join(__dirname, './public/'),
+    // We need to give Webpack a path. It does not actually need it,
+    // because files are kept in memory in webpack-dev-server, but an
+    // error will occur if nothing is specified. We use the buildPath
+    // as that points to where the files will eventually be bundled
+    // in production
+    path: buildPath,
     filename: 'bundle.js',
-    // at this directory our bundle file will be available
-    // make sure port 8090 is used when launching webpack-dev-server
-    publicPath: 'http://localhost:8090/assets'
+
+    // Everything related to Webpack should go through a build path,
+    // localhost:8080/build. That makes proxying easier to handle
+    publicPath: '/build/'
   },
   module: {
     loaders: [{
@@ -30,5 +43,8 @@ module.exports = {
   resolve: {
     // you can now require('file') instead of require('file.coffee')
     extensions: ['', '.js', '.jsx']
-  }
+  },
+  // We have to manually add the Hot Replacement plugin when running
+  // from Node
+  plugins: [ new webpack.HotModuleReplacementPlugin() ]
 };

website/webpack.production.config.js

@@ -0,0 +1,36 @@
+var path = require('path');
+var webpack = require('webpack');
+
+var buildPath = path.resolve(__dirname, 'public', 'build');
+var mainPath = path.resolve(__dirname, 'frontend', 'index.jsx');
+
+module.exports = {
+  devtool: 'source-map',
+  entry: mainPath,
+  output: {
+    path: buildPath,
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [{
+      test: /\.css$/,
+      loader: 'style!css'
+    }, {
+      // tell webpack to use jsx-loader for all *.jsx files
+      test: /\.jsx$/,
+      loaders: ['jsx-loader?insertPragma=React.DOM&harmony', 'babel?stage=1']
+    }, {
+      test: /\.js$/,
+      loaders: ['babel?stage=1']
+    }]
+  },
+  externals: {
+    // don't bundle the 'react' npm package with our bundle.js
+    // but get it from a global 'React' variable
+    'react': 'React'
+  },
+  resolve: {
+    // you can now require('file') instead of require('file.coffee')
+    extensions: ['', '.js', '.jsx']
+  }
+};