add production build

package.json

@@ -4,6 +4,7 @@
   "description": "The web editor for p5.js.",
   "scripts": {
     "start": "BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon index.js",
+    "start:prod": "NODE_ENV=production node index.js",
     "lint": "eslint client server",
     "build": "NODE_ENV=production webpack --config webpack.config.prod.js",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -27,6 +28,7 @@
     "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.8.0",
     "css-loader": "^0.23.1",
+    "cssnano": "^3.7.1",
     "eslint": "^2.13.1",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-plugin-import": "^1.9.2",
@@ -36,6 +38,10 @@
     "file-loader": "^0.8.5",
     "node-sass": "^3.7.0",
     "nodemon": "^1.9.2",
+    "postcss-cssnext": "^2.7.0",
+    "postcss-focus": "^1.0.0",
+    "postcss-loader": "^0.9.1",
+    "postcss-reporter": "^1.3.3",
     "redux-devtools": "^3.3.1",
     "redux-devtools-dock-monitor": "^1.1.1",
     "redux-devtools-log-monitor": "^1.0.11",

server/server.js

@@ -15,10 +15,12 @@ import webpackHotMiddleware from 'webpack-hot-middleware';
 
 const app = new Express();
 
-// add check if production environment here
-const compiler = webpack(config);
-app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
-app.use(webpackHotMiddleware(compiler));
+// Run Webpack dev server in development mode
+if (process.env.NODE_ENV === 'development') {
+  const compiler = webpack(config);
+  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
+  app.use(webpackHotMiddleware(compiler));
+}
 
 // Import all required modules
 import serverConfig from './config';

webpack.config.prod.js

@@ -1,19 +1,19 @@
 var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var cssnext = require('postcss-cssnext');
+var postcssFocus = require('postcss-focus');
+var postcssReporter = require('postcss-reporter');
+var cssnano = require('cssnano');
 
 module.exports = {
-  entry: {
-    app: [
-      './client/index.js'
-    ],
-    vendor: [
-      'react',
-      'react-dom'
-    ]
-  },
+  devtool: 'hidden-source-map',
+
+  entry: [
+    './client/index.js'
+  ],
 
   output: {
-    path: __dirname + '/dist',
+    path: __dirname + '/static/dist',
     filename: 'bundle.js',
     publicPath: '/dist/'
   },
@@ -27,7 +27,7 @@ module.exports = {
       {
         test: /\.scss$/,
         exclude: /node_modules/,
-        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=2&sourceMap!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true!postcss-loader')
+        loaders: ['style', 'css', 'sass', 'postcss']
       },
       {
         test: /\.jsx?$/,
@@ -52,5 +52,18 @@ module.exports = {
         warnings: false
       }
     })
+  ],
+
+  postcss: () => [
+    postcssFocus(),
+    cssnext({
+      browsers: ['last 2 versions', 'IE > 9']
+    }),
+    cssnano({
+      autoprefixer: false
+    }),
+    postcssReporter({
+      clearMessages: true
+    })
   ]
 };