[Templates] Update the react template to use the CLI proxy instead of our proxy

src/Middleware/Spa/SpaProxy/src/SpaProxyLaunchManager.cs

@@ -63,7 +63,9 @@ private async Task<bool> ProbeSpaDevelopmentServerUrl(HttpClient httpClient, Can
                 var running = response.IsSuccessStatusCode;
                 return running;
             }
-            catch (Exception exception) when (exception is HttpRequestException || exception is TaskCanceledException)
+            catch (Exception exception) when (exception is HttpRequestException ||
+                  exception is TaskCanceledException ||
+                  exception is OperationCanceledException)
             {
                 _logger.LogDebug(exception, "Failed to connect to the SPA Development proxy.");
                 return false;

src/ProjectTemplates/Web.Spa.ProjectTemplates/Angular-CSharp.csproj.in

@@ -8,7 +8,6 @@
     <SpaProxyServerUrl Condition="'$(RequiresHttps)' != 'True'">http://localhost:5002</SpaProxyServerUrl>
     <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
     <NoDefaultLaunchSettingsFile Condition="'$(ExcludeLaunchSettings)' == 'True'">True</NoDefaultLaunchSettingsFile>
-
     <RootNamespace Condition="'$(name)' != '$(name{-VALUE-FORMS-}safe_namespace)'">Company.WebApplication1</RootNamespace>
   </PropertyGroup>
 

src/ProjectTemplates/Web.Spa.ProjectTemplates/React-CSharp.csproj.in

@@ -8,15 +8,19 @@
     <SpaRoot>ClientApp\</SpaRoot>
     <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
     <NoDefaultLaunchSettingsFile Condition="'$(ExcludeLaunchSettings)' == 'True'">True</NoDefaultLaunchSettingsFile>
+    <SpaProxyServerUrl Condition="'$(RequiresHttps)' == 'True'">https://localhost:5002</SpaProxyServerUrl>
+    <SpaProxyServerUrl Condition="'$(RequiresHttps)' != 'True'">http://localhost:5002</SpaProxyServerUrl>
+    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
+    <NoDefaultLaunchSettingsFile Condition="'$(ExcludeLaunchSettings)' == 'True'">True</NoDefaultLaunchSettingsFile>
     <RootNamespace Condition="'$(name)' != '$(name{-VALUE-FORMS-}safe_namespace)'">Company.WebApplication1</RootNamespace>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="${MicrosoftAspNetCoreSpaServicesExtensionsVersion}" />
     <PackageReference Include="Microsoft.AspNetCore.ApiAuthorization.IdentityServer" Version="${MicrosoftAspNetCoreApiAuthorizationIdentityServerVersion}" Condition=" '$(IndividualLocalAuth)' == 'True' " />
     <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="${MicrosoftAspNetCoreDiagnosticsEntityFrameworkCoreVersion}" Condition=" '$(IndividualLocalAuth)' == 'True' " />
     <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="${MicrosoftAspNetCoreIdentityEntityFrameworkCoreVersion}" Condition=" '$(IndividualLocalAuth)' == 'True' " />
     <PackageReference Include="Microsoft.AspNetCore.Identity.UI" Version="${MicrosoftAspNetCoreIdentityUIVersion}" Condition=" '$(IndividualLocalAuth)' == 'True' " />
+    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="${MicrosoftAspNetCoreSpaProxyVersion}" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Relational" Version="${MicrosoftEntityFrameworkCoreRelationalVersion}" Condition=" '$(IndividualLocalAuth)' == 'True' " />
     <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="${MicrosoftEntityFrameworkCoreSqlServerVersion}" Condition=" '$(IndividualLocalAuth)' == 'True' AND '$(UseLocalDB)' == 'True'" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="${MicrosoftEntityFrameworkCoreSqliteVersion}" Condition=" '$(IndividualLocalAuth)' == 'True' AND '$(UseLocalDB)' != 'True'" />
@@ -54,7 +58,7 @@
     <ItemGroup>
       <DistFiles Include="$(SpaRoot)build\**" />
       <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
-        <RelativePath>%(DistFiles.Identity)</RelativePath>
+        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
         <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
         <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
       </ResolvedFileToPublish>

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/Startup.cs

@@ -54,6 +54,7 @@ public void ConfigureServices(IServiceCollection services)
             services.AddAuthentication()
                 .AddIdentityServerJwt();
 #endif
+
             services.AddControllersWithViews();
 #if (IndividualLocalAuth)
             services.AddRazorPages();

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/.template.config/template.json

@@ -39,6 +39,13 @@
             "Controllers/OidcConfigurationController.cs"
           ]
         },
+        {
+          "condition": "(!RequiresHttps)",
+          "exclude": [
+            "ClientApp/aspnetcore-https.js",
+            "ClientApp/aspnetcore-react.js"
+          ]
+        },
         {
           "condition": "(!IndividualLocalAuth || UseLocalDB)",
           "exclude": [

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/.env.development

@@ -0,0 +1,4 @@
+PORT=5002
+//#if(RequiresHttps)
+HTTPS=true
+//#endif

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/aspnetcore-https.js

@@ -0,0 +1,33 @@
+// This script sets up HTTPS for the application using the ASP.NET Core HTTPS certificate
+const fs = require('fs');
+const spawn = require('child_process').spawn;
+const path = require('path');
+
+const baseFolder =
+  process.env.APPDATA !== undefined && process.env.APPDATA !== ''
+    ? `${process.env.APPDATA}/ASP.NET/https`
+    : `${process.env.HOME}/.aspnet/https`;
+
+const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0];
+const certificateName = certificateArg ? certificateArg.groups.value : process.env.npm_package_name;
+
+if (!certificateName) {
+  console.error('Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly.')
+  process.exit(-1);
+}
+
+const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
+const keyFilePath = path.join(baseFolder, `${certificateName}.key`);
+
+if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
+  spawn('dotnet', [
+    'dev-certs',
+    'https',
+    '--export-path',
+    certFilePath,
+    '--format',
+    'Pem',
+    '--no-password',
+  ], { stdio: 'inherit', })
+  .on('exit', (code) => process.exit(code));
+}

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/aspnetcore-react.js

@@ -0,0 +1,55 @@
+// This script configures the .env.development.local file with additional environment variables to configure HTTPS using the ASP.NET Core
+// development certificate in the webpack development proxy.
+
+const fs = require('fs');
+const path = require('path');
+
+const baseFolder =
+  process.env.APPDATA !== undefined && process.env.APPDATA !== ''
+    ? `${process.env.APPDATA}/ASP.NET/https`
+    : `${process.env.HOME}/.aspnet/https`;
+
+const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0];
+const certificateName = certificateArg ? certificateArg.groups.value : process.env.npm_package_name;
+
+if (!certificateName) {
+  console.error('Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly.')
+  process.exit(-1);
+}
+
+const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
+const keyFilePath = path.join(baseFolder, `${certificateName}.key`);
+
+if (!fs.existsSync('.env.development.local')) {
+  fs.writeFileSync(
+    '.env.development.local',
+`SSL_CRT_FILE=${certFilePath}
+SSL_KEY_FILE=${keyFilePath}`
+  );
+} else {
+  let lines = fs.readFileSync('.env.development.local')
+    .toString()
+    .split('\n');
+
+  let hasCert, hasCertKey = false;
+  for (const line of lines) {
+    if (/SSL_CRT_FILE=.*/i.test(line)) {
+      hasCert = true;
+    }
+    if (/SSL_KEY_FILE=.*/i.test(line)) {
+      hasCertKey = true;
+    }
+  }
+  if (!hasCert) {
+    fs.appendFileSync(
+      '.env.development.local',
+      `\nSSL_CRT_FILE=${certFilePath}`
+    );
+  }
+  if (!hasCertKey) {
+    fs.appendFileSync(
+      '.env.development.local',
+      `\nSSL_KEY_FILE=${keyFilePath}`
+    );
+  }
+}