Development experience Angular app hosted in .NET

[rvdleij]

It's not really an issue, but more a question I have.

When developing Angular apps, I was used to run / test the app with ng serve, so I could see the effects of any code changes quickly in the browser. And this included scenarios for which a logged on user was needed and where the Angular app sent the access token, which was stored in the browser, with every request to the server. Of course this is not the way to go anymore, I know :-)

Now I have an Angular app, hosted in a .NET webapplication wich the OidcProxy in place. It all works fine, meaning: after changing code in Angular app I rebuild + start everything from Visual Studio and I can see / check the changes I made.

Is this the only way to do this? It feels like a step back when it comes to development experience, compared to what I was used to with ng serve. But maybe I miss something.

[appie2go]

Hi there,

Thanks again for your feedback.

Technically speaking, what your mentioning is not the core of the project, I don't want this project to dictate how you should work on your project, so feel free work in any way that suits you.

What you could do, for example, is make an appsettings.development.json and forward any traffic that doesn't go to an api to localhost:4200. You can choose to run ng-serve manually, or add extra build-configuration to your csproj. When you would do so, when you hit f5 in development mode, you will be able to work based on ng-serve, and when you build it with the release configuration, you'll it will use the contents wwwroot folder.

I was planning to update the templates-library to include that change sometime soon. Would this solve your problem?

Cheers,

[rvdleij]

Thank you for your response! I will certainly give this a try and also experiment some more with my development setup.

[djad442]

Just to add I wanted to have same experience developing to see the changes in browser with live reloading.

The way i have implemented by using UseSPA proxy of asp.net. (I run ng serve on a separate terminal)

Packages you need: Microsoft.AspNetCore.SpaProxy Microsoft.AspNetCore.SpaServices.Extensions

Example Code below:

using Microsoft.AspNetCore.SpaServices.AngularCli;
using OidcProxy.Net.ModuleInitializers;
using OidcProxy.Net.OpenIdConnect;

var builder = WebApplication.CreateBuilder(args);

var config = builder.Configuration
    .GetSection("OidcProxy")
    .Get<OidcProxyConfig>();

builder.Services.AddOidcProxy(config);

// In production, the Angular files will be served from this directory
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "wwwroot";
});            

var app = builder.Build();

app.UseDefaultFiles();
app.UseStaticFiles();

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

app.UseOidcProxy();
app.UseRouting();
app.UseEndpoints(x => { });

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";

    if (app.Environment.IsDevelopment())
    {
        //---------------------------------------------------------------------------------------------
        // Enable this line if you want to run ng serve command from a console separate while developing
        //---------------------------------------------------------------------------------------------
        spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
        //---------------------------------------------------------------------------------------------
        // OR
        //---------------------------------------------------------------------------------------------
        // Enable this line if you want to run ng serve inside visual studio debuggers
        //---------------------------------------------------------------------------------------------
        //spa.UseAngularCliServer(npmScript: "ng serve");
        //---------------------------------------------------------------------------------------------
    }
});

app.Run();

[rvdleij]

@djad442 Sorry for the late response, but thank you for your solution / approach! Works like a charm!