Update Aurelia SPA template

templates/AureliaSpa/ClientApp/app/components/app/app.ts

@@ -1,4 +1,4 @@
-import { Aurelia } from 'aurelia-framework';
+import { Aurelia, PLATFORM } from 'aurelia-framework';
 import { Router, RouterConfiguration } from 'aurelia-router';
 
 export class App {
@@ -10,21 +10,21 @@ export class App {
             route: [ '', 'home' ],
             name: 'home',
             settings: { icon: 'home' },
-            moduleId: '../home/home',
+            moduleId: PLATFORM.moduleName('../home/home'),
             nav: true,
             title: 'Home'
         }, {
             route: 'counter',
             name: 'counter',
             settings: { icon: 'education' },
-            moduleId: '../counter/counter',
+            moduleId: PLATFORM.moduleName('../counter/counter'),
             nav: true,
             title: 'Counter'
         }, {
             route: 'fetch-data',
             name: 'fetchdata',
             settings: { icon: 'th-list' },
-            moduleId: '../fetchdata/fetchdata',
+            moduleId: PLATFORM.moduleName('../fetchdata/fetchdata'),
             nav: true,
             title: 'Fetch data'
         }]);

templates/AureliaSpa/ClientApp/boot.ts

@@ -1,5 +1,5 @@
 import 'isomorphic-fetch';
-import { Aurelia } from 'aurelia-framework';
+import { Aurelia, PLATFORM } from 'aurelia-framework';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap';
 declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build
@@ -11,5 +11,5 @@ export function configure(aurelia: Aurelia) {
         aurelia.use.developmentLogging();
     }
 
-    aurelia.start().then(() => aurelia.setRoot('app/components/app/app'));
+    aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/components/app/app')));
 }

templates/AureliaSpa/Startup.cs

@@ -43,7 +43,7 @@ namespace WebApplicationBasic
                 app.UseDeveloperExceptionPage();
 
                 app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
-                    HotModuleReplacement = false // Aurelia Webpack Plugin HMR currently has issues. Leave this set to false.
+                    HotModuleReplacement = true
                 });
             }
             else

templates/AureliaSpa/package.json

@@ -1,50 +1,30 @@
 {
-  "name": "WebApplicationBasic",
   "version": "0.0.0",
   "dependencies": {
-    "aurelia-bootstrapper-webpack": "^1.0.0",
-    "aurelia-event-aggregator": "^1.0.0",
-    "aurelia-fetch-client": "^1.0.0",
-    "aurelia-framework": "^1.0.0",
-    "aurelia-history-browser": "^1.0.0",
-    "aurelia-loader-webpack": "^1.0.0",
-    "aurelia-logging-console": "^1.0.0",
-    "aurelia-pal-browser": "^1.0.0",
-    "aurelia-polyfills": "^1.0.0",
-    "aurelia-route-recognizer": "^1.0.0",
-    "aurelia-router": "^1.0.2",
-    "aurelia-templating-binding": "^1.0.0",
-    "aurelia-templating-resources": "^1.0.0",
-    "aurelia-templating-router": "^1.0.0",
+    "aurelia-bootstrapper": "^2.0.1",
+    "aurelia-fetch-client": "^1.0.1",
+    "aurelia-framework": "^1.1.0",
+    "aurelia-loader-webpack": "^2.0.0",
+    "aurelia-pal": "^1.3.0",
+    "aurelia-router": "^1.2.1",
     "bootstrap": "^3.3.7",
     "isomorphic-fetch": "^2.2.1",
-    "jquery": "^2.2.1"
+    "jquery": "^3.2.1"
   },
   "devDependencies": {
-    "@types/node": "^6.0.45",
-    "aspnet-webpack": "^1.0.11",
-    "aurelia-webpack-plugin": "^1.1.0",
-    "copy-webpack-plugin": "^3.0.1",
-    "css": "^2.2.1",
-    "css-loader": "^0.25.0",
-    "expose-loader": "^0.7.1",
-    "extract-text-webpack-plugin": "2.0.0-beta.4",
-    "file-loader": "^0.9.0",
-    "html-loader": "^0.4.4",
-    "html-webpack-plugin": "^2.22.0",
+    "@types/node": "^7.0.12",
+    "aspnet-webpack": "^1.0.28",
+    "aurelia-webpack-plugin": "^2.0.0-rc.2",
+    "css-loader": "^0.28.0",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
+    "html-loader": "^0.4.5",
     "json-loader": "^0.5.4",
-    "raw-loader": "^0.5.1",
-    "style-loader": "^0.13.1",
-    "to-string-loader": "^1.1.5",
-    "ts-loader": "^0.8.2",
-    "typescript": "^2.2.1",
-    "url-loader": "^0.5.7",
-    "webpack": "2.1.0-beta.25",
-    "webpack-hot-middleware": "^2.10.0"
-  },
-  "aurelia": {
-    "build": {
-      "includeDependencies": "aurelia-*"
-    }
+    "style-loader": "^0.16.1",
+    "ts-loader": "^2.0.3",
+    "typescript": "^2.2.2",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.3.3",
+    "webpack-hot-middleware": "^2.18.0"
   }
 }

templates/AureliaSpa/tsconfig.json

@@ -6,7 +6,7 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "skipDefaultLibCheck": true,
-    "lib": [ "es6", "dom" ],
+    "lib": [ "es2015", "dom" ],
     "types": [ "node" ]
   },
   "exclude": [ "bin", "node_modules" ],

templates/AureliaSpa/webpack.config.js

@@ -1,45 +1,51 @@
-var isDevBuild = process.argv.indexOf('--env.prod') < 0;
-var path = require('path');
-var webpack = require('webpack');
-var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+const { AureliaPlugin } = require('aurelia-webpack-plugin');
 
-var bundleOutputDir = './wwwroot/dist';
-module.exports = {
-    resolve: { extensions: [ '.js', '.ts' ] },
-    entry: { 'app': 'aurelia-bootstrapper-webpack' }, // Note: The aurelia-webpack-plugin will add your app's modules to this bundle automatically
-    output: {
-        path: path.resolve(bundleOutputDir),
-        publicPath: '/dist',
-        filename: '[name].js'
-    },
-    module: {
-        loaders: [
-            { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
-            { test: /\.html$/, loader: 'html-loader' },
-            { test: /\.css$/, loaders: [ 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
-            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
-            { test: /\.json$/, loader: 'json-loader' }
+module.exports = ({ prod } = {}) => {
+    const isDevBuild = !prod;
+    const isProdBuild = prod;
+    const bundleOutputDir = './wwwroot/dist';
+
+    return {
+        resolve: {
+            extensions: [".ts", ".js"],
+            modules: ["ClientApp", "node_modules"],
+        },
+        entry: { 'app': 'aurelia-bootstrapper' },
+        output: {
+            path: path.resolve(bundleOutputDir),
+            publicPath: "/dist/",
+            filename: '[name].js'
+        },
+        module: {
+            rules: [
+                { test: /\.css$/i, use: [isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
+                { test: /\.html$/i, use: ["html-loader"] },
+                { test: /\.ts$/i, loaders: ['ts-loader'], exclude: path.resolve(__dirname, 'node_modules') },
+                { test: /\.json$/i, loader: 'json-loader', exclude: path.resolve(__dirname, 'node_modules') },
+                { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader', query: { limit: 8192 } }
+            ]
+        },
+        plugins: [
+            new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
+            new webpack.DllReferencePlugin({
+                context: __dirname,
+                manifest: require('./wwwroot/dist/vendor-manifest.json')
+            }),
+            new AureliaPlugin({ aureliaApp: "boot" }),
+            ...when(isDevBuild, [
+                new webpack.SourceMapDevToolPlugin({
+                    filename: '[file].map',
+                    moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
+                })
+            ]),
+            ...when(isProdBuild, [
+                new webpack.optimize.UglifyJsPlugin()
+            ])
         ]
-    },
-    plugins: [
-        new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
-        new webpack.DllReferencePlugin({
-            context: __dirname,
-            manifest: require('./wwwroot/dist/vendor-manifest.json')
-        }),
-        new AureliaWebpackPlugin({
-            root: path.resolve('./'),
-            src: path.resolve('./ClientApp'),
-            baseUrl: '/'
-        })
-    ].concat(isDevBuild ? [
-        // Plugins that apply in development builds only
-        new webpack.SourceMapDevToolPlugin({
-            filename: '[file].map', // Remove this line if you prefer inline source maps
-            moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
-        })
-    ] : [
-        // Plugins that apply in production builds only
-        new webpack.optimize.UglifyJsPlugin()
-    ])
-};
+    };
+}
+
+const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || []
+const when = (condition, config, negativeConfig) => condition ? ensureArray(config) : ensureArray(negativeConfig)

templates/AureliaSpa/webpack.config.vendor.js

@@ -1,52 +1,55 @@
-var isDevBuild = process.argv.indexOf('--env.prod') < 0;
 var path = require('path');
 var webpack = require('webpack');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var extractCSS = new ExtractTextPlugin('vendor.css');
 
-module.exports = {
-    resolve: {
-        extensions: [ '.js' ]
-    },
-    module: {
-        loaders: [
-            { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
-            { test: /\.css(\?|$)/, loader: extractCSS.extract([ isDevBuild ? 'css-loader' : 'css-loader?minimize' ]) }
-        ]
-    },
-    entry: {
-        vendor: [
-            'aurelia-event-aggregator',
-            'aurelia-fetch-client',
-            'aurelia-framework',
-            'aurelia-history-browser',
-            'aurelia-logging-console',
-            'aurelia-pal-browser',
-            'aurelia-polyfills',
-            'aurelia-route-recognizer',
-            'aurelia-router',
-            'aurelia-templating-binding',
-            'aurelia-templating-resources',
-            'aurelia-templating-router',
-            'bootstrap',
-            'bootstrap/dist/css/bootstrap.css',
-            'jquery'
-        ],
-    },
-    output: {
-        path: path.join(__dirname, 'wwwroot', 'dist'),
-        publicPath: '/dist/',
-        filename: '[name].js',
-        library: '[name]_[hash]',
-    },
-    plugins: [
-        extractCSS,
-        new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
-        new webpack.DllPlugin({
-            path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
-            name: '[name]_[hash]'
-        })
-    ].concat(isDevBuild ? [] : [
-        new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
-    ])
+module.exports = ({ prod } = {}) => {
+    const isDevBuild = !prod;
+    
+    return {
+        resolve: {
+            extensions: ['.js']
+        },
+        module: {
+            loaders: [
+                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
+                { test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) }
+            ]
+        },
+        entry: {
+            vendor: [
+                'aurelia-event-aggregator',
+                'aurelia-fetch-client',
+                'aurelia-framework',
+                'aurelia-history-browser',
+                'aurelia-logging-console',
+                'aurelia-pal-browser',
+                'aurelia-polyfills',
+                'aurelia-route-recognizer',
+                'aurelia-router',
+                'aurelia-templating-binding',
+                'aurelia-templating-resources',
+                'aurelia-templating-router',
+                'bootstrap',
+                'bootstrap/dist/css/bootstrap.css',
+                'jquery'
+            ],
+        },
+        output: {
+            path: path.join(__dirname, 'wwwroot', 'dist'),
+            publicPath: '/dist/',
+            filename: '[name].js',
+            library: '[name]_[hash]',
+        },
+        plugins: [
+            extractCSS,
+            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
+            new webpack.DllPlugin({
+                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
+                name: '[name]_[hash]'
+            })
+        ].concat(isDevBuild ? [] : [
+            new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
+        ])
+    }
 };