Add new Microsoft.AspNetCore.SpaServices.Extensions package to host new runtime functionality needed for updated templates until 2.1 ships

Author: SteveSandersonMS

JavaScriptServices.sln

@@ -1,7 +1,7 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio 15
-VisualStudioVersion = 15.0.26730.0
+VisualStudioVersion = 15.0.26730.16
 MinimumVisualStudioVersion = 15.0.26730.03
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{27304DDE-AFB2-4F8B-B765-E3E2F11E886C}"
 	ProjectSection(SolutionItems) = preProject
@@ -37,6 +37,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 		Directory.Build.targets = Directory.Build.targets
 	EndProjectSection
 EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Microsoft.AspNetCore.SpaServices.Extensions", "src\Microsoft.AspNetCore.SpaServices.Extensions\Microsoft.AspNetCore.SpaServices.Extensions.csproj", "{D40BD1C4-6A6F-4213-8535-1057F3EB3400}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -67,6 +69,10 @@ Global
 		{93EFCC5F-C6EE-4623-894F-A42B22C0B6FE}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{93EFCC5F-C6EE-4623-894F-A42B22C0B6FE}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{93EFCC5F-C6EE-4623-894F-A42B22C0B6FE}.Release|Any CPU.Build.0 = Release|Any CPU
+		{D40BD1C4-6A6F-4213-8535-1057F3EB3400}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{D40BD1C4-6A6F-4213-8535-1057F3EB3400}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{D40BD1C4-6A6F-4213-8535-1057F3EB3400}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{D40BD1C4-6A6F-4213-8535-1057F3EB3400}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -79,6 +85,7 @@ Global
 		{1931B19A-EC42-4D56-B2D0-FB06D17244DA} = {E6A161EA-646C-4033-9090-95BE809AB8D9}
 		{DE479DC3-1461-4EAD-A188-4AF7AA4AE344} = {E6A161EA-646C-4033-9090-95BE809AB8D9}
 		{93EFCC5F-C6EE-4623-894F-A42B22C0B6FE} = {E6A161EA-646C-4033-9090-95BE809AB8D9}
+		{D40BD1C4-6A6F-4213-8535-1057F3EB3400} = {27304DDE-AFB2-4F8B-B765-E3E2F11E886C}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {DDF59B0D-2DEC-45D6-8667-DCB767487101}

src/Microsoft.AspNetCore.SpaServices.Extensions/AngularCli/AngularCliBuilder.cs

@@ -0,0 +1,47 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.SpaServices.Prerendering;
+using System;
+using System.Threading.Tasks;
+
+namespace Microsoft.AspNetCore.SpaServices.AngularCli
+{
+    /// <summary>
+    /// Provides an implementation of <see cref="ISpaPrerendererBuilder"/> that can build
+    /// an Angular application by invoking the Angular CLI.
+    /// </summary>
+    public class AngularCliBuilder : ISpaPrerendererBuilder
+    {
+        private readonly string _cliAppName;
+
+        /// <summary>
+        /// Constructs an instance of <see cref="AngularCliBuilder"/>.
+        /// </summary>
+        /// <param name="cliAppName">The name of the application to be built. This must match an entry in your <c>.angular-cli.json</c> file.</param>
+        public AngularCliBuilder(string cliAppName)
+        {
+            _cliAppName = cliAppName;
+        }
+
+        /// <inheritdoc />
+        public Task Build(IApplicationBuilder app)
+        {
+            // Locate the AngularCliMiddleware within the provided IApplicationBuilder
+            if (app.Properties.TryGetValue(
+                AngularCliMiddleware.AngularCliMiddlewareKey,
+                out var angularCliMiddleware))
+            {
+                return ((AngularCliMiddleware)angularCliMiddleware)
+                    .StartAngularCliBuilderAsync(_cliAppName);
+            }
+            else
+            {
+                throw new Exception(
+                    $"Cannot use {nameof(AngularCliBuilder)} unless you are also using" +
+                    $" {nameof(AngularCliMiddlewareExtensions.UseAngularCliServer)}.");
+            }
+        }
+    }
+}

src/Microsoft.AspNetCore.SpaServices.Extensions/AngularCli/AngularCliMiddleware.cs

@@ -0,0 +1,138 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.NodeServices;
+using System;
+using System.IO;
+using System.Net.Http;
+using System.Threading.Tasks;
+using System.Threading;
+using Microsoft.AspNetCore.SpaServices.Extensions.Proxy;
+
+namespace Microsoft.AspNetCore.SpaServices.AngularCli
+{
+    internal class AngularCliMiddleware
+    {
+        private const string _middlewareResourceName = "/Content/Node/angular-cli-middleware.js";
+
+        internal readonly static string AngularCliMiddlewareKey = Guid.NewGuid().ToString();
+
+        private readonly INodeServices _nodeServices;
+        private readonly string _middlewareScriptPath;
+        private readonly HttpClient _neverTimeOutHttpClient =
+            ConditionalProxy.CreateHttpClientForProxy(Timeout.InfiniteTimeSpan);
+
+        public AngularCliMiddleware(
+            IApplicationBuilder appBuilder,
+            string sourcePath,
+            SpaDefaultPageMiddleware defaultPageMiddleware)
+        {
+            if (string.IsNullOrEmpty(sourcePath))
+            {
+                throw new ArgumentException("Cannot be null or empty", nameof(sourcePath));
+            }
+
+            // Prepare to make calls into Node
+            _nodeServices = CreateNodeServicesInstance(appBuilder, sourcePath);
+            _middlewareScriptPath = GetAngularCliMiddlewareScriptPath(appBuilder);
+
+            // Start Angular CLI and attach to middleware pipeline
+            var angularCliServerInfoTask = StartAngularCliServerAsync();
+
+            // Everything we proxy is hardcoded to target http://localhost because:
+            // - the requests are always from the local machine (we're not accepting remote
+            //   requests that go directly to the Angular CLI middleware server)
+            // - given that, there's no reason to use https, and we couldn't even if we
+            //   wanted to, because in general the Angular CLI server has no certificate
+            var proxyOptionsTask = angularCliServerInfoTask.ContinueWith(
+                task => new ConditionalProxyMiddlewareTarget(
+                    "http", "localhost", task.Result.Port.ToString()));
+
+            var applicationStoppingToken = GetStoppingToken(appBuilder);
+
+            // Proxy all requests into the Angular CLI server
+            appBuilder.Use(async (context, next) =>
+            {
+                var didProxyRequest = await ConditionalProxy.PerformProxyRequest(
+                    context, _neverTimeOutHttpClient, proxyOptionsTask, applicationStoppingToken);
+
+                // Since we are proxying everything, this is the end of the middleware pipeline.
+                // We won't call next().
+                if (!didProxyRequest)
+                {
+                    context.Response.StatusCode = 404;
+                }
+            });
+
+            // Advertise the availability of this feature to other SPA middleware
+            appBuilder.Properties.Add(AngularCliMiddlewareKey, this);
+        }
+
+        internal Task StartAngularCliBuilderAsync(string cliAppName)
+        {
+            return _nodeServices.InvokeExportAsync<AngularCliServerInfo>(
+                _middlewareScriptPath,
+                "startAngularCliBuilder",
+                cliAppName);
+        }
+
+        private static INodeServices CreateNodeServicesInstance(
+            IApplicationBuilder appBuilder, string sourcePath)
+        {
+            // Unlike other consumers of NodeServices, AngularCliMiddleware dosen't share Node instances, nor does it
+            // use your DI configuration. It's important for AngularCliMiddleware to have its own private Node instance
+            // because it must *not* restart when files change (it's designed to watch for changes and rebuild).
+            var nodeServicesOptions = new NodeServicesOptions(appBuilder.ApplicationServices)
+            {
+                WatchFileExtensions = new string[] { }, // Don't watch anything
+                ProjectPath = Path.Combine(Directory.GetCurrentDirectory(), sourcePath),
+            };
+
+            if (!Directory.Exists(nodeServicesOptions.ProjectPath))
+            {
+                throw new DirectoryNotFoundException($"Directory not found: {nodeServicesOptions.ProjectPath}");
+            }
+
+            return NodeServicesFactory.CreateNodeServices(nodeServicesOptions);
+        }
+
+        private static string GetAngularCliMiddlewareScriptPath(IApplicationBuilder appBuilder)
+        {
+            var script = EmbeddedResourceReader.Read(typeof(AngularCliMiddleware), _middlewareResourceName);
+            var nodeScript = new StringAsTempFile(script, GetStoppingToken(appBuilder));
+            return nodeScript.FileName;
+        }
+
+        private static CancellationToken GetStoppingToken(IApplicationBuilder appBuilder)
+        {
+            var applicationLifetime = appBuilder
+                .ApplicationServices
+                .GetService(typeof(IApplicationLifetime));
+            return ((IApplicationLifetime)applicationLifetime).ApplicationStopping;
+        }
+
+        private async Task<AngularCliServerInfo> StartAngularCliServerAsync()
+        {
+            // Tell Node to start the server hosting the Angular CLI
+            var angularCliServerInfo = await _nodeServices.InvokeExportAsync<AngularCliServerInfo>(
+                _middlewareScriptPath,
+                "startAngularCliServer");
+
+            // Even after the Angular CLI claims to be listening for requests, there's a short
+            // period where it will give an error if you make a request too quickly. Give it
+            // a moment to finish starting up.
+            await Task.Delay(500);
+
+            return angularCliServerInfo;
+        }
+
+#pragma warning disable CS0649
+        class AngularCliServerInfo
+        {
+            public int Port { get; set; }
+        }
+    }
+#pragma warning restore CS0649
+}

src/Microsoft.AspNetCore.SpaServices.Extensions/AngularCli/AngularCliMiddlewareExtensions.cs

@@ -0,0 +1,37 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using Microsoft.AspNetCore.Builder;
+using System;
+
+namespace Microsoft.AspNetCore.SpaServices.AngularCli
+{
+    /// <summary>
+    /// Extension methods for enabling Angular CLI middleware support.
+    /// </summary>
+    public static class AngularCliMiddlewareExtensions
+    {
+        /// <summary>
+        /// Handles requests by passing them through to an instance of the Angular CLI server.
+        /// This means you can always serve up-to-date CLI-built resources without having
+        /// to run the Angular CLI server manually.
+        ///
+        /// This feature should only be used in development. For production deployments, be
+        /// sure not to enable the Angular CLI server.
+        /// </summary>
+        /// <param name="app">The <see cref="IApplicationBuilder"/>.</param>
+        /// <param name="sourcePath">The disk path, relative to the current directory, of the directory containing the SPA source files. When Angular CLI executes, this will be its working directory.</param>
+        public static void UseAngularCliServer(
+            this IApplicationBuilder app,
+            string sourcePath)
+        {
+            var defaultPageMiddleware = SpaDefaultPageMiddleware.FindInPipeline(app);
+            if (defaultPageMiddleware == null)
+            {
+                throw new Exception($"{nameof(UseAngularCliServer)} should be called inside the 'configue' callback of a call to {nameof(SpaApplicationBuilderExtensions.UseSpa)}.");
+            }
+
+            new AngularCliMiddleware(app, sourcePath, defaultPageMiddleware);
+        }
+    }
+}

src/Microsoft.AspNetCore.SpaServices.Extensions/Content/Node/angular-cli-middleware.js

@@ -0,0 +1,78 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+var childProcess = require('child_process');
+var net = require('net');
+var readline = require('readline');
+var url = require('url');
+
+module.exports = {
+    startAngularCliBuilder: function startAngularCliBuilder(callback, appName) {    
+        var proc = executeAngularCli([
+            'build',
+            '-app', appName,
+            '--watch'
+        ]);
+        proc.stdout.pipe(process.stdout);
+        waitForLine(proc.stdout, /chunk/).then(function () {
+            callback();
+        });
+    },
+
+    startAngularCliServer: function startAngularCliServer(callback, options) {
+        getOSAssignedPortNumber().then(function (portNumber) {
+            // Start @angular/cli dev server on private port, and pipe its output
+            // back to the ASP.NET host process.
+            // TODO: Support streaming arbitrary chunks to host process's stdout
+            // rather than just full lines, so we can see progress being logged
+            var devServerProc = executeAngularCli([
+                'serve',
+                '--port', portNumber.toString(),
+                '--deploy-url', '/dist/', // Value should come from .angular-cli.json, but https://github.com/angular/angular-cli/issues/7347
+                '--extract-css'
+            ]);
+            devServerProc.stdout.pipe(process.stdout);
+
+            // Wait until the CLI dev server is listening before letting ASP.NET start the app
+            console.log('Waiting for @angular/cli service to start...');
+            waitForLine(devServerProc.stdout, /open your browser on (http\S+)/).then(function (matches) {
+                var devServerUrl = url.parse(matches[1]);
+                console.log('@angular/cli service has started on internal port ' + devServerUrl.port);
+                callback(null, {
+                    Port: parseInt(devServerUrl.port)
+                });
+            });
+        });
+    }
+};
+
+function waitForLine(stream, regex) {
+    return new Promise(function (resolve, reject) {
+        var lineReader = readline.createInterface({ input: stream });
+        var listener = function (line) {
+            var matches = regex.exec(line);
+            if (matches) {
+                lineReader.removeListener('line', listener);
+                resolve(matches);
+            }
+        };
+        lineReader.addListener('line', listener);
+    });
+}
+
+function executeAngularCli(args) {
+    var angularCliBin = require.resolve('@angular/cli/bin/ng');
+    return childProcess.fork(angularCliBin, args, {
+        stdio: [/* stdin */ 'ignore', /* stdout */ 'pipe', /* stderr */ 'inherit', 'ipc']
+    });
+}
+
+function getOSAssignedPortNumber() {
+    return new Promise(function (resolve, reject) {
+        var server = net.createServer();
+        server.listen(0, 'localhost', function () {
+            var portNumber = server.address().port;
+            server.close(function () { resolve(portNumber); });
+        });
+    });
+}

src/Microsoft.AspNetCore.SpaServices.Extensions/Microsoft.AspNetCore.SpaServices.Extensions.csproj

@@ -0,0 +1,20 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <Description>Helpers for building single-page applications on ASP.NET MVC Core.</Description>
+    <TargetFramework>netstandard2.0</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <EmbeddedResource Include="Content\**\*" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Microsoft.AspNetCore.SpaServices\Microsoft.AspNetCore.SpaServices.csproj" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.StaticFiles" />
+  </ItemGroup>
+
+</Project>

src/Microsoft.AspNetCore.SpaServices.Extensions/Prerendering/ISpaPrerendererBuilder.cs

@@ -0,0 +1,25 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using Microsoft.AspNetCore.Builder;
+using System.Threading.Tasks;
+
+namespace Microsoft.AspNetCore.SpaServices.Prerendering
+{
+    /// <summary>
+    /// Represents the ability to build a Single Page Application application on demand
+    /// so that it can be prerendered. This is only intended to be used at development
+    /// time. In production, a SPA should already be built during publishing.
+    /// </summary>
+    public interface ISpaPrerendererBuilder
+    {
+        /// <summary>
+        /// Builds the Single Page Application so that a JavaScript entrypoint file
+        /// exists on disk. Prerendering middleware can then execute that file in
+        /// a Node environment.
+        /// </summary>
+        /// <param name="appBuilder">The <see cref="IApplicationBuilder"/>.</param>
+        /// <returns>A <see cref="Task"/> representing completion of the build process.</returns>
+        Task Build(IApplicationBuilder appBuilder);
+    }
+}