Updated to latest hot module reloading (compatible with Babel6). Move client into app. Remove webpack server

Author: jstclair

.babelrc

@@ -1,9 +1,4 @@
 {
-  "presets": [
-    "es2015", 
-    "react"
-  ],
-  "ignore": [
-    "node_modules"
-  ]
+  "presets": [ "es2015", "react" ],
+  "ignore": [ "node_modules" ]
 }

.eslintrc

@@ -5,6 +5,8 @@
     "es6": true
   },
   "ecmaFeatures": {
-      "modules": true
-  }
+      "modules": true,
+      "jsx": true
+  }, 
+  "plugins": [ "babel", "react" ]
 }

app/.eslintrc

@@ -4,37 +4,9 @@
     "browser": true,
     "es6": true
   },
-  "plugins": [ "react" ],
   "ecmaFeatures": {
       "jsx": true,
       "modules": true
   },
-  "rules": {
-    "react/display-name": [ 1, { "acceptTranspilerName": true }],
-    "react/jsx-boolean-value": 1,
-    "react/jsx-closing-bracket-location": 1,
-    "react/jsx-curly-spacing": 1,
-    "react/jsx-indent-props": 1,
-    "react/jsx-max-props-per-line": 0,
-    "react/jsx-no-duplicate-props": 1,
-    "react/jsx-no-literals": 0,
-    "react/jsx-no-undef": 1,
-    "react/jsx-quotes": 1,
-    "react/jsx-sort-prop-types": 1,
-    "react/jsx-sort-props": 0,
-    "react/jsx-uses-react": 1,
-    "react/jsx-uses-vars": 1,
-    "react/no-danger": 1,
-    "react/no-did-mount-set-state": 1,
-    "react/no-did-update-set-state": 1,
-    "react/no-multi-comp": 1,
-    "react/no-set-state": 1,
-    "react/no-unknown-property": 1,
-    "react/prop-types": 1,
-    "react/react-in-jsx-scope": 1,
-    "react/require-extension": 1,
-    "react/self-closing-comp": 1,
-    "react/sort-comp": 1,
-    "react/wrap-multilines": 1
-  }
+  "plugins": [ "babel", "react" ]
 }

client/client.jsx app/client/client.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import MainComponent from '../app/components/Main.jsx';
+import MainComponent from '../components/Main.jsx';
 
-import '../app/scss/main.scss';
+import '../scss/main.scss';
 
 window.addEventListener('load', () => {
   ReactDOM.render(<MainComponent />, document.getElementById('app-container'));

package.json

@@ -21,31 +21,37 @@
   "author": "Thomas Pedersen",
   "devDependencies": {
     "autoprefixer-loader": "^3.1.0",
-    "babel-eslint": "^5.0.0-beta2",
+    "babel-core": "^6.3.15",
+    "babel-plugin-transform-react-constant-elements": "^6.3.13",
+    "babel-plugin-transform-react-inline-elements": "^6.3.13",
+    "babel-eslint": "^5.0.0-beta4",
     "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
+    "babel-plugin-react-transform": "^2.0.0-beta1",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
     "css-loader": "^0.23.0",
-    "eslint": "^1.10.2",
+    "eslint": "^1.10.3",
     "eslint-loader": "^1.1.1",
-    "eslint-plugin-react": "^3.10.0",
+    "eslint-plugin-babel": "^3.0.0",
+    "eslint-plugin-react": "^3.11.3",
     "extract-text-webpack-plugin": "^0.9.1",
     "file-loader": "^0.8.5",
     "merge": "^1.2.0",
+    "node-sass": "^3.4.2",
+    "react-transform-catch-errors": "^1.0.0",
+    "react-transform-hmr": "^1.0.1",
+    "redbox-react": "^1.2.0",
     "rimraf": "^2.4.4",
     "sass-loader": "^3.1.2",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.7",
     "webpack": "^1.12.9",
     "webpack-dev-middleware": "^1.4.0",
-    "webpack-dev-server": "^1.14.0",
     "webpack-hot-middleware": "^2.6.0"
   },
   "dependencies": {
-    "babel-core": "^6.2.4",
     "body-parser": "^1.14.1",
     "express": "^4.11.2",
-    "node-sass": "^3.4.2",
     "react": "^0.14.3",
     "react-dom": "^0.14.3"
   }

server/server.js

@@ -35,7 +35,10 @@ const renderPage = (html) => {
 
 if (process.env.NODE_ENV !== 'production') {
   const compiler = webpack(webpackConfig);
-  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }));
+  app.use(webpackDevMiddleware(compiler, { 
+    noInfo: true, 
+    publicPath: webpackConfig.output.publicPath })
+  );
   app.use(webpackHotMiddleware(compiler));
 } else {
   app.use('/static', express.static(__dirname + '/../dist'));
@@ -47,7 +50,7 @@ app.use((req, res, next) => {
 });
 
 const server = app.listen(3002, () => {
-  const host =server.address().address;
+  const host = server.address().address;
   const port = server.address().port;
   console.log(`Listening at http://${host}:${port}`);
 });

server/webpack.js

@@ -37,10 +37,33 @@ var webpackConfig = {
   ]
 };
 
+var babelSettings = {
+  presets: ['react', 'es2015'],
+  env: {
+    development: {
+      plugins: [
+        ['react-transform', {
+          transforms: [
+            { 
+              transform: 'react-transform-hmr',
+              imports: [ 'react'],
+              locals: [ 'module' ]
+            },
+            {
+              transform: 'react-transform-catch-errors',
+              imports: [ 'react', 'redbox-react' ]
+            }
+          ]
+        }]
+      ]
+    }
+  }
+};
+
 if (process.env.NODE_ENV === 'production') {
   webpackConfig = merge(webpackConfig, {
     entry: [
-      './client/client.jsx'
+      './app/client/client.jsx'
     ],
     module: {
       loaders: [
@@ -49,7 +72,11 @@ if (process.env.NODE_ENV === 'production') {
           loader: 'babel', 
           exclude: /node_modules/, 
           query: { 
-            presets: ['react', 'es2015'] 
+            presets: ['react', 'es2015'],
+            plugins: [
+              "transform-react-inline-elements",
+              "transform-react-constant-elements"
+            ] 
           },
           include: __dirname
         },
@@ -66,24 +93,23 @@ if (process.env.NODE_ENV === 'production') {
         }
       }),
       new ExtractTextPlugin('app.css'),
-      new webpack.optimize.UglifyJsPlugin({ minimize: true })
+      new webpack.optimize.UglifyJsPlugin({
+        minimize: true, 
+        compress: { 
+          warnings: false
+        }
+      })
     ]
   });
 } else {
   webpackConfig = merge(webpackConfig, {
     devtool: 'inline-source-map',
     module: {
-      preLoaders: [
-        { test: /\.(js|jsx)$/, loaders: ['eslint'] }
-      ],
       loaders: [
         { 
           test: /\.(js|jsx)$/, 
-          loader: 'babel', 
-          exclude: /node_modules/, 
-          query: { 
-            presets: ['react', 'es2015'] 
-          } 
+          loaders: ['babel?' + JSON.stringify(babelSettings)], 
+          exclude: /node_modules/
         },
         { 
           test: /\.scss$/, 
@@ -93,7 +119,7 @@ if (process.env.NODE_ENV === 'production') {
     },
     entry: [
       'webpack-hot-middleware/client',
-      './client/client.jsx'
+      './app/client/client.jsx'
     ],
     plugins: [
       new webpack.HotModuleReplacementPlugin()