demo 11 - hmr

Author: cecilphillip

.vscode/launch.json

@@ -10,9 +10,9 @@
             "request": "launch",
             "preLaunchTask": "build",
             // If you have changed target frameworks, make sure to update the program path.
-            "program": "${workspaceFolder}/src/demo9/bin/Debug/netcoreapp2.1/demo9.dll",
+            "program": "${workspaceFolder}/src/demo11/bin/Debug/netcoreapp2.1/demo11.dll",
             "args": [],
-            "cwd": "${workspaceFolder}/src/demo9",
+            "cwd": "${workspaceFolder}/src/demo11",
             "stopAtEntry": false,
             "internalConsoleOptions": "openOnSessionStart",
             "launchBrowser": {

.vscode/tasks.json

@@ -7,7 +7,7 @@
             "type": "process",
             "args": [
                 "build",
-                "${workspaceFolder}/src/demo9/demo9.csproj"
+                "${workspaceFolder}/src/demo11/demo11.csproj"
             ],
             "problemMatcher": "$msCompile"
         }

README.MD

@@ -33,6 +33,8 @@ The master branch is currently using .NET Core 2.1, ASP.NET Core 2.1, Vue.js 2.5
 
 - [Demo 10](src/demo10) - Same as demo 9, but built using the .NET CLI and the Vue.js CLI.
 
+- [Demo 11](src/demo11) - **Ignore this. Nothing to see here!** Hot module replacement using Vue CLI and Microsoft.AspNetCore.SpaServices. Borrowed some code from [JavaScriptServices](https://github.com/aspnet/JavaScriptServices/tree/2.1.0/src/Microsoft.AspNetCore.SpaServices.Extensions/AngularCli)
+
 ## Useful tools
 
 - [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=code-github-cephilli)

src/demo11/Extensions/EventedStreamReader.cs

@@ -0,0 +1,38 @@
+using System;
+using System.IO;
+using System.Net;
+using System.Net.Sockets;
+using System.Text;
+using System.Text.RegularExpressions;
+using System.Threading;
+using System.Threading.Tasks;
+
+namespace demo11.Extensions
+{
+    public static class TaskTimeoutExtensions
+    {
+        public static async Task WithTimeout(this Task task, TimeSpan timeoutDelay, string message)
+        {
+            if (task == await Task.WhenAny(task, Task.Delay(timeoutDelay)))
+            {
+                task.Wait(); // Allow any errors to propagate
+            }
+            else
+            {
+                throw new TimeoutException(message);
+            }
+        }
+
+        public static async Task<T> WithTimeout<T>(this Task<T> task, TimeSpan timeoutDelay, string message)
+        {
+            if (task == await Task.WhenAny(task, Task.Delay(timeoutDelay)))
+            {
+                return task.Result;
+            }
+            else
+            {
+                throw new TimeoutException(message);
+            }
+        }
+    }
+}

src/demo11/Extensions/NpmScriptRunner.cs

@@ -0,0 +1,118 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Runtime.InteropServices;
+using System.Text.RegularExpressions;
+using Microsoft.Extensions.Logging;
+
+namespace demo11.Extensions
+{
+    public class NpmScriptRunner
+    {
+        private static Regex AnsiColorRegex = new Regex("\x001b\\[[0-9;]*m", RegexOptions.None, TimeSpan.FromSeconds(1));
+        private Process _process;
+
+        public NpmScriptRunner(string workingDirectory, string scriptName, string arguments, IDictionary<string, string> envVars)
+        {
+            if (string.IsNullOrEmpty(workingDirectory))
+            {
+                throw new ArgumentException("Cannot be null or empty.", nameof(workingDirectory));
+            }
+
+            if (string.IsNullOrEmpty(scriptName))
+            {
+                throw new ArgumentException("Cannot be null or empty.", nameof(scriptName));
+            }
+
+            var npmExe = "npm";
+            var completeArguments = $"run {scriptName} -- {arguments ?? string.Empty}";
+            if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
+            {
+                // On Windows, the NPM executable is a .cmd file, so it can't be executed
+                // directly (except with UseShellExecute=true, but that's no good, because
+                // it prevents capturing stdio). So we need to invoke it via "cmd /c".
+                npmExe = "cmd";
+                completeArguments = $"/c npm {completeArguments}";
+            }
+
+            var processStartInfo = new ProcessStartInfo(npmExe)
+            {
+                Arguments = completeArguments,
+                UseShellExecute = false,
+                RedirectStandardInput = true,
+                RedirectStandardOutput = true,
+                RedirectStandardError = true,
+                WorkingDirectory = workingDirectory
+            };
+
+            if (envVars != null)
+            {
+                foreach (var keyValuePair in envVars)
+                {
+                    processStartInfo.Environment[keyValuePair.Key] = keyValuePair.Value;
+                }
+            }
+
+             _process = LaunchNodeProcess(processStartInfo);
+        }
+
+        public void AttachToLogger(ILogger logger)
+        {
+            // // When the NPM task emits complete lines, pass them through to the real logger
+            // StdOut.OnReceivedLine += line =>
+            // {
+            //     if (!string.IsNullOrWhiteSpace(line))
+            //     {
+            //         // NPM tasks commonly emit ANSI colors, but it wouldn't make sense to forward
+            //         // those to loggers (because a logger isn't necessarily any kind of terminal)
+            //         logger.LogInformation(StripAnsiColors(line));
+            //     }
+            // };
+
+            // StdErr.OnReceivedLine += line =>
+            // {
+            //     if (!string.IsNullOrWhiteSpace(line))
+            //     {
+            //         logger.LogError(StripAnsiColors(line));
+            //     }
+            // };
+
+            // // But when it emits incomplete lines, assume this is progress information and
+            // // hence just pass it through to StdOut regardless of logger config.
+            // StdErr.OnReceivedChunk += chunk =>
+            // {
+            //     var containsNewline = Array.IndexOf(
+            //         chunk.Array, '\n', chunk.Offset, chunk.Count) >= 0;
+            //     if (!containsNewline)
+            //     {
+            //         Console.Write(chunk.Array, chunk.Offset, chunk.Count);
+            //     }
+            // };
+        }
+
+        private static string StripAnsiColors(string line)
+            => AnsiColorRegex.Replace(line, string.Empty);
+
+        private static Process LaunchNodeProcess(ProcessStartInfo startInfo)
+        {
+            try
+            {
+                var process = Process.Start(startInfo);
+
+                // See equivalent comment in OutOfProcessNodeInstance.cs for why
+                process.EnableRaisingEvents = true;
+
+                return process;
+            }
+            catch (Exception ex)
+            {
+                var message = $"Failed to start 'npm'. To resolve this:.\n\n"
+                            + "[1] Ensure that 'npm' is installed and can be found in one of the PATH directories.\n"
+                            + $"    Current PATH enviroment variable is: { Environment.GetEnvironmentVariable("PATH") }\n"
+                            + "    Make sure the executable is in one of those directories, or update your PATH.\n\n"
+                            + "[2] See the InnerException for further details of the cause.";
+                throw new InvalidOperationException(message, ex);
+            }
+        }
+    }
+}

src/demo11/Extensions/VueCliMiddleware.cs

@@ -0,0 +1,123 @@
+using System;
+using System.IO;
+using System.Net.Http;
+using System.Text.RegularExpressions;
+using System.Threading;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.SpaServices;
+using Microsoft.Extensions.Logging;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Logging.Console;
+using System.Net.Sockets;
+using System.Net;
+
+namespace demo11.Extensions
+{
+    public static class VueCliMiddleware
+    {
+        private const string LogCategoryName = "Microsoft.AspNetCore.SpaServices";
+        private static TimeSpan RegexMatchTimeout = TimeSpan.FromSeconds(10);
+
+        public static void Attach(ISpaBuilder spaBuilder, string npmScriptName)
+        {
+            var sourcePath = spaBuilder.Options.SourcePath;
+            if (string.IsNullOrEmpty(sourcePath))
+            {
+                throw new ArgumentException("Cannot be null or empty", nameof(sourcePath));
+            }
+
+            if (string.IsNullOrEmpty(npmScriptName))
+            {
+                throw new ArgumentException("Cannot be null or empty", nameof(npmScriptName));
+            }
+
+            // Start Vue CLI and attach to middleware pipeline
+            var appBuilder = spaBuilder.ApplicationBuilder;
+            var logger = LoggerFinder.GetOrCreateLogger(appBuilder, LogCategoryName);
+            var vueCliServerInfoTask = StartVueCliServerAsync(sourcePath, npmScriptName, logger);
+
+            SpaProxyingExtensions.UseProxyToSpaDevelopmentServer(spaBuilder, () =>
+            {
+                // On each request, we create a separate startup task with its own timeout. That way, even if
+                // the first request times out, subsequent requests could still work.
+                var timeout = spaBuilder.Options.StartupTimeout;
+                return vueCliServerInfoTask.WithTimeout(timeout,
+                    $"The Vue CLI process did not start listening for requests " +
+                    $"within the timeout period of {timeout.Seconds} seconds. " +
+                    $"Check the log output for error information.");
+            });
+        }
+
+        private static async Task<Uri> StartVueCliServerAsync(string sourcePath, string npmScriptName, ILogger logger)
+        {
+            var portNumber = FindAvailablePort();
+            logger.LogInformation("Starting the Vue CLI");
+
+            var npmScriptRunner = new NpmScriptRunner(sourcePath, npmScriptName, string.Empty, null);
+            npmScriptRunner.AttachToLogger(logger);
+
+            var uri = new Uri("http://localhost:8080");
+
+            await WaitForAngularCliServerToAcceptRequests(uri);
+
+            return uri;
+        }
+
+        private static async Task WaitForAngularCliServerToAcceptRequests(Uri cliServerUri)
+        {
+            var timeoutMilliseconds = 1000;
+            var client = new HttpClient();
+
+            while (true)
+            {
+                try
+                {
+                    // If we get any HTTP response, the CLI server is ready
+                    await client.SendAsync(new HttpRequestMessage(HttpMethod.Head, cliServerUri), new CancellationTokenSource(timeoutMilliseconds).Token);
+                    break;
+                }
+                catch (Exception)
+                {
+                    await Task.Delay(500);
+
+                    // Depending on the host's networking configuration, the requests can take a while
+                    // to go through, most likely due to the time spent resolving 'localhost'.
+                    // Each time we have a failure, allow a bit longer next time (up to a maximum).
+                    // This only influences the time until we regard the dev server as 'ready', so it
+                    // doesn't affect the runtime perf (even in dev mode) once the first connection is made.
+                    // Resolves https://github.com/aspnet/JavaScriptServices/issues/1611
+                    if (timeoutMilliseconds < 10000)
+                    {
+                        timeoutMilliseconds += 3000;
+                    }
+                }
+            }
+        }
+
+        private static int FindAvailablePort()
+        {
+            var listener = new TcpListener(IPAddress.Loopback, 0);
+            listener.Start();
+            try
+            {
+                return ((IPEndPoint)listener.LocalEndpoint).Port;
+            }
+            finally
+            {
+                listener.Stop();
+            }
+        }
+    }
+
+    public static class LoggerFinder
+    {
+        public static ILogger GetOrCreateLogger(IApplicationBuilder appBuilder, string logCategoryName)
+        {
+            // If the DI system gives us a logger, use it. Otherwise, set up a default one.
+            var loggerFactory = appBuilder.ApplicationServices.GetService<ILoggerFactory>();
+            var logger = loggerFactory != null ? loggerFactory.CreateLogger(logCategoryName) : new ConsoleLogger(logCategoryName, null, false);
+            return logger;
+        }
+    }
+}

src/demo11/Extensions/VueCliMiddlewareExtensions.cs

@@ -0,0 +1,28 @@
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.SpaServices;
+using System;
+
+namespace demo11.Extensions
+{
+ public static class VueCliMiddlewareExtensions
+    {
+        public static void UseVueCliServer(
+            this ISpaBuilder spaBuilder,
+            string npmScript)
+        {
+            if (spaBuilder == null)
+            {
+                throw new ArgumentNullException(nameof(spaBuilder));
+            }
+
+            var spaOptions = spaBuilder.Options;
+
+            if (string.IsNullOrEmpty(spaOptions.SourcePath))
+            {
+                throw new InvalidOperationException($"To use {nameof(UseVueCliServer)}, you must supply a non-empty value for the {nameof(SpaOptions.SourcePath)} property of {nameof(SpaOptions)} when calling {nameof(SpaApplicationBuilderExtensions.UseSpa)}.");
+            }
+
+            VueCliMiddleware.Attach(spaBuilder, npmScript);
+        }
+    }
+}

src/demo11/Program.cs

@@ -0,0 +1,24 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.Logging;
+
+namespace demo11
+{
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            CreateWebHostBuilder(args).Build().Run();
+        }
+
+        public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
+            WebHost.CreateDefaultBuilder(args)
+                .UseStartup<Startup>();
+    }
+}

src/demo11/Properties/launchSettings.json

@@ -0,0 +1,27 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:54056",
+      "sslPort": 44327
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "demo11": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:5001;http://localhost:5000",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}