webpack: production settings (#1226)

* vendor libraries

* vendor libraries settings

* additional vendor libs settings

* production settings for i18n

* fix pdfs and favicon paths

* readme update

* code cleanup

demo-shell-ng2/README.md

@@ -10,28 +10,42 @@
     </a>
 </p>
 
-### Node
-To correctly use this demo check that on your machine is running Node version 5.0.0 or higher.
+## Installing
 
-#### Local build
-
-1 Install dependencies
+To correctly use this demo check that on your machine is running Node version 6.9.2 LTS or higher.
 
 ```sh
 npm install
 ```
 
-2 Fast build and watch for dev purposes
+## Development build
 
 ```sh
 npm start
 ```
 
->`start` script also includes live reload and watchers for all the `.ts` files.
-TypeScript watchers are also configured for `node_modules` folder within demo shell
-and provide live reload for all the component libraries as well.
+This command compiles and starts the project in watch mode. 
+Browser will automatically reload upon changes.
+Upon start you can navigate to `http://localhost:3000` with your preferred browser.
 
-#### Development branch build
+## Production build
+
+```sh
+npm run build
+```
+
+This command builds broject in `production` mode. 
+All output is placed to `dist` folder and can be served your preferred web server.
+You should need no additional files outside the `dist` folder.
+
+In order to quickly test the output you can use the [wsrv](https://www.npmjs.com/package/wsrv) tool (lightweight web server):
+
+```sh
+npm install -g wsrv
+wsrv -s -o dist/
+```
+
+## Development branch build
 
 If you want to run the demo shell with the latest change from the development branch, use the following command from the /script folder:
 
@@ -40,7 +54,7 @@ If you want to run the demo shell with the latest change from the development br
 ./start-linked.sh -install
 ```
 
-###Multi-language
+## Multi-language
 To support a new language you need to create your language file (.json) and add it to `i18n/` folder.
 
 ```json

demo-shell-ng2/app/app.component.ts

@@ -48,10 +48,15 @@ export class AppComponent {
         this.setProvider();
 
         if (translate) {
+            if (process.env.ENV === 'production') {
+                translate.addTranslationFolder('custom', 'i18n/custom-translation');
+                translate.addTranslationFolder('ng2-alfresco-login', 'i18n/custom-translation/alfresco-login');
+            } else {
                 translate.addTranslationFolder('custom', 'custom-translation/');
                 translate.addTranslationFolder('ng2-alfresco-login', 'custom-translation/alfresco-login');
             }
         }
+    }
 
     isLoggedIn(): boolean {
         this.redirectToLoginPageIfNotLoggedIn();

demo-shell-ng2/app/polyfills.ts

@@ -1,5 +1,9 @@
 import 'core-js/es6';
 import 'core-js/es7/reflect';
+
+// IE 8-11
+require('script!element.scrollintoviewifneeded-polyfill/index.js');
+
 require('zone.js/dist/zone');
 
 if (process.env.ENV === 'production') {

demo-shell-ng2/app/vendor.ts

@@ -12,5 +12,42 @@ import 'rxjs';
 // Other vendors for example jQuery, Lodash or Bootstrap
 // You can import js, ts, css, sass, ...
 
+// Google Material Design Lite
+import '../public/css/material.orange-blue.min.css';
+import 'material-design-lite/material.min';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Flags
+import 'flag-icon-css/css/flag-icon.min.css';
+
+// Polyfill(s) for dialogs
+import 'dialog-polyfill/dialog-polyfill';
+import 'dialog-polyfill/dialog-polyfill.css';
+
+// app content
+import '../public/css/app.css';
+import '../public/css/muli-font.css';
+
 import 'ng2-activiti-form/stencils/runtime.ng1';
 import 'ng2-activiti-form/stencils/runtime.adf';
+
+require('script!../public/js/Polyline.js');
+import 'chart.js';
+
+require('script!moment/min/moment.min.js');
+
+import 'md-date-time-picker/dist/css/mdDateTimePicker.css';
+require('script!md-date-time-picker/dist/js/mdDateTimePicker.min.js');
+require('script!md-date-time-picker/dist/js/draggabilly.pkgd.min.js');
+
+require('pdfjs-dist/web/compatibility.js');
+
+// Setting worker path to worker bundle.
+let pdfjsLib = require('pdfjs-dist');
+if (process.env.ENV === 'production') {
+  pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
+} else {
+  pdfjsLib.PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';
+}
+
+require('pdfjs-dist/web/pdf_viewer.js');

demo-shell-ng2/config/webpack.common.js

@@ -106,6 +106,11 @@ module.exports = {
   },
 
   plugins: [
+
+    new webpack.ProvidePlugin({
+      'dialogPolyfill': 'dialog-polyfill/dialog-polyfill'
+    }),
+
     new webpack.optimize.CommonsChunkPlugin({
       name: ['app', 'vendor', 'polyfills']
     }),

demo-shell-ng2/config/webpack.prod.js

@@ -1,6 +1,7 @@
 var webpack = require('webpack');
 var webpackMerge = require('webpack-merge');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
 var commonConfig = require('./webpack.common.js');
 var helpers = require('./helpers');
 
@@ -21,18 +22,66 @@ module.exports = webpackMerge(commonConfig, {
   },
 
   plugins: [
-    new webpack.NoErrorsPlugin(),
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
-      mangle: {
-        keep_fnames: true
-      }
-    }),
-    new ExtractTextPlugin('[name].[hash].css'),
+    // Define env variables to help with builds
+    // Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
     new webpack.DefinePlugin({
       'process.env': {
         'ENV': JSON.stringify(ENV)
       }
-    })
+    }),
+
+    // 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({ // https://github.com/angular/angular/issues/10618
+      mangle: {
+        keep_fnames: true
+      },
+      compressor: {
+        screw_ie8: true,
+        warnings: false
+      }
+    }),
+
+    // Extract css files
+    // Reference: https://github.com/webpack/extract-text-webpack-plugin
+    // Disabled when in test mode or not in build mode
+    new ExtractTextPlugin('[name].[hash].css'),
+
+    // Copy assets from the public folder
+    // Reference: https://github.com/kevlened/copy-webpack-plugin
+    new CopyWebpackPlugin([
+        {
+            from: 'favicon-96x96.png'
+        },
+        {
+            from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
+            to: 'pdf.worker.js'
+        },
+        {
+            context: 'custom-translation',
+            from: '**/*.json',
+            to: 'i18n/custom-translation'
+        },
+        // Copy i18n folders for all modules with ng2-alfresco- prefix
+        {
+            context: 'node_modules',
+            from: 'ng2-alfresco-*/dist/src/i18n/*.json',
+            to: 'node_modules'
+        },
+        // Copy i18n folders for all modules with ng2-activiti- prefix
+        {
+            context: 'node_modules',
+            from: 'ng2-activiti-*/dist/src/i18n/*.json',
+            to: 'node_modules'
+        }
+    ])
   ]
 });

demo-shell-ng2/index.html

@@ -5,19 +5,8 @@
     <title>Demo Application - Angular 2</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link href="app/css/app.css" rel="stylesheet">
-    <link href="app/css/muli-font.css" rel="stylesheet">
-
     <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
-
-    <!-- Google Material Design Lite -->
-    <link href="./assets/material.orange-blue.min.css" rel="stylesheet">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link href="node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet">
-
-    <link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
-    <link href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all" rel="stylesheet">
 
     <!-- 1. Load libraries -->
     <!-- Polyfill(s) for Safari (pre-10.x) -->
@@ -25,22 +14,6 @@
 
     <!-- Polyfill(s) for older browsers -->
     <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link href="node_modules/dialog-polyfill/dialog-polyfill.css" rel="stylesheet" type="text/css" />
-
-    <script src="node_modules/moment/min/moment.min.js"></script>
-    <script src="/app/js/Polyline.js"></script>
-    <script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
-    <script src="node_modules/pdfjs-dist/build/pdf.js"></script>
-    <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
-    <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
-    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
-    <script src="node_modules/raphael/raphael.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
 
     <style>
         .main_header_adf .mdl-layout__drawer-button {

demo-shell-ng2/package.json

@@ -121,7 +121,9 @@
     "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1",
     "webpack-merge": "^0.14.0",
-    "source-map-loader": "^0.1.5"
+    "source-map-loader": "^0.1.5",
+    "script-loader": "^0.7.0",
+    "copy-webpack-plugin": "^4.0.1"
   },
   "license-check-config": {
     "src": [

demo-shell-ng2/tslint.json

@@ -55,7 +55,7 @@
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,
@@ -64,7 +64,7 @@
     "no-unused-variable": true,
     "no-use-before-declare": true,
     "no-var-keyword": true,
-    "no-var-requires": true,
+    "no-var-requires": false,
     "object-literal-sort-keys": false,
     "one-line": [
       true,