Initial version of dashboard refactoring.

- Adds Webpack and hot reload - Adds react router - Writes react code on es6 style and uses babel to translate it to es5
umrum · Jun 20, 2015 · bf7f8d5 · rafaelverger · Jun 20, 2015 · helielson
1 parent e7cd38b
commit bf7f8d5
Show file tree

Hide file tree

Showing 9 changed files with 338 additions and 3 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,8 @@
+{
+  "extends": ["standard", "standard-react"],
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "mocha": true
+  }
+}
diff --git a/app/routes/dashboard.js b/app/routes/dashboard.js
@@ -3,6 +3,19 @@ var api = require('../ext/redis'),
     auth = require('../../config/middlewares/authorization');
 
 module.exports = function(app){
+    app.get('/v1/dashboard/*', auth.redirectAnonymous, function(req, res) {
+       res.render('dashboard.html');
+    });
+
+
+    app.get('/app.js', auth.redirectAnonymous, function(req, res) {
+      if (process.env.PRODUCTION) {
+        res.sendFile(__dirname + '../../build/app.js');
+      } else {
+        res.redirect('//localhost:8080/app.js');
+      }
+    });
+
     app.get('/dashboard', auth.redirectAnonymous, function(req, res) {
         Site.find({creator: req.user.username}, function(err, sites) {
             if (err) {

diff --git a/app/views/dashboard.html b/app/views/dashboard.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+  <div id="app-root"></div>
+  <script src="/app.js"></script>
+</body>
+</html>
diff --git a/appv2/src/main.jsx b/appv2/src/main.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import Router from "react-router";
+
+import DashboardRouter from "./routers/dashboard";
+
+
+// ID of the DOM element to mount app on
+const DOM_APP_EL_ID = "app-root";
+
+let routes = DashboardRouter.getRoutes();
+
+// Start the router
+Router.run(routes, (Handler, state) => {
+    React.render(<Handler />, document.getElementById(DOM_APP_EL_ID));
+});
diff --git a/appv2/src/pages/index.jsx b/appv2/src/pages/index.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+export default class IndexPage extends React.Component {
+  componentWillMount() {
+    console.log("[IndexPage] will mount with server response: ", this.props.data);
+  }
+
+  render() {
+    return (
+      <div id="index-page">
+        <h1>IndexPage</h1>
+      </div>
+    );
+  }
+}
diff --git a/appv2/src/routers/dashboard.jsx b/appv2/src/routers/dashboard.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { Route, DefaultRoute, RouteHandler, Link } from "react-router";
+
+import IndexPage from "../pages/index";
+
+
+export default class DashboardRouter extends React.Component {
+  render() {
+    return (
+      <div id="container">
+        <div id="navigation">
+          <header>
+            <ul>
+              <li><a href="#">Home</a></li>
+            </ul>
+          </header>
+        </div>
+
+        <div id="main">
+          <RouteHandler {...this.props} />
+        </div>
+      </div>
+    );
+  }
+}
+
+DashboardRouter.getRoutes = function() {
+  return (
+    <Route name="dashboard" path="/" handler={DashboardRouter}>
+      <DefaultRoute name="index" handler={IndexPage} />
+    </Route>
+  );
+}
diff --git a/package.json b/package.json
@@ -6,22 +6,30 @@
   "scripts": {
     "test": "./node_modules/.bin/grunt unittest",
     "compile": "npm install && ./node_modules/.bin/grunt install build",
-    "pm2-start": "pm2 kill && pm2 start pm2-start.json"
+    "pm2-start": "pm2 kill && pm2 start pm2-start.json",
+    "build": "webpack --config webpack.build.js --bail -p",
+    "dev": "webpack-dev-server --history-api-fallback --hot --inline --progress"
   },
   "repository": {
     "type": "git",
     "url": "git@github.com:umrum/umrum.git"
   },
   "dependencies": {
     "body-parser": "~1.4.3",
+    "babel": "^5.5.8",
+    "babel-core": "^5.5.8",
+    "babel-loader": "^5.1.4",
+    "babel-runtime": "^5.5.8",
     "compression": "~1.0.8",
     "connect-mongo": "~0.4.0",
     "cookie-parser": "~1.3.2",
     "express": "~4.0.0",
     "cookie-session": "~1.1.0",
+    "extract-text-webpack-plugin": "^0.8.2",
     "filewalker": "~0.1.2",
     "hiredis": "~0.4.0",
     "html-minifier": "0.6.2",
+    "html-webpack-plugin": "^1.5.2",
     "mongoose": "~3.8.3",
     "morgan": "~1.1.1",
     "newrelic": "~1.5.0",
@@ -32,12 +40,18 @@
     "redis": "~0.12.1",
     "then-redis": "~1.3.0",
     "serve-static": "~1.3.1",
-    "socket.io": "~1.3.5"
+    "socket.io": "~1.3.5",
+    "webpack": "^1.9.11"
   },
   "engines": {
     "node": "0.12.x"
   },
   "devDependencies": {
+    "babel-eslint": "^3.1.15",
+    "eslint": "^0.23.0",
+    "eslint-config-standard": "^3.2.0",
+    "eslint-config-standard-react": "^1.0.0",
+    "eslint-plugin-react": "^2.5.2",
     "grunt": "~0.4.5",
     "grunt-autoprefixer": "~3.0.0",
     "grunt-bower-installer": "~0.3.6",
@@ -55,10 +69,14 @@
     "mocha": "~2.2.5",
     "mocha-traceur": "^2.1.0",
     "nodemon": "~1.3.7",
+    "react-hot-loader": "^1.2.7",
+    "react-router": "^0.13.3",
     "proxyquire": "~1.5.0",
     "sinon": "~1.14.1",
+    "style-loader": "^0.12.3",
     "supertest": "~1.0.1",
-    "traceur": "0.0.90"
+    "traceur": "0.0.90",
+    "webpack-dev-server": "^1.9.0"
   },
   "author": "Frontend Bahia",
   "license": "BSD"

diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,7 @@
+/**
+ * Webpack config for development
+ */
+module.exports = require('./webpack.make')({
+  BUILD: false,
+  TEST: false
+});
diff --git a/webpack.make.js b/webpack.make.js
@@ -0,0 +1,215 @@
+// Modules
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+/**
+ * Make webpack config
+ * @param {object} options Builder options
+ * @param {boolean} options.TEST Generate a test config
+ * @param {boolean} options.BUILD Generate a build config
+ * @returns {object} Webpack configuration object
+ */
+module.exports = function makeWebpackConfig (options) {
+  /**
+   * Environment type
+   * BUILD is for generating minified builds
+   * TEST is for generating test builds
+   */
+  var BUILD = !!options.BUILD
+  var TEST = !!options.TEST
+
+  /**
+   * Environment values
+   */
+  var NODE_ENV = process.env.NODE_ENV || 'development'
+
+  /**
+   * Config
+   * Reference: http://webpack.github.io/docs/configuration.html
+   * This is the object where all configuration gets set
+   */
+  var config = {}
+
+  /**
+   * Entry
+   * Reference: http://webpack.github.io/docs/configuration.html#entry
+   * Should be an empty object if it's generating a test build
+   * Karma will set this when it's a test build
+   */
+  if (TEST) {
+    config.entry = {}
+  } else {
+    config.entry = {
+      app: './appv2/src/main'
+    }
+  }
+
+  /**
+   * Output
+   * Reference: http://webpack.github.io/docs/configuration.html#output
+   * Should be an empty object if it's generating a test build
+   * Karma will handle setting it up for you when it's a test build
+   */
+  if (TEST) {
+    config.output = {}
+  } else {
+    config.output = {
+      // Absolute output directory
+      path: __dirname + '/build/',
+
+      // Output path from the view of the page
+      // Uses webpack-dev-server in development
+      publicPath: BUILD ? '/' : 'http://localhost:8080/',
+
+      // Filename for entry points
+      // Only adds hash in build mode
+      // filename: BUILD ? '[name].[hash].js' : '[name].bundle.js',
+      filename: "app.js",
+
+      // Filename for non-entry points
+      // Only adds hash in build mode
+      // chunkFilename: BUILD ? '[name].[hash].js' : '[name].bundle.js'
+    }
+  }
+
+  /**
+   * Devtool
+   * Reference: http://webpack.github.io/docs/configuration.html#devtool
+   * Type of sourcemap to use per build type
+   */
+  if (TEST) {
+    config.devtool = 'inline-source-map'
+  } else if (BUILD) {
+    config.devtool = 'source-map'
+  } else {
+    config.devtool = 'eval'
+  }
+
+  /**
+   * Loaders
+   * Reference: http://webpack.github.io/docs/configuration.html#module-loaders
+   * List: http://webpack.github.io/docs/list-of-loaders.html
+   * This handles most of the magic responsible for converting modules
+   */
+
+  // Initialize module
+  config.module = {
+    preLoaders: [],
+    loaders: [{
+      // JS LOADER
+      // Reference: https://github.com/babel/babel-loader
+      // Transpile .js files using babel-loader
+      // Compiles ES6 and ES7 into ES5 code
+      test: /\.js$/,
+      loader: 'babel?optional=runtime',
+      exclude: /node_modules/
+    }, {
+      // ASSET LOADER
+      // Reference: https://github.com/webpack/file-loader
+      // Copy png, jpg, jpeg, gif, svg, woff, ttf, eot files to output
+      // Rename the file using the asset hash
+      // Pass along the updated reference to your code
+      // You can add here any file extension you want to get copied to your output
+      test: /\.(png|jpg|jpeg|gif|svg|woff|ttf|eot)$/,
+      loader: 'file'
+    }]
+  }
+
+  // JSX LOADER
+  // Transpile .jsx files using babel-loader
+  var jsxLoader = {
+    test: /\.jsx$/,
+    loader: 'babel?optional=runtime',
+    exclude: /node_modules/
+  }
+
+  // Add react-hot-loader when not in build or test mode
+  if (!BUILD && !TEST) {
+    // Reference: https://github.com/gaearon/react-hot-loader
+    // This will reload react components without refresh
+    jsxLoader.loader = 'react-hot!' + jsxLoader.loader
+  }
+
+  // Add jsxLoader to the loader list
+  config.module.loaders.push(jsxLoader)
+
+  /**
+   * Resolve
+   * Reference: http://webpack.github.io/docs/configuration.html#resolve
+   * Use this to tweak how webpack should handle module resolution
+   */
+  config.resolve = {
+    // Reference: http://webpack.github.io/docs/configuration.html#resolve-extensions
+    // Allows you to require files that end with .jsx without typing it
+    // For example, if you have file.jsx, you can type: require('./file')
+    extensions: ['', '.js', '.jsx']
+  }
+
+  /**
+   * Plugins
+   * Reference: http://webpack.github.io/docs/configuration.html#plugins
+   * List: http://webpack.github.io/docs/list-of-plugins.html
+   */
+  config.plugins = [
+    // Reference: https://github.com/webpack/extract-text-webpack-plugin
+    // Extract css files
+    // Disabled when in test mode or not in build mode
+    new ExtractTextPlugin('[name].[hash].css', {
+      disable: !BUILD || TEST
+    }),
+
+    // Reference: http://webpack.github.io/docs/list-of-plugins.html#defineplugin
+    // Replace process.env.NODE_ENV with NODE_ENV in code
+    // Can be used to replace other values as well
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
+    })
+  ]
+
+  // Skip rendering index.html in test mode
+  if (!TEST) {
+    // Reference: https://github.com/ampedandwired/html-webpack-plugin
+    // Render index.html
+    config.plugins.push(
+      new HtmlWebpackPlugin({
+        title: 'Web application',
+        minify: BUILD
+      })
+    )
+  }
+
+  // Add build specific plugins
+  if (BUILD) {
+    config.plugins.push(
+      // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
+      // Only emit files when there are no errors
+      new webpack.NoErrorsPlugin(),
+
+      // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
+      // Dedupe modules in the output
+      new webpack.optimize.DedupePlugin(),
+
+      // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
+      // Minify all javascript, switch loaders to minimizing mode
+      new webpack.optimize.UglifyJsPlugin()
+    )
+  }
+
+  /**
+   * Dev server configuration
+   * Reference: http://webpack.github.io/docs/configuration.html#devserver
+   * Reference: http://webpack.github.io/docs/webpack-dev-server.html
+   */
+  config.devServer = {
+    contentBase: './public',
+    stats: {
+      modules: false,
+      cached: false,
+      colors: true,
+      chunk: false
+    }
+  }
+
+  return config
+}