From e87aa1f08823296ea066544ae93dd225820ede60 Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Wed, 28 Sep 2016 10:55:45 +0100 Subject: [PATCH] Change Angular2Spa template to build server (prerendering) bundle explicitly. This simplifies deployment, fixes various compatibility issues (like #306) and makes debugging much easier for developers using the template. --- .gitignore | 1 + templates/Angular2Spa/Views/Home/Index.cshtml | 5 +-- templates/Angular2Spa/package.json | 33 +++++++------- templates/Angular2Spa/project.json | 6 +-- templates/Angular2Spa/template_gitignore | 1 + templates/Angular2Spa/webpack.config.js | 44 ++++++++++++++----- .../Angular2Spa/webpack.config.vendor.js | 4 +- 7 files changed, 58 insertions(+), 36 deletions(-) diff --git a/.gitignore b/.gitignore index 06cc11a..9f1553e 100644 --- a/.gitignore +++ b/.gitignore @@ -36,4 +36,5 @@ npm-debug.log # repo have to be excluded here. /templates/*/node_modules/ /templates/*/wwwroot/dist/ +/templates/*/ClientApp/dist/ .vscode/ diff --git a/templates/Angular2Spa/Views/Home/Index.cshtml b/templates/Angular2Spa/Views/Home/Index.cshtml index 6adad5c..fc1ae58 100644 --- a/templates/Angular2Spa/Views/Home/Index.cshtml +++ b/templates/Angular2Spa/Views/Home/Index.cshtml @@ -2,10 +2,9 @@ ViewData["Title"] = "Home Page"; } -Loading... +Loading... @section scripts { - + } diff --git a/templates/Angular2Spa/package.json b/templates/Angular2Spa/package.json index 60d3753..c1c5384 100644 --- a/templates/Angular2Spa/package.json +++ b/templates/Angular2Spa/package.json @@ -1,6 +1,24 @@ { "name": "Angular2Spa", "version": "0.0.0", + "devDependencies": { + "aspnet-webpack": "^1.0.11", + "css": "^2.2.1", + "css-loader": "^0.25.0", + "expose-loader": "^0.7.1", + "extract-text-webpack-plugin": "^1.0.1", + "file-loader": "^0.9.0", + "raw-loader": "^0.5.1", + "style-loader": "^0.13.0", + "to-string-loader": "^1.1.5", + "ts-loader": "^0.8.2", + "typescript": "^2.0.0", + "url-loader": "^0.5.7", + "webpack": "^1.12.14", + "webpack-externals-plugin": "^1.0.0", + "webpack-hot-middleware": "^2.10.0", + "webpack-merge": "^0.14.1" + }, "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", @@ -16,27 +34,12 @@ "angular2-universal": "~2.0.10", "angular2-universal-polyfills": "~2.0.10", "aspnet-prerendering": "^1.0.6", - "aspnet-webpack": "^1.0.11", "bootstrap": "^3.3.7", - "css": "^2.2.1", - "css-loader": "^0.25.0", "es6-shim": "^0.35.1", - "expose-loader": "^0.7.1", - "extract-text-webpack-plugin": "^1.0.1", - "file-loader": "^0.9.0", "isomorphic-fetch": "^2.2.1", "jquery": "^2.2.1", "preboot": "^4.5.2", - "raw-loader": "^0.5.1", "rxjs": "5.0.0-beta.12", - "style-loader": "^0.13.0", - "to-string-loader": "^1.1.5", - "ts-loader": "^0.8.2", - "typescript": "^2.0.0", - "url-loader": "^0.5.7", - "webpack": "^1.12.14", - "webpack-externals-plugin": "^1.0.0", - "webpack-hot-middleware": "^2.10.0", "zone.js": "^0.6.21" } } diff --git a/templates/Angular2Spa/project.json b/templates/Angular2Spa/project.json index 1409429..0354023 100755 --- a/templates/Angular2Spa/project.json +++ b/templates/Angular2Spa/project.json @@ -52,14 +52,10 @@ "publishOptions": { "include": [ "appsettings.json", - "ClientApp", + "ClientApp/dist", "node_modules", - "typings", "Views", - "tsconfig.json", - "tsd.json", "web.config", - "webpack.*.js", "wwwroot" ] }, diff --git a/templates/Angular2Spa/template_gitignore b/templates/Angular2Spa/template_gitignore index 2ee8e59..6868c54 100644 --- a/templates/Angular2Spa/template_gitignore +++ b/templates/Angular2Spa/template_gitignore @@ -29,6 +29,7 @@ Obj/ # Visual Studio 2015 cache/options directory .vs/ /wwwroot/dist/ +/ClientApp/dist/ # MSTest test Results [Tt]est[Rr]esult*/ diff --git a/templates/Angular2Spa/webpack.config.js b/templates/Angular2Spa/webpack.config.js index ffbfd47..813c12a 100644 --- a/templates/Angular2Spa/webpack.config.js +++ b/templates/Angular2Spa/webpack.config.js @@ -1,24 +1,32 @@ var isDevBuild = process.argv.indexOf('--env.prod') < 0; var path = require('path'); var webpack = require('webpack'); +var nodeExternals = require('webpack-node-externals'); +var merge = require('webpack-merge'); +var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/; -module.exports = { - devtool: isDevBuild ? 'inline-source-map' : null, +// Configuration in common to both client-side and server-side bundles +var sharedConfig = { resolve: { extensions: [ '', '.js', '.ts' ] }, - entry: { main: ['./ClientApp/boot-client.ts'] }, + output: { + filename: '[name].js', + publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix + }, module: { loaders: [ { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, { test: /\.html$/, loader: 'raw' }, - { test: /\.css/, loader: 'to-string!css' }, + { test: /\.css$/, loader: 'to-string!css' }, { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } } ] - }, - output: { - path: path.join(__dirname, 'wwwroot', 'dist'), - filename: '[name].js', - publicPath: '/dist/' - }, + } +}; + +// Configuration for client-side bundle suitable for running in browsers +var clientBundleConfig = merge(sharedConfig, { + entry: { 'main-client': './ClientApp/boot-client.ts' }, + output: { path: path.join(__dirname, './wwwroot/dist') }, + devtool: isDevBuild ? 'inline-source-map' : null, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, @@ -29,4 +37,18 @@ module.exports = { new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin() ]) -}; +}); + +// Configuration for server-side (prerendering) bundle suitable for running in Node +var serverBundleConfig = merge(sharedConfig, { + entry: { 'main-server': './ClientApp/boot-server.ts' }, + output: { + libraryTarget: 'commonjs', + path: path.join(__dirname, './ClientApp/dist') + }, + target: 'node', + devtool: 'inline-source-map', + externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules +}); + +module.exports = [clientBundleConfig, serverBundleConfig]; diff --git a/templates/Angular2Spa/webpack.config.vendor.js b/templates/Angular2Spa/webpack.config.vendor.js index 7c78efd..5853c8d 100644 --- a/templates/Angular2Spa/webpack.config.vendor.js +++ b/templates/Angular2Spa/webpack.config.vendor.js @@ -10,8 +10,8 @@ module.exports = { }, module: { loaders: [ - { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, - { test: /\.css/, loader: extractCSS.extract(['css']) } + { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' }, + { test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) } ] }, entry: {