Delen via


Overzicht van apps met één pagina (SPA's) in ASP.NET Core

Opmerking

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikel voor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie het .NET- en .NET Core-ondersteuningsbeleid voor meer informatie. Zie de .NET 9-versie van dit artikel voor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikel voor de huidige release.

Visual Studio biedt projectsjablonen voor het maken van apps met één pagina (SPA's) op basis van JavaScript-frameworks zoals Angular-, Reacten Vue- met een ASP.NET Core-back-end. Deze sjablonen:

  • Maak een Visual Studio-oplossing met een front-endproject en een back-endproject.
  • Gebruik het Visual Studio-projecttype voor JavaScript en TypeScript (.esproj) voor de front-end.
  • Gebruik een ASP.NET Core-project voor de back-end.

Projecten die zijn gemaakt met behulp van de Visual Studio-sjablonen kunnen worden uitgevoerd vanaf de opdrachtregel in Windows, Linux en macOS. Als u de app wilt uitvoeren, gebruikt u dotnet run --launch-profile https om het serverproject uit te voeren. Als u het serverproject uitvoert, wordt de front-end JavaScript-ontwikkelserver automatisch gestart. Het https startprofiel is momenteel vereist.

Visual Studio-handleidingen

Volg een van de zelfstudies in de Visual Studio-documentatie om aan de slag te gaan:

Zie JavaScript en TypeScript in Visual Studio voor meer informatie

ASP.NET Core SPA-sjablonen

Visual Studio bevat sjablonen voor het bouwen van ASP.NET Core-apps met een JavaScript- of TypeScript-front-end. Deze sjablonen zijn beschikbaar in Visual Studio 2022 versie 17.8 of hoger met de ASP.NET en webontwikkeling workload geïnstalleerd.

De Visual Studio-sjablonen voor het bouwen van ASP.NET Core-apps met een JavaScript- of TypeScript-front-end bieden de volgende voordelen:

  • Schone projectscheiding voor de front-end en back-end.
  • Blijf up-to-up-to-date met de nieuwste front-end frameworkversies.
  • Integreer met de nieuwste command-linetools voor frontend-frameworks, zoals Vite.
  • Sjablonen voor zowel JavaScript & TypeScript (alleen TypeScript voor Angular).
  • Uitgebreide bewerkingservaring voor JavaScript- en TypeScript-code.
  • Integreer JavaScript-buildhulpprogramma's met de .NET-build.
  • gebruikersinterface voor npm-afhankelijkheidsbeheer.
  • Compatibel met foutopsporing en startconfiguratie van Visual Studio Code.
  • Voer frontend-unittests uit in Test Explorer met behulp van JavaScript-testframeworks.

Verouderde ASP.NET Core SPA-sjablonen

Eerdere versies van de .NET SDK bevatten wat nu verouderde sjablonen zijn voor het bouwen van SPA-apps met ASP.NET Core. Zie de .NET 7-versie van het SPA-overzicht en de artikelen over Angular en React voor documentatie over deze oudere sjablonen.

Architectuur van toepassingssjablonen met één pagina

De SPA-sjablonen (Single Page Application) voor Angular en React bieden de mogelijkheid om Angular- en React-apps te ontwikkelen die worden gehost in een .NET-back-endserver.

Tijdens het publiceren worden de bestanden van de Angular- en React-app gekopieerd naar de wwwroot map en worden ze geleverd via de middleware voor statische bestanden.

In plaats van HTTP 404 (Niet gevonden) te retourneren, verwerkt een terugvalroute onbekende aanvragen naar de back-end en dient deze de index.html voor de SPA.

Tijdens de ontwikkeling is de app geconfigureerd voor het gebruik van de front-endproxy. React en Angular gebruiken dezelfde front-endproxy.

Wanneer de app wordt gestart, wordt de index.html pagina geopend in de browser. Een speciale middleware die alleen tijdens ontwikkeling is ingeschakeld.

  • Onderschept de binnenkomende aanvragen.
  • Controleert of de proxy wordt uitgevoerd.
  • Verwijst naar de URL van de proxy als deze actief is, of start een nieuw exemplaar van de proxy.
  • Hiermee wordt een pagina naar de browser teruggestuurd die elke paar seconden automatisch ververst totdat de proxy in werking is en de browser wordt doorverwezen.

Diagram van de Browser Proxy Server

Het belangrijkste voordeel van de ASP.NET Core SPA-sjablonen bieden:

  • Start een proxy als deze nog niet actief is.
  • HTTPS instellen.
  • Het configureren van sommige aanvragen die moeten worden geproxied naar de back-end ASP.NET Core-server.

Wanneer de browser een verzoek voor een back-end-eindpunt verzendt, bijvoorbeeld /weatherforecast in de sjablonen. De SPA-proxy ontvangt het verzoek en stuurt het transparant terug naar de server. De server reageert en de beveiligd-WACHTWOORDVERIFICATIE-proxy stuurt de aanvraag terug naar de browser:

Proxyserverdiagram

Gepubliceerde apps met één pagina

Wanneer de app wordt gepubliceerd, wordt de beveiligd-WACHTWOORDVERIFICATIE een verzameling bestanden in de wwwroot map.

Er is geen runtimeonderdeel vereist voor de app:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();


app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

app.MapFallbackToFile("index.html");

app.Run();

In het voorgaande sjabloon gegenereerde Program.cs bestand:

  • app. UseStaticFiles staat toe dat de bestanden worden geleverd.
  • app. MapFallbackToFile ("index.html") maakt het mogelijk om het standaarddocument te leveren voor een onbekende aanvraag die de server ontvangt.

Wanneer de app wordt gepubliceerd met dotnet publish, zorgt de volgende taken in het csproj bestand ervoor dat npm restore wordt uitgevoerd en dat het juiste NPM-script wordt uitgevoerd om de productieartefacten te genereren:

  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>

Apps met één pagina ontwikkelen

Het projectbestand definieert enkele eigenschappen waarmee het gedrag van de app tijdens de ontwikkeling wordt bepaald:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
    <SpaProxyServerUrl>https://localhost:44414</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="7.0.1" />
  </ItemGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>
  • SpaProxyServerUrl: Hiermee bepaalt u de URL waar de server verwacht dat de SPA-proxy wordt uitgevoerd. Dit is de URL:
    • De server pingt na het starten van de proxy om te weten of deze gereed is.
    • Waar de browser naartoe wordt omgeleid na een succesvolle respons.
  • SpaProxyLaunchCommand: De opdracht die de server gebruikt om de SPA-proxy te starten wanneer er wordt gedetecteerd dat de proxy niet actief is.

Het pakket Microsoft.AspNetCore.SpaProxy is verantwoordelijk voor de voorgaande logica voor het detecteren van de proxy en het omleiden van de browser.

De hosting startup-assembly die in Properties/launchSettings.json is gedefinieerd, wordt gebruikt om tijdens de ontwikkeling automatisch de vereiste componenten toe te voegen die nodig zijn om te detecteren of de proxy actief is en deze anders op te starten.

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:51783",
      "sslPort": 44329
    }
  },
  "profiles": {
    "MyReact": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7145;http://localhost:5273",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
      }
    }
  }
}

Installatie voor de client-app

Deze installatie is specifiek voor het front-endframework dat door de app wordt gebruikt, maar veel aspecten van de configuratie zijn vergelijkbaar.

Angular-configuratie

Het door de sjabloon gegenereerde ClientApp/package.json bestand:

{
  "name": "myangular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "prestart": "node aspnetcore-https",
    "start": "run-script-os",
    "start:windows": "ng serve --port 44483 --ssl --ssl-cert \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem\" --ssl-key \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.key\"",
    "start:default": "ng serve --port 44483 --ssl --ssl-cert \"$HOME/.aspnet/https/${npm_package_name}.pem\" --ssl-key \"$HOME/.aspnet/https/${npm_package_name}.key\"",
    "build": "ng build",
    "build:ssr": "ng run MyAngular:server:dev",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.1.3",
    "@angular/common": "^14.1.3",
    "@angular/compiler": "^14.1.3",
    "@angular/core": "^14.1.3",
    "@angular/forms": "^14.1.3",
    "@angular/platform-browser": "^14.1.3",
    "@angular/platform-browser-dynamic": "^14.1.3",
    "@angular/platform-server": "^14.1.3",
    "@angular/router": "^14.1.3",
    "bootstrap": "^5.2.0",
    "jquery": "^3.6.0",
    "oidc-client": "^1.11.5",
    "popper.js": "^1.16.0",
    "run-script-os": "^1.1.6",
    "rxjs": "~7.5.6",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.1.3",
    "@angular/cli": "^14.1.3",
    "@angular/compiler-cli": "^14.1.3",
    "@types/jasmine": "~4.3.0",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "^18.7.11",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "typescript": "~4.7.4"
  },
  "overrides": {
    "autoprefixer": "10.4.5"
  },
  "optionalDependencies": {}
}
  • Bevat scripts waarmee de angular-ontwikkelserver wordt gestart:

  • Het prestart script roept ClientApp/aspnetcore-https.js aan, dat verantwoordelijk is voor ervoor zorgen dat het HTTPS-certificaat van de ontwikkelingsserver beschikbaar is voor de SPA-proxyserver.

  • De start:windows en start:default:

    • Start de Angular-ontwikkelserver via ng serve.
    • Geef de poort, de opties voor het gebruik van HTTPS en het pad naar het certificaat en de bijbehorende sleutel op. Het opgegeven poortnummer komt overeen met het poortnummer dat is opgegeven in het .csproj bestand.

Het door de sjabloon gegenereerde ClientApp/angular.json bestand bevat:

  • De serve opdracht.

  • Een proxyconfig element in de development configuratie om aan te geven dat proxy.conf.js moet worden gebruikt om de front-endproxy te configureren, zoals wordt weergegeven in de volgende gemarkeerde JSON:

    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "MyAngular": {
          "projectType": "application",
          "schematics": {
            "@schematics/angular:application": {
              "strict": true
            }
          },
          "root": "",
          "sourceRoot": "src",
          "prefix": "app",
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "progress": false,
                "outputPath": "dist",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.app.json",
                "allowedCommonJsDependencies": [
                  "oidc-client"
                ],
                "assets": [
                  "src/assets"
                ],
                "styles": [
                  "node_modules/bootstrap/dist/css/bootstrap.min.css",
                  "src/styles.css"
                ],
                "scripts": []
              },
              "configurations": {
                "production": {
                  "budgets": [
                    {
                      "type": "initial",
                      "maximumWarning": "500kb",
                      "maximumError": "1mb"
                    },
                    {
                      "type": "anyComponentStyle",
                      "maximumWarning": "2kb",
                      "maximumError": "4kb"
                    }
                  ],
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ],
                  "outputHashing": "all"
                },
                "development": {
                  "buildOptimizer": false,
                  "optimization": false,
                  "vendorChunk": true,
                  "extractLicenses": false,
                  "sourceMap": true,
                  "namedChunks": true
                }
              },
              "defaultConfiguration": "production"
            },
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "configurations": {
                "production": {
                  "browserTarget": "MyAngular:build:production"
                },
                "development": {
                  "browserTarget": "MyAngular:build:development",
                  "proxyConfig": "proxy.conf.js"
                }
              },
              "defaultConfiguration": "development"
            },
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "browserTarget": "MyAngular:build"
              }
            },
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "src/test.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.spec.json",
                "karmaConfig": "karma.conf.js",
                "assets": [
                  "src/assets"
                ],
                "styles": [
                  "src/styles.css"
                ],
                "scripts": []
              }
            },
            "server": {
              "builder": "@angular-devkit/build-angular:server",
              "options": {
                "outputPath": "dist-server",
                "main": "src/main.ts",
                "tsConfig": "tsconfig.server.json"
              },
              "configurations": {
                "dev": {
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "namedChunks": false,
                  "extractLicenses": true,
                  "vendorChunk": true
                },
                "production": {
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "namedChunks": false,
                  "extractLicenses": true,
                  "vendorChunk": false
                }
              }
            }
          }
        }
      },
      "defaultProject": "MyAngular"
    }
    

ClientApp/proxy.conf.js definieert de routes die moeten worden teruggezet naar de back-end van de server. De algemene set opties wordt gedefinieerd op http-proxy-middleware voor react en angular, omdat beide dezelfde proxy gebruiken.

De volgende gemarkeerde code uit ClientApp/proxy.conf.js gebruikt logica gebaseerd op de omgevingsvariabelen die tijdens de ontwikkeling zijn ingesteld om te bepalen op welke poort de backend draait.

const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORTS ? `https://localhost:${env.ASPNETCORE_HTTPS_PORTS}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:51951';

const PROXY_CONFIG = [
  {
    context: [
      "/weatherforecast",
   ],
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  }
]

module.exports = PROXY_CONFIG;

React-installatie

  • De package.json sectie scripts bevat de volgende scripts waarmee de react-app tijdens de ontwikkeling wordt gestart, zoals wordt weergegeven in de volgende gemarkeerde code:

    {
      "name": "myreact",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "bootstrap": "^5.2.0",
        "http-proxy-middleware": "^2.0.6",
        "jquery": "^3.6.0",
        "merge": "^2.1.1",
        "oidc-client": "^1.11.5",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-bootstrap": "^0.26.2",
        "react-router-dom": "^6.3.0",
        "react-scripts": "^5.0.1",
        "reactstrap": "^9.1.3",
        "rimraf": "^3.0.2",
        "web-vitals": "^2.1.4",
        "workbox-background-sync": "^6.5.4",
        "workbox-broadcast-update": "^6.5.4",
        "workbox-cacheable-response": "^6.5.4",
        "workbox-core": "^6.5.4",
        "workbox-expiration": "^6.5.4",
        "workbox-google-analytics": "^6.5.4",
        "workbox-navigation-preload": "^6.5.4",
        "workbox-precaching": "^6.5.4",
        "workbox-range-requests": "^6.5.4",
        "workbox-routing": "^6.5.4",
        "workbox-strategies": "^6.5.4",
        "workbox-streams": "^6.5.4"
      },
      "devDependencies": {
        "ajv": "^8.11.0",
        "cross-env": "^7.0.3",
        "eslint": "^8.22.0",
        "eslint-config-react-app": "^7.0.1",
        "eslint-plugin-flowtype": "^8.0.3",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-jsx-a11y": "^6.6.1",
        "eslint-plugin-react": "^7.30.1",
        "nan": "^2.16.0",
        "typescript": "^4.7.4"
      },
      "overrides": {
        "autoprefixer": "10.4.5"
      },
      "resolutions": {
        "css-what": "^5.0.1",
        "nth-check": "^3.0.1"
      },
      "scripts": {
        "prestart": "node aspnetcore-https && node aspnetcore-react",
        "start": "rimraf ./build && react-scripts start",
        "build": "react-scripts build",
        "test": "cross-env CI=true react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "lint": "eslint ./src/"
      },
      "eslintConfig": {
        "extends": [
          "react-app"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }
    
  • Het prestart script roept het volgende aan:

    • aspnetcore-https.js, die ervoor moet zorgen dat het HTTPS-certificaat van de ontwikkelingsserver beschikbaar is voor de SPA-proxyserver.
    • Roept aspnetcore-react.js aan om het juiste .env.development.local bestand in te stellen voor gebruik van het HTTPS-ontwikkelingscertificaat lokaal. aspnetcore-react.js configureert het lokale HTTPS-ontwikkelingscertificaat door SSL_CRT_FILE=<certificate-path> en SSL_KEY_FILE=<key-path> aan het bestand toe te voegen.
  • Het .env.development bestand definieert de poort voor de ontwikkelserver en geeft HTTPS op.

Hiermee configureert src/setupProxy.js de SPA-proxy om de verzoeken door te sturen naar de back-end. De algemene set opties wordt gedefinieerd in http-proxy-middleware.

De volgende gemarkeerde code in ClientApp/src/setupProxy.js maakt gebruik van logica op basis van de omgevingsvariabelen die tijdens de ontwikkeling zijn ingesteld om te bepalen op welke poort de back-end wordt uitgevoerd:

const { createProxyMiddleware } = require('http-proxy-middleware');
const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORTS ? `https://localhost:${env.ASPNETCORE_HTTPS_PORTS}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:51783';

const context = [
  "/weatherforecast",
];

const onError = (err, req, resp, target) => {
    console.error(`${err.message}`);
}

module.exports = function (app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    // Handle errors to prevent the proxy middleware from crashing when
    // the ASP NET Core webserver is unavailable
    onError: onError,
    secure: false,
    // Uncomment this line to add support for proxying websockets
    //ws: true, 
    headers: {
      Connection: 'Keep-Alive'
    }
  });

  app.use(appProxy);
};

Ondersteunde SPA-frameworkversie in ASP.NET Core SPA-sjablonen

nl-NL: De SPA-projectsjablonen die worden meegeleverd met elke ASP.NET Core-release verwijzen naar de nieuwste versie van het juiste SPA-framework.

SPA-frameworks hebben doorgaans een kortere releasecyclus dan .NET. Vanwege de twee verschillende releasecycli kan de ondersteunde versie van het SPA-framework en .NET uit de pas lopen: de belangrijkste versie van het SPA-framework, waarvan een belangrijke .NET-release afhankelijk is, kan de ondersteuning verliezen, terwijl de .NET-versie waarmee het SPA-framework is uitgebracht nog steeds wordt ondersteund.

De ASP.NET Core SPA-sjablonen kunnen worden bijgewerkt in een patch-release naar een nieuwe SPA frameworkversie om de sjablonen in een ondersteunde en veilige toestand te houden.

Aanvullende bronnen