Permalink
Browse files

Update Aurelia SPA template

  • Loading branch information...
MeirionHughes committed Apr 9, 2017
1 parent ea429cc commit 37df30929cbb6b0b1cb41cf66c12413b873694e6
@@ -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'
}]);
@@ -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')));
}
@@ -43,7 +43,7 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerF
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
HotModuleReplacement = false // Aurelia Webpack Plugin HMR currently has issues. Leave this set to false.
HotModuleReplacement = true
});
}
else
@@ -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"
}
}
@@ -6,7 +6,7 @@
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
"lib": [ "es6", "dom" ],
"lib": [ "es2015", "dom" ],
"types": [ "node" ]
},
"exclude": [ "bin", "node_modules" ],
@@ -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)
@@ -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 } })
])
}
};

0 comments on commit 37df309

Please sign in to comment.