.NET6.0 SpaProxy

Help Requests
1

Hi Folks.

Does anyone have experience with .NET6 SpaProxy working with Aurelia (/w Webpack bundler)? For me the dotnet page does not find the webpacks dev-server. So if someone has something on Github, keep it coming :slight_smile:

2

Plesase, check this anwers I include a link to a project for .net 5, the same will work for .net 6

I will try to prepare and example of .NET6 SpaProxy in

I will add here the link when ready…

2 Likes
3

Hello @danice Thank you for your answer. But if I am not mistaken, there was a change from .NET 5 to 6. With version 6 the requests go directly to the webpack dev server and are then forwarded via a proxy from there to the api if needed. Until .NET 5 the api forwarded to the spa. With React you can provide a proxy with setupProxy.js.

4

I have prepared an example of aurelia 2 with .net 6 SPA:

Hope it helps!

1 Like
5

Yes, as @Marcel-B mentioned, when .NET 6.0 was released, the debugging strategy in the SPA templates (f.ex. for Angular) changed .

In the debugging setup in the SPA templates pre .NET 6.0, the browser opens a URL on the AspNetCore API server, and then requests for SPA assets are proxied (using the .NET SpaProxy) to the webpack dev server:
Browser => AspNetCoreAPI → (IsSpaAsset?) => WebpackDevServer

In the SPA templates from .NET 6.0 and onwards, they flipped this around; the browser now opens a URL on the webpack devserver, and the webpack dev server is configured to proxy API requests to the AspNetCoreAPI:

Browser => WebpackDevServer → (IsApiRequest?) => AspNetCoreAPI

I think MS will probably stop supporting the SpaProxy NuGet package, so I recommend switching to the new strategy. If you create a new Angular template from Visual Studio, you can look at the genarated code and get an idea of how it works, so that you can update the Aurelia/AspNetCore app.

PS! Notice that the SPA template also comes with a aspnetcore helper javascript file that is used when the webpack devserver starts. This executes the dotnet cli to generate self-signed certificate to enable HTTPS support on the webpack devserver. It also tries to detect the port of the running AspNetCore API.

1 Like
6

Thanks for the hints. Actually it was quite simple.

Actually, as you already described, the proxy only had to be configured via webpack. The spa is then also started automatically via .net, a redirect from API to SPA is also done automatically when webpack is ready (additional js or ts code is not needed unless you want ssl).

The csproj File:

    <PropertyGroup>
        <TargetFramework>net6.0</TargetFramework>
        <UserSecretsId>11111111-1111-1111-1111-111111111111</UserSecretsId>
        <ImplicitUsings>enable</ImplicitUsings>
        <IsPackable>false</IsPackable>
        <SpaRoot>ClientApp\</SpaRoot>
        <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
        <SpaProxyServerUrl>http://localhost:9000</SpaProxyServerUrl> <!-- webpack dev-server url --->
        <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
    </PropertyGroup>

webpack.conf.js

...
    devServer: {
        historyApiFallback: true,
        open: project.platform.open,
        hot: hmr || project.platform.hmr,
        port: 9000, // spa port
        host: "localhost",
        proxy: [
            {
                context: ['/api', '/swagger'],
                target: 'http://localhost:5049' // api url
            }
        ]
    }
...

Startup.cs

...
      app.UseStaticFiles();
      app.UseRouting();
      app.UseEndpoints(endpoints =>
       {
                endpoints
                    .MapControllerRoute(name: "default", pattern: "{controller}/{action=Index}/{id?}")
                    .RequireAuthorization();
                endpoints.MapRazorPages();
                endpoints.MapFallbackToFile("index.html");
       })
...

lauchSettings.json

{
    "$schema": "http://json.schemastore.org/launchsettings.json",
    "profiles": {
        "Test.API": {
            "commandName": "Project",
            "launchBrowser": true,
            "environmentVariables": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
            },
            "applicationUrl": "http://localhost:5049",
            "dotnetRunMessages": "true"
        }
    }
}

In my case no ssl is needed for local development.

7

@josundt , @Marcel-B : yes, that’s exactly what the last example link does…

1 Like