Build improvements

Gruntfile.js

@@ -1,14 +1,5 @@
 'use strict';
 
-var serveStatic = require('serve-static');
-
-var mountFolder = function (dir) {
-  return serveStatic(require('path').resolve(dir));
-};
-
-var webpackDistConfig = require('./webpack.dist.config.js');
-var webpackDevConfig = require('./webpack.config.js');
-
 module.exports = function (grunt) {
   // Let *load-grunt-tasks* require everything
   require('load-grunt-tasks')(grunt);
@@ -19,107 +10,24 @@ module.exports = function (grunt) {
   grunt.initConfig({
     'pkg': pkgConfig,
 
-    'webpack': {
-      options: webpackDistConfig,
-      dist: {
-        cache: false
-      }
-    },
-
-    'webpack-dev-server': {
-      options: {
-        hot: true,
-        port: 8000,
-        webpack: webpackDevConfig,
-        publicPath: '/assets/',
-        contentBase: './<%= pkg.src %>/'
-      },
-
-      start: {
-        keepAlive: true
-      }
-    },
-
-    'connect': {
-      options: {
-        port: 8000
-      },
-
-      dist: {
-        options: {
-          keepalive: true,
-          middleware: function () {
-            return [
-              mountFolder(pkgConfig.dist)
-            ];
-          }
-        }
-      }
-    },
-
     'open': {
       options: {
         delay: 500
       },
-      dev: {
-        path: 'http://localhost:<%= connect.options.port %>/webpack-dev-server/index.web.html'
-      },
       dist: {
-        path: 'http://localhost:<%= connect.options.port %>/index.html'
-      }
-    },
-
-    'karma': {
-      unit: {
-        configFile: 'karma.conf.js'
-      }
-    },
-
-    'copy': {
-      dist: {
-        files: [
-          {
-            flatten: true,
-            src: ['<%= pkg.src %>/index.web.html'],
-            dest: '<%= pkg.dist %>/index.html'
-          },
-          {
-            flatten: true,
-            src: ['<%= pkg.src %>/favicon.ico'],
-            dest: '<%= pkg.dist %>/favicon.ico'
-          }
-        ]
-      }
-    },
-
-    'clean': {
-      dist: {
-        files: [{
-          dot: true,
-          src: [
-            '<%= pkg.dist %>'
-          ]
-        }]
-      }
-    },
-
-    'watch': {
-      options: {
-        livereload: true
-      },
-      build: {
-        files: 'src/**/*.js',
-        tasks: ['webpack']
+        path: 'http://localhost:8000/'
       }
     },
 
     'exec': {
-      launch_nw: '/Applications/nwjs.app/Contents/MacOS/nwjs .'
+      watch: pkgConfig.scripts.watch,
+      server: pkgConfig.scripts.server,
+      launch_nw: '/Applications/nwjs.app/Contents/MacOS/nwjs dist'
     },
 
     'concurrent': {
       target: {
-        tasks: ['watch', 'exec:launch_nw'],
+        tasks: ['exec:watch', 'exec:launch_nw'],
         options: {
           logConcurrentOutput: true
         }
@@ -128,13 +36,9 @@ module.exports = function (grunt) {
   });
 
   grunt.registerTask('serve-web', function (target) {
-    if (target === 'dist') {
-      return grunt.task.run(['build', 'open:dist', 'connect:dist']);
-    }
-
     grunt.task.run([
-      'open:dev',
-      'webpack-dev-server'
+      'open:dist',
+      'exec:server'
     ]);
   });
 
@@ -144,7 +48,5 @@ module.exports = function (grunt) {
     ]);
   });
 
-  grunt.registerTask('test', ['karma']);
-  grunt.registerTask('build', ['clean', 'copy', 'webpack']);
   grunt.registerTask('default', []);
 };

README.md

@@ -33,8 +33,8 @@ This project uses libraries and tools like:
 - [NW](http://nwjs.io) to package the Desktop App
 - [flux](https://facebook.github.io/flux) to organize the data flow management
 - [css-loader](https://github.com/webpack/css-loader) to integrate the styles in the builds
-- [grunt](http://gruntjs.com) to create the builds
-- [webpack](https://webpack.github.io) to help during the development phase with hot reloading
+- [grunt](http://gruntjs.com) to launch NW.js or your web browser
+- [webpack](https://webpack.github.io) to create the builds and help during the development phase with hot reloading
 
 ## Basic philosophy
 
@@ -148,8 +148,8 @@ There isn't any addtional requirements since you already installed the deps with
 
 ### Quick start
 
-- `npm run build` to build the project (at least the first time)
-- `npm run serve-web` to preview in the browser at http://localhost:8000/index.web.html or http://localhost:8000/webpack-dev-server/index.web.html with webpack-dev-server and hot reload enabled
+- `npm run build` to build the project
+- `npm run serve-web` to preview in the browser at http://localhost:8000/ with webpack-dev-server and hot reload enabled
 
 Congratulations! You've just successfully run the project as a Website App.
 
@@ -171,7 +171,7 @@ You can also setup an alias to call the binary.
 
 ### Quick start
 
-- `npm run build` to build the project (at least the first time)
+- `npm run build` to build the project
 - `npm run serve-nw` to launch the desktop app and enable livereload
 
 Congratulations! You've just successfully run the project as a Desktop App.

index.web.html → index.html

@@ -1,8 +1,14 @@
 <!doctype html>
-<html>
+<html{% if(o.htmlWebpackPlugin.files.manifest) { %} manifest="{%= o.htmlWebpackPlugin.files.manifest %}"{% } %}>
 <head>
   <meta charset="utf-8">
-  <title>Calculator Web App</title>
+  <title>{%=o.htmlWebpackPlugin.options.title || 'Webpack App'%}</title>
+  {% if (o.htmlWebpackPlugin.files.favicon) { %}
+  <link rel="shortcut icon" href="{%=o.htmlWebpackPlugin.files.favicon%}">
+  {% } %}
+  {% for (var css in o.htmlWebpackPlugin.files.css) { %}
+  <link href="{%=o.htmlWebpackPlugin.files.css[css] %}" rel="stylesheet">
+  {% } %}
   <meta name="description" content="">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
@@ -16,6 +22,9 @@
   <script>
     __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__
   </script>
-  <script type="text/javascript" src="assets/main.js"></script>
+
+  {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %}
+  <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
+  {% } %}
 </body>
 </html>

karma.conf.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var path = require('path');
+var webpackConfig = require('./webpack.config.js');
 
 module.exports = function (config) {
   config.set({
@@ -19,27 +19,7 @@ module.exports = function (config) {
     },
     webpack: {
       cache: true,
-      module: {
-        loaders: [{
-          test: /\.gif/,
-          loader: 'url-loader?limit=10000&mimetype=image/gif'
-        }, {
-          test: /\.jpg/,
-          loader: 'url-loader?limit=10000&mimetype=image/jpg'
-        }, {
-          test: /\.png/,
-          loader: 'url-loader?limit=10000&mimetype=image/png'
-        }, {
-          test: /\.js$/,
-          loader: 'babel-loader'
-        }, {
-          test: /\.sass/,
-          loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
-        }, {
-          test: /\.css$/,
-          loader: 'style-loader!css-loader'
-        }]
-      }
+      module: webpackConfig.module
     },
     webpackServer: {
       stats: {

package.json

@@ -16,30 +16,21 @@
     "flux",
     "babel"
   ],
-  "src": "./",
-  "test": "./test",
-  "dist": "./dist",
-  "mainInput": "main",
-  "mainOutput": "main",
-  "main": "index.nw.html",
   "scripts": {
-    "build": "grunt build",
+    "build": "npm run clean && `npm bin`/webpack --config webpack.dist.config.js",
+    "clean": "`npm bin`/rimraf dist",
     "deploy": "gh-pages -d dist",
+    "karma": "`npm bin`/karma start",
+    "server": "`npm bin`/webpack-dev-server --config ./webpack.hot.config.js --content-base ./dist/ --port 8000 --inline --hot --progress",
     "travis": "npm run build && npm run react-native:ios && npm run react-native:android && npm test",
     "react-native:ios": "react-native bundle --root src --platform ios --minify",
     "react-native:android": "react-native bundle --root src --platform android --minify",
     "serve-nw": "grunt serve-nw",
     "serve-web": "grunt serve-web",
     "serve-web:dist": "grunt serve-web:dist",
     "start": "node_modules/react-native/packager/packager.sh",
-    "test": "jest"
-  },
-  "window": {
-    "toolbar": true,
-    "min_width": 300,
-    "min_height": 475,
-    "max_width": 800,
-    "max_height": 600
+    "test": "`npm bin`/jest",
+    "watch": "`npm bin`/webpack --config webpack.config.js --watch"
   },
   "jest": {
     "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
@@ -80,20 +71,15 @@
     "css-loader": "^0.22.0",
     "eslint": "^1.9.0",
     "eslint-plugin-react": "^3.8.0",
+    "file-loader": "^0.8.4",
     "gh-pages": "^0.5.0",
     "grunt": "^0.4.5",
     "grunt-concurrent": "^2.0.4",
-    "grunt-contrib-clean": "^0.6.0",
-    "grunt-contrib-connect": "^0.11.2",
-    "grunt-contrib-copy": "^0.8.2",
-    "grunt-contrib-watch": "^0.6.1",
     "grunt-exec": "^0.4.6",
-    "grunt-karma": "^0.12.1",
     "grunt-open": "^0.2.3",
-    "grunt-webpack": "^1.0.11",
+    "html-webpack-plugin": "^1.6.2",
+    "jasmine-core": "^2.3.4",
     "jest-cli": "^0.7.1",
-    "jshint": "^2.8.0",
-    "jshint-loader": "^0.8.3",
     "karma": "^0.13.15",
     "karma-chrome-launcher": "^0.2.1",
     "karma-firefox-launcher": "^0.1.6",
@@ -102,7 +88,10 @@
     "karma-script-launcher": "^0.1.0",
     "karma-webpack": "^1.7.0",
     "load-grunt-tasks": "^3.3.0",
+    "node-sass": "^3.4.1",
+    "phantomjs": "^1.9.18",
     "react-hot-loader": "^1.3.0",
+    "rimraf": "^2.4.3",
     "sass-loader": "^3.1.1",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.6",

src/index.js

@@ -5,6 +5,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route } from 'react-router';
 
+require('file?name=package.json!./package.web.json');
+require('file?name=favicon.ico!../favicon.ico');
+
 // CSS
 require('normalize.css');
 require('./styles/main.css');

src/package.web.json

@@ -0,0 +1,11 @@
+{
+  "name": "react-native-nw-react-calculator-nwjs",
+  "main": "index.html",
+  "window": {
+    "toolbar": true,
+    "min_width": 300,
+    "min_height": 475,
+    "max_width": 800,
+    "max_height": 600
+  }
+}