Skip to content

Commit e87aa1f

Browse files
SteveSandersonMSSteveSandersonMS
committed
Change Angular2Spa template to build server (prerendering) bundle explicitly. This simplifies deployment, fixes various compatibility issues (like aspnet#306) and makes debugging much easier for developers using the template.
1 parent 30dfe5e commit e87aa1f

File tree

7 files changed

+58
-36
lines changed

7 files changed

+58
-36
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,5 @@ npm-debug.log
3636
# repo have to be excluded here.
3737
/templates/*/node_modules/
3838
/templates/*/wwwroot/dist/
39+
/templates/*/ClientApp/dist/
3940
.vscode/

‎templates/Angular2Spa/Views/Home/Index.cshtml‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22
ViewData["Title"] = "Home Page";
33
}
44

5-
<app asp-prerender-module="ClientApp/boot-server"
6-
asp-prerender-webpack-config="webpack.config.js">Loading...</app>
5+
<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
76

87
<script src="~/dist/vendor.js" asp-append-version="true"></script>
98
@section scripts {
10-
<script src="~/dist/main.js" asp-append-version="true"></script>
9+
<script src="~/dist/main-client.js" asp-append-version="true"></script>
1110
}

‎templates/Angular2Spa/package.json‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
11
{
22
"name": "Angular2Spa",
33
"version": "0.0.0",
4+
"devDependencies": {
5+
"aspnet-webpack": "^1.0.11",
6+
"css": "^2.2.1",
7+
"css-loader": "^0.25.0",
8+
"expose-loader": "^0.7.1",
9+
"extract-text-webpack-plugin": "^1.0.1",
10+
"file-loader": "^0.9.0",
11+
"raw-loader": "^0.5.1",
12+
"style-loader": "^0.13.0",
13+
"to-string-loader": "^1.1.5",
14+
"ts-loader": "^0.8.2",
15+
"typescript": "^2.0.0",
16+
"url-loader": "^0.5.7",
17+
"webpack": "^1.12.14",
18+
"webpack-externals-plugin": "^1.0.0",
19+
"webpack-hot-middleware": "^2.10.0",
20+
"webpack-merge": "^0.14.1"
21+
},
422
"dependencies": {
523
"@angular/common": "2.0.0",
624
"@angular/compiler": "2.0.0",
@@ -16,27 +34,12 @@
1634
"angular2-universal": "~2.0.10",
1735
"angular2-universal-polyfills": "~2.0.10",
1836
"aspnet-prerendering": "^1.0.6",
19-
"aspnet-webpack": "^1.0.11",
2037
"bootstrap": "^3.3.7",
21-
"css": "^2.2.1",
22-
"css-loader": "^0.25.0",
2338
"es6-shim": "^0.35.1",
24-
"expose-loader": "^0.7.1",
25-
"extract-text-webpack-plugin": "^1.0.1",
26-
"file-loader": "^0.9.0",
2739
"isomorphic-fetch": "^2.2.1",
2840
"jquery": "^2.2.1",
2941
"preboot": "^4.5.2",
30-
"raw-loader": "^0.5.1",
3142
"rxjs": "5.0.0-beta.12",
32-
"style-loader": "^0.13.0",
33-
"to-string-loader": "^1.1.5",
34-
"ts-loader": "^0.8.2",
35-
"typescript": "^2.0.0",
36-
"url-loader": "^0.5.7",
37-
"webpack": "^1.12.14",
38-
"webpack-externals-plugin": "^1.0.0",
39-
"webpack-hot-middleware": "^2.10.0",
4043
"zone.js": "^0.6.21"
4144
}
4245
}

‎templates/Angular2Spa/project.json‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,10 @@
5252
"publishOptions": {
5353
"include": [
5454
"appsettings.json",
55-
"ClientApp",
55+
"ClientApp/dist",
5656
"node_modules",
57-
"typings",
5857
"Views",
59-
"tsconfig.json",
60-
"tsd.json",
6158
"web.config",
62-
"webpack.*.js",
6359
"wwwroot"
6460
]
6561
},

‎templates/Angular2Spa/template_gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ Obj/
2929
# Visual Studio 2015 cache/options directory
3030
.vs/
3131
/wwwroot/dist/
32+
/ClientApp/dist/
3233

3334
# MSTest test Results
3435
[Tt]est[Rr]esult*/

‎templates/Angular2Spa/webpack.config.js‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
11
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
22
var path = require('path');
33
var webpack = require('webpack');
4+
var nodeExternals = require('webpack-node-externals');
5+
var merge = require('webpack-merge');
6+
var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;
47

5-
module.exports = {
6-
devtool: isDevBuild ? 'inline-source-map' : null,
8+
// Configuration in common to both client-side and server-side bundles
9+
var sharedConfig = {
710
resolve: { extensions: [ '', '.js', '.ts' ] },
8-
entry: { main: ['./ClientApp/boot-client.ts'] },
11+
output: {
12+
filename: '[name].js',
13+
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
14+
},
915
module: {
1016
loaders: [
1117
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
1218
{ test: /\.html$/, loader: 'raw' },
13-
{ test: /\.css/, loader: 'to-string!css' },
19+
{ test: /\.css$/, loader: 'to-string!css' },
1420
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
1521
]
16-
},
17-
output: {
18-
path: path.join(__dirname, 'wwwroot', 'dist'),
19-
filename: '[name].js',
20-
publicPath: '/dist/'
21-
},
22+
}
23+
};
24+
25+
// Configuration for client-side bundle suitable for running in browsers
26+
var clientBundleConfig = merge(sharedConfig, {
27+
entry: { 'main-client': './ClientApp/boot-client.ts' },
28+
output: { path: path.join(__dirname, './wwwroot/dist') },
29+
devtool: isDevBuild ? 'inline-source-map' : null,
2230
plugins: [
2331
new webpack.DllReferencePlugin({
2432
context: __dirname,
@@ -29,4 +37,18 @@ module.exports = {
2937
new webpack.optimize.OccurenceOrderPlugin(),
3038
new webpack.optimize.UglifyJsPlugin()
3139
])
32-
};
40+
});
41+
42+
// Configuration for server-side (prerendering) bundle suitable for running in Node
43+
var serverBundleConfig = merge(sharedConfig, {
44+
entry: { 'main-server': './ClientApp/boot-server.ts' },
45+
output: {
46+
libraryTarget: 'commonjs',
47+
path: path.join(__dirname, './ClientApp/dist')
48+
},
49+
target: 'node',
50+
devtool: 'inline-source-map',
51+
externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules
52+
});
53+
54+
module.exports = [clientBundleConfig, serverBundleConfig];

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ module.exports = {
1010
},
1111
module: {
1212
loaders: [
13-
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
14-
{ test: /\.css/, loader: extractCSS.extract(['css']) }
13+
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
14+
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
1515
]
1616
},
1717
entry: {

0 commit comments

Comments
 (0)