fix(javascriptservices): update for .net core 2.0

The webpack build was broken with .net core 2.0 The SpaServices middleware is incompatible with the cli webpack config This adds a config file for webpack that fixes it and was added to the new project build. Realtes to issues #734 and #701, clean-webpack-plugin needs to be installed otherwise webpack gets stuck in a rebuilding loop see webpack/watchpack#25 and referenced issues
aurelia · Sep 4, 2017 · f41af63 · f41af63
1 parent cdadbe1
commit f41af63
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 11 deletions.
diff --git a/lib/commands/new/project-template.js b/lib/commands/new/project-template.js
@@ -130,7 +130,8 @@ exports.ProjectTemplate = class {
           this.content
         ),
       ProjectItem.resource('appsettings.json', 'content/javascriptservices/appsettings.json').skipIfExists(),
-      ProjectItem.resource('global.json', 'content/javascriptservices/global.json').skipIfExists()
+      ProjectItem.resource('global.json', 'content/javascriptservices/global.json').skipIfExists(),
+      ProjectItem.resource('webpack.netcore.config.js', 'content/javascriptservices/webpack.netcore.config.js').skipIfExists()
     );
 
     return this;

diff --git a/lib/resources/content/javascriptservices/Startup.cs b/lib/resources/content/javascriptservices/Startup.cs
@@ -13,7 +13,7 @@ namespace WebApplicationBasic
 {
     public class Startup
     {
-        
+
         public Startup(IConfiguration configuration)
         {
             Configuration = configuration;
@@ -34,9 +34,13 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerF
             if (env.IsDevelopment())
             {
                 app.UseDeveloperExceptionPage();
-
-                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
-                    HotModuleReplacement = true
+                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
+                {
+                  HotModuleReplacement = true, 
+                  ConfigFile="webpack.netcore.config.js",
+                  HotModuleReplacementClientOptions = new Dictionary<string,string>{
+                    {"reload", "true"}
+                  }
                 });
             }
             else

diff --git a/lib/resources/content/javascriptservices/Views/Home/Index.cshtml b/lib/resources/content/javascriptservices/Views/Home/Index.cshtml
@@ -5,7 +5,15 @@
 <div aurelia-app="main">Loading...</div>
 
 @section scripts {
-  <script type="text/javascript" asp-src-include="~/dist/common.*.bundle.js" asp-append-version="true"></script>
-  <script type="text/javascript" asp-src-include="~/dist/vendor.*.bundle.js" asp-append-version="true"></script>
-  <script type="text/javascript" asp-src-include="~/dist/app.*.bundle.js" asp-append-version="true"></script>
+<environment names="Development">
+   <script type="text/javascript" src="~/dist/vendor.bundle.js" asp-append-version="true"></script>
+   <script type="text/javascript" src="~/dist/app.bundle.js" asp-append-version="true"></script>
+ </environment>
+<environment names="Production">
+   <script type="text/javascript" asp-src-include="~/dist/common.*.bundle.js" asp-append-version="true"></script>
+ </environment>
+ <environment names="Staging, Production">
+   <script type="text/javascript" asp-src-include="~/dist/vendor.*.bundle.js" asp-append-version="true"></script>
+   <script type="text/javascript" asp-src-include="~/dist/app.*.bundle.js" asp-append-version="true"></script>
+ </environment>
 }
diff --git a/lib/resources/content/javascriptservices/project.csproj b/lib/resources/content/javascriptservices/project.csproj
@@ -2,6 +2,7 @@
   <PropertyGroup>
     <TargetFramework>netcoreapp2.0</TargetFramework>
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
+    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
     <IsPackable>false</IsPackable>
   </PropertyGroup>
   <ItemGroup>
@@ -18,11 +19,10 @@
   <ItemGroup>
     <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
   </ItemGroup>
-  <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
+  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
     <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
     <Exec Command="npm install" />
-    <Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
-    <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
+    <Exec Command="au build --env prod" />
     <!-- Include the newly-built files in the publish output -->
     <ItemGroup>
       <DistFiles Include="wwwroot\dist\**" />

diff --git a/lib/resources/content/javascriptservices/webpack.netcore.config.js b/lib/resources/content/javascriptservices/webpack.netcore.config.js
@@ -0,0 +1,16 @@
+const webpackConfig = require('./webpack.config');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+var originalConfig = webpackConfig({});
+
+module.exports = () => {
+  let config = { ...originalConfig };
+  config.output.filename = '[name].bundle.js';
+  config.output.publicPath = '/dist/';
+  config.plugins.splice(config.plugins.indexOf(HtmlWebpackPlugin));
+  config.plugins = [
+    new CleanWebpackPlugin([config.output.path]),
+    ...config.plugins
+  ];
+  return config;
+};