Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

Commit 37df309

Browse files
MeirionHughesMeirionHughes
committed
Update Aurelia SPA template
1 parent ea429cc commit 37df309

File tree

7 files changed

+126
-137
lines changed

7 files changed

+126
-137
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Aurelia } from 'aurelia-framework';
1+
import { Aurelia, PLATFORM } from 'aurelia-framework';
22
import { Router, RouterConfiguration } from 'aurelia-router';
33

44
export class App {
@@ -10,21 +10,21 @@ export class App {
1010
route: [ '', 'home' ],
1111
name: 'home',
1212
settings: { icon: 'home' },
13-
moduleId: '../home/home',
13+
moduleId: PLATFORM.moduleName('../home/home'),
1414
nav: true,
1515
title: 'Home'
1616
}, {
1717
route: 'counter',
1818
name: 'counter',
1919
settings: { icon: 'education' },
20-
moduleId: '../counter/counter',
20+
moduleId: PLATFORM.moduleName('../counter/counter'),
2121
nav: true,
2222
title: 'Counter'
2323
}, {
2424
route: 'fetch-data',
2525
name: 'fetchdata',
2626
settings: { icon: 'th-list' },
27-
moduleId: '../fetchdata/fetchdata',
27+
moduleId: PLATFORM.moduleName('../fetchdata/fetchdata'),
2828
nav: true,
2929
title: 'Fetch data'
3030
}]);

‎templates/AureliaSpa/ClientApp/boot.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import 'isomorphic-fetch';
2-
import { Aurelia } from 'aurelia-framework';
2+
import { Aurelia, PLATFORM } from 'aurelia-framework';
33
import 'bootstrap/dist/css/bootstrap.css';
44
import 'bootstrap';
55
declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build
@@ -11,5 +11,5 @@ export function configure(aurelia: Aurelia) {
1111
aurelia.use.developmentLogging();
1212
}
1313

14-
aurelia.start().then(() => aurelia.setRoot('app/components/app/app'));
14+
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app/components/app/app')));
1515
}

‎templates/AureliaSpa/Startup.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerF
4343
app.UseDeveloperExceptionPage();
4444

4545
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
46-
HotModuleReplacement = false // Aurelia Webpack Plugin HMR currently has issues. Leave this set to false.
46+
HotModuleReplacement = true
4747
});
4848
}
4949
else

‎templates/AureliaSpa/package.json

Lines changed: 20 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,30 @@
11
{
2-
"name": "WebApplicationBasic",
32
"version": "0.0.0",
43
"dependencies": {
5-
"aurelia-bootstrapper-webpack": "^1.0.0",
6-
"aurelia-event-aggregator": "^1.0.0",
7-
"aurelia-fetch-client": "^1.0.0",
8-
"aurelia-framework": "^1.0.0",
9-
"aurelia-history-browser": "^1.0.0",
10-
"aurelia-loader-webpack": "^1.0.0",
11-
"aurelia-logging-console": "^1.0.0",
12-
"aurelia-pal-browser": "^1.0.0",
13-
"aurelia-polyfills": "^1.0.0",
14-
"aurelia-route-recognizer": "^1.0.0",
15-
"aurelia-router": "^1.0.2",
16-
"aurelia-templating-binding": "^1.0.0",
17-
"aurelia-templating-resources": "^1.0.0",
18-
"aurelia-templating-router": "^1.0.0",
4+
"aurelia-bootstrapper": "^2.0.1",
5+
"aurelia-fetch-client": "^1.0.1",
6+
"aurelia-framework": "^1.1.0",
7+
"aurelia-loader-webpack": "^2.0.0",
8+
"aurelia-pal": "^1.3.0",
9+
"aurelia-router": "^1.2.1",
1910
"bootstrap": "^3.3.7",
2011
"isomorphic-fetch": "^2.2.1",
21-
"jquery": "^2.2.1"
12+
"jquery": "^3.2.1"
2213
},
2314
"devDependencies": {
24-
"@types/node": "^6.0.45",
25-
"aspnet-webpack": "^1.0.11",
26-
"aurelia-webpack-plugin": "^1.1.0",
27-
"copy-webpack-plugin": "^3.0.1",
28-
"css": "^2.2.1",
29-
"css-loader": "^0.25.0",
30-
"expose-loader": "^0.7.1",
31-
"extract-text-webpack-plugin": "2.0.0-beta.4",
32-
"file-loader": "^0.9.0",
33-
"html-loader": "^0.4.4",
34-
"html-webpack-plugin": "^2.22.0",
15+
"@types/node": "^7.0.12",
16+
"aspnet-webpack": "^1.0.28",
17+
"aurelia-webpack-plugin": "^2.0.0-rc.2",
18+
"css-loader": "^0.28.0",
19+
"extract-text-webpack-plugin": "^2.1.0",
20+
"file-loader": "^0.11.1",
21+
"html-loader": "^0.4.5",
3522
"json-loader": "^0.5.4",
36-
"raw-loader": "^0.5.1",
37-
"style-loader": "^0.13.1",
38-
"to-string-loader": "^1.1.5",
39-
"ts-loader": "^0.8.2",
40-
"typescript": "^2.2.1",
41-
"url-loader": "^0.5.7",
42-
"webpack": "2.1.0-beta.25",
43-
"webpack-hot-middleware": "^2.10.0"
44-
},
45-
"aurelia": {
46-
"build": {
47-
"includeDependencies": "aurelia-*"
48-
}
23+
"style-loader": "^0.16.1",
24+
"ts-loader": "^2.0.3",
25+
"typescript": "^2.2.2",
26+
"url-loader": "^0.5.8",
27+
"webpack": "^2.3.3",
28+
"webpack-hot-middleware": "^2.18.0"
4929
}
5030
}

‎templates/AureliaSpa/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"experimentalDecorators": true,
77
"emitDecoratorMetadata": true,
88
"skipDefaultLibCheck": true,
9-
"lib": [ "es6", "dom" ],
9+
"lib": [ "es2015", "dom" ],
1010
"types": [ "node" ]
1111
},
1212
"exclude": [ "bin", "node_modules" ],

‎templates/AureliaSpa/webpack.config.js

Lines changed: 49 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,51 @@
1-
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
2-
var path = require('path');
3-
var webpack = require('webpack');
4-
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
const { AureliaPlugin } = require('aurelia-webpack-plugin');
54

6-
var bundleOutputDir = './wwwroot/dist';
7-
module.exports = {
8-
resolve: { extensions: [ '.js', '.ts' ] },
9-
entry: { 'app': 'aurelia-bootstrapper-webpack' }, // Note: The aurelia-webpack-plugin will add your app's modules to this bundle automatically
10-
output: {
11-
path: path.resolve(bundleOutputDir),
12-
publicPath: '/dist',
13-
filename: '[name].js'
14-
},
15-
module: {
16-
loaders: [
17-
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
18-
{ test: /\.html$/, loader: 'html-loader' },
19-
{ test: /\.css$/, loaders: [ 'style-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
20-
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
21-
{ test: /\.json$/, loader: 'json-loader' }
5+
module.exports = ({ prod } = {}) => {
6+
const isDevBuild = !prod;
7+
const isProdBuild = prod;
8+
const bundleOutputDir = './wwwroot/dist';
9+
10+
return {
11+
resolve: {
12+
extensions: [".ts", ".js"],
13+
modules: ["ClientApp", "node_modules"],
14+
},
15+
entry: { 'app': 'aurelia-bootstrapper' },
16+
output: {
17+
path: path.resolve(bundleOutputDir),
18+
publicPath: "/dist/",
19+
filename: '[name].js'
20+
},
21+
module: {
22+
rules: [
23+
{ test: /\.css$/i, use: [isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
24+
{ test: /\.html$/i, use: ["html-loader"] },
25+
{ test: /\.ts$/i, loaders: ['ts-loader'], exclude: path.resolve(__dirname, 'node_modules') },
26+
{ test: /\.json$/i, loader: 'json-loader', exclude: path.resolve(__dirname, 'node_modules') },
27+
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader', query: { limit: 8192 } }
28+
]
29+
},
30+
plugins: [
31+
new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
32+
new webpack.DllReferencePlugin({
33+
context: __dirname,
34+
manifest: require('./wwwroot/dist/vendor-manifest.json')
35+
}),
36+
new AureliaPlugin({ aureliaApp: "boot" }),
37+
...when(isDevBuild, [
38+
new webpack.SourceMapDevToolPlugin({
39+
filename: '[file].map',
40+
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
41+
})
42+
]),
43+
...when(isProdBuild, [
44+
new webpack.optimize.UglifyJsPlugin()
45+
])
2246
]
23-
},
24-
plugins: [
25-
new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
26-
new webpack.DllReferencePlugin({
27-
context: __dirname,
28-
manifest: require('./wwwroot/dist/vendor-manifest.json')
29-
}),
30-
new AureliaWebpackPlugin({
31-
root: path.resolve('./'),
32-
src: path.resolve('./ClientApp'),
33-
baseUrl: '/'
34-
})
35-
].concat(isDevBuild ? [
36-
// Plugins that apply in development builds only
37-
new webpack.SourceMapDevToolPlugin({
38-
filename: '[file].map', // Remove this line if you prefer inline source maps
39-
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
40-
})
41-
] : [
42-
// Plugins that apply in production builds only
43-
new webpack.optimize.UglifyJsPlugin()
44-
])
45-
};
47+
};
48+
}
49+
50+
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || []
51+
const when = (condition, config, negativeConfig) => condition ? ensureArray(config) : ensureArray(negativeConfig)

‎templates/AureliaSpa/webpack.config.vendor.js

Lines changed: 49 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,55 @@
1-
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
21
var path = require('path');
32
var webpack = require('webpack');
43
var ExtractTextPlugin = require('extract-text-webpack-plugin');
54
var extractCSS = new ExtractTextPlugin('vendor.css');
65

7-
module.exports = {
8-
resolve: {
9-
extensions: [ '.js' ]
10-
},
11-
module: {
12-
loaders: [
13-
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
14-
{ test: /\.css(\?|$)/, loader: extractCSS.extract([ isDevBuild ? 'css-loader' : 'css-loader?minimize' ]) }
15-
]
16-
},
17-
entry: {
18-
vendor: [
19-
'aurelia-event-aggregator',
20-
'aurelia-fetch-client',
21-
'aurelia-framework',
22-
'aurelia-history-browser',
23-
'aurelia-logging-console',
24-
'aurelia-pal-browser',
25-
'aurelia-polyfills',
26-
'aurelia-route-recognizer',
27-
'aurelia-router',
28-
'aurelia-templating-binding',
29-
'aurelia-templating-resources',
30-
'aurelia-templating-router',
31-
'bootstrap',
32-
'bootstrap/dist/css/bootstrap.css',
33-
'jquery'
34-
],
35-
},
36-
output: {
37-
path: path.join(__dirname, 'wwwroot', 'dist'),
38-
publicPath: '/dist/',
39-
filename: '[name].js',
40-
library: '[name]_[hash]',
41-
},
42-
plugins: [
43-
extractCSS,
44-
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
45-
new webpack.DllPlugin({
46-
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
47-
name: '[name]_[hash]'
48-
})
49-
].concat(isDevBuild ? [] : [
50-
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
51-
])
6+
module.exports = ({ prod } = {}) => {
7+
const isDevBuild = !prod;
8+
9+
return {
10+
resolve: {
11+
extensions: ['.js']
12+
},
13+
module: {
14+
loaders: [
15+
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
16+
{ test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) }
17+
]
18+
},
19+
entry: {
20+
vendor: [
21+
'aurelia-event-aggregator',
22+
'aurelia-fetch-client',
23+
'aurelia-framework',
24+
'aurelia-history-browser',
25+
'aurelia-logging-console',
26+
'aurelia-pal-browser',
27+
'aurelia-polyfills',
28+
'aurelia-route-recognizer',
29+
'aurelia-router',
30+
'aurelia-templating-binding',
31+
'aurelia-templating-resources',
32+
'aurelia-templating-router',
33+
'bootstrap',
34+
'bootstrap/dist/css/bootstrap.css',
35+
'jquery'
36+
],
37+
},
38+
output: {
39+
path: path.join(__dirname, 'wwwroot', 'dist'),
40+
publicPath: '/dist/',
41+
filename: '[name].js',
42+
library: '[name]_[hash]',
43+
},
44+
plugins: [
45+
extractCSS,
46+
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
47+
new webpack.DllPlugin({
48+
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
49+
name: '[name]_[hash]'
50+
})
51+
].concat(isDevBuild ? [] : [
52+
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
53+
])
54+
}
5255
};

0 commit comments

Comments
 (0)