Spinning up Angular app with ASP.NET Core Web API on the same port using UseSpa library

Question

I'll appreciate some assistance debugging my code to know what I am missing or doing wrong.

Please feel free to review related code at my git repository at this link https://github.com/slim1477/slim-financial. The backend application in the repo uses .NET 8, I just updated my local version to .NET 9 and Angular version is 19. I have started the consolidation process, so might find a copy of the Angular project in the API project.

Overview

I have initially created an Angular frontend app and a backend API, both applications work as expected when you spin them up independently.

Task

Merge both projects into one, such that when I invoke the dotnet run command, both applications are started on the same port and at the same time.

Current State

To achieve the task above I am using the SpaApplicationBuilderExtension and calling the UseSpa method to invoke the npm start command in the package.json file in my UI application (image below).

Issues

I run into https validation issue since Angular runs on http in development
I get the error message in the image below when I attempt to navigate to the UI.

Workarounds

To navigate the http issue, I have commented out the UseHttpsRedirection middleware, which seem to work. Also I have reviewed and attempted solutions that I could lay my hands on, but non seem to work to fix either of the issues.

Questions

How do I configure my application to run without commenting out the UseHttpsRedirect middleware?
How do I fix the issue #2 mentioned above
I am opened to feedback and would appreciate comments and opinions from experienced folks out there regarding my coding pattern and anything you think would be beneficial at making me a better .NET developer.

Thank you in advance.

Merge both projects into one and then both applications are started on the same port sound kind of like a contradiction. You want a single app or two apps? If you want the the former, a single app, then you want your angular frontend served from within the .net app. You don't need the .net app to invoke the npm start that effectively calls ng serve which effectively starts a webpack dev server. — Wiktor Zychla
– Wiktor Zychla, Commented Feb 14 at 18:30

Megh · Accepted Answer · 2025-02-15 18:21:29Z

1

The easiest solution here is to create wwwroot folder and move all build file into this folder and .net will automatically start serving those files.

you need to do 2 adjustments into your .net program file

Include this code to server angular when URL does not start with api

 app.Use(async (context, next) =>
 {
    string path = context.Request.Path.Value;
    await next();
    if (context.Response.StatusCode == 404 && 
       !Path.HasExtension(context.Request.Path.Value))
    {
       context.Request.Path = "/";
       await next();
    }
 });

Add UseStaticFile() which is already added.

that's how we setup 2 project into one host too.

answered Feb 15 at 18:21

Megh

1602 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Spinning up Angular app with ASP.NET Core Web API on the same port using UseSpa library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related