Specify base URL for Angular ClientApp served from ASP.NET Core WebApi

Question

I've created an ASP.NET Core project which serves an Angular app using services.AddSpaStaticFiles(), app.UseSpaStaticFiles(), app.UseSpa(), etc.

But it serves the application directly from http://localhost:1234, while I want to serve it from http://localhost:1234/angular/MyAngularApp1/, while I want to use http://localhost:1234/ for an API controller.

How can I achieve that?

Note: I need it to work in a production build. Some solutions appear to work, but in reality they work only when you run the site from Visual Studio, and stop working once you publish/deploy to IIS or Kestrel.

can you explain the usecase for this approach? we have the api on one port and the angular app on the other (with cors policy on the api of course), on production the api runs in a subdomain — Daniël Tulp
– Daniël Tulp, Commented Nov 21, 2019 at 12:08
@DaniëlTulp, Sure - our production build has to accessed from within a network that is firewalled. Clients in the network can't access our app directly, but there is a reverse-proxy that was setup using IIS and URLRewrite to rewrite requests that start with a particular prefix. Any request that doesn't start will be dropped by the proxy. We don't have access to reconfigure that proxy so.... — sashoalm
– sashoalm, Commented Nov 22, 2019 at 13:00

sashoalm · Accepted Answer · 2019-11-25 12:06:55Z

4

Eventually I found a function that pretty much achieves this:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UsePathBase("/MyPrefix/");

    if (env.IsDevelopment())
    .......

See https://www.billbogaiv.com/posts/net-core-hosted-on-subdirectories-in-nginx for more info.

edited Nov 25, 2019 at 12:06

answered Sep 11, 2019 at 14:50

sashoalm

80.5k138 gold badges485 silver badges830 bronze badges

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

Comments

Tony · Accepted Answer · 2019-09-09 14:21:23Z

2

You can define a base url for your application like this

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "ClientApp/{controller}/{action=Index}/{id?}");
    });

answered Sep 9, 2019 at 14:21

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Comments

Xueli Chen · Accepted Answer · 2019-09-10 06:57:33Z

2

If you want to specify base URL for view from Angular ClientApp folder , try to set href attribute of base by going to ClientApp > src > index.html like below :

<head>
 <meta charset="utf-8">
 <title>ClientApp</title>
 <base href="/ClientApp">

 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

answered Sep 10, 2019 at 6:57

Xueli Chen

12.7k3 gold badges28 silver badges39 bronze badges

Comments

harishr · Accepted Answer · 2019-11-25 18:22:51Z

0

You can also use

         app.Map(new PathString("/MyPrefix"), appMember =>
         {
             appMember.UseSpa(spa =>
             {
                 spa.Options.SourcePath = "ClientApp";

                 if (env.IsDevelopment())
                 {
                     spa.UseAngularCliServer(npmScript: "start");
                 }
             });
         });

and for API

app.Map("/api", api => 
    {
        api.UseIdentityServerAuthentication(new IdentityServerAuthenticationOptions
        {
            Authority = "https://localhost:5000/openid"
        });

        api.UseMvc();
    });

So you can run multiple parallel pipeline in same application. Read more about it here

answered Nov 25, 2019 at 18:22

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Collectives™ on Stack Overflow

Specify base URL for Angular ClientApp served from ASP.NET Core WebApi

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related