Allow the Angular/React-DevServer to run on a given port (#16582)

Author: flensrocker

src/Middleware/SpaServices.Extensions/ref/Microsoft.AspNetCore.SpaServices.Extensions.netcoreapp.cs

@@ -43,6 +43,7 @@ public SpaOptions() { }
         public Microsoft.AspNetCore.Builder.StaticFileOptions DefaultPageStaticFileOptions { [System.Runtime.CompilerServices.CompilerGeneratedAttribute] get { throw null; } [System.Runtime.CompilerServices.CompilerGeneratedAttribute] set { } }
         public string PackageManagerCommand { get { throw null; } set { } }
         public string SourcePath { [System.Runtime.CompilerServices.CompilerGeneratedAttribute] get { throw null; } [System.Runtime.CompilerServices.CompilerGeneratedAttribute] set { } }
+        public int DevServerPort { [System.Runtime.CompilerServices.CompilerGeneratedAttribute] get { throw null; } [System.Runtime.CompilerServices.CompilerGeneratedAttribute] set { } }
         public System.TimeSpan StartupTimeout { [System.Runtime.CompilerServices.CompilerGeneratedAttribute] get { throw null; } [System.Runtime.CompilerServices.CompilerGeneratedAttribute] set { } }
     }
 }

src/Middleware/SpaServices.Extensions/src/AngularCli/AngularCliMiddleware.cs

@@ -27,6 +27,7 @@ public static void Attach(
         {
             var pkgManagerCommand = spaBuilder.Options.PackageManagerCommand;
             var sourcePath = spaBuilder.Options.SourcePath;
+            var devServerPort = spaBuilder.Options.DevServerPort;
             if (string.IsNullOrEmpty(sourcePath))
             {
                 throw new ArgumentException("Cannot be null or empty", nameof(sourcePath));
@@ -40,7 +41,7 @@ public static void Attach(
             // Start Angular CLI and attach to middleware pipeline
             var appBuilder = spaBuilder.ApplicationBuilder;
             var logger = LoggerFinder.GetOrCreateLogger(appBuilder, LogCategoryName);
-            var angularCliServerInfoTask = StartAngularCliServerAsync(sourcePath, scriptName, pkgManagerCommand, logger);
+            var angularCliServerInfoTask = StartAngularCliServerAsync(sourcePath, scriptName, pkgManagerCommand, devServerPort, logger);
 
             // Everything we proxy is hardcoded to target http://localhost because:
             // - the requests are always from the local machine (we're not accepting remote
@@ -63,9 +64,12 @@ public static void Attach(
         }
 
         private static async Task<AngularCliServerInfo> StartAngularCliServerAsync(
-            string sourcePath, string scriptName, string pkgManagerCommand, ILogger logger)
+            string sourcePath, string scriptName, string pkgManagerCommand, int portNumber, ILogger logger)
         {
-            var portNumber = TcpPortFinder.FindAvailablePort();
+            if (portNumber == default(int))
+            {
+                portNumber = TcpPortFinder.FindAvailablePort();
+            }
             logger.LogInformation($"Starting @angular/cli on port {portNumber}...");
 
             var scriptRunner = new NodeScriptRunner(

src/Middleware/SpaServices.Extensions/src/ReactDevelopmentServer/ReactDevelopmentServerMiddleware.cs

@@ -26,6 +26,7 @@ public static void Attach(
         {
             var pkgManagerCommand = spaBuilder.Options.PackageManagerCommand;
             var sourcePath = spaBuilder.Options.SourcePath;
+            var devServerPort = spaBuilder.Options.DevServerPort;
             if (string.IsNullOrEmpty(sourcePath))
             {
                 throw new ArgumentException("Cannot be null or empty", nameof(sourcePath));
@@ -39,7 +40,7 @@ public static void Attach(
             // Start create-react-app and attach to middleware pipeline
             var appBuilder = spaBuilder.ApplicationBuilder;
             var logger = LoggerFinder.GetOrCreateLogger(appBuilder, LogCategoryName);
-            var portTask = StartCreateReactAppServerAsync(sourcePath, scriptName, pkgManagerCommand, logger);
+            var portTask = StartCreateReactAppServerAsync(sourcePath, scriptName, pkgManagerCommand, devServerPort, logger);
 
             // Everything we proxy is hardcoded to target http://localhost because:
             // - the requests are always from the local machine (we're not accepting remote
@@ -62,9 +63,12 @@ public static void Attach(
         }
 
         private static async Task<int> StartCreateReactAppServerAsync(
-            string sourcePath, string scriptName, string pkgManagerCommand, ILogger logger)
+            string sourcePath, string scriptName, string pkgManagerCommand, int portNumber, ILogger logger)
         {
-            var portNumber = TcpPortFinder.FindAvailablePort();
+            if (portNumber == default(int))
+            {
+                portNumber = TcpPortFinder.FindAvailablePort();
+            }
             logger.LogInformation($"Starting create-react-app server on port {portNumber}...");
 
             var envVars = new Dictionary<string, string>

src/Middleware/SpaServices.Extensions/src/SpaOptions.cs

@@ -33,6 +33,7 @@ internal SpaOptions(SpaOptions copyFromOptions)
             _packageManagerCommand = copyFromOptions.PackageManagerCommand;
             DefaultPageStaticFileOptions = copyFromOptions.DefaultPageStaticFileOptions;
             SourcePath = copyFromOptions.SourcePath;
+            DevServerPort = copyFromOptions.DevServerPort;
         }
 
         /// <summary>
@@ -70,6 +71,11 @@ public PathString DefaultPage
         /// </summary>
         public string SourcePath { get; set; }
 
+        /// <summary>
+        /// Controls wether the development server should be used with a dynamic or fixed port.
+        /// </summary>
+        public int DevServerPort { get; set; } = default(int);
+
         /// <summary>
         /// Gets or sets the name of the package manager executible, (e.g npm,
         /// yarn) to run the SPA.