Asp.net core 2.1 - How to serve multiple angular apps?

Question

I'm trying to serve 2 angular apps from my .net core service like this:

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "wwwroot/app";
    });

    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "wwwroot/admin";
    });

    ...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    ...

    app.UseSpaStaticFiles(new StaticFileOptions
    {
        OnPrepareResponse = ctx =>
        {
            ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=0");
        }
    });

    app.UseMvc();

    app.Map("/app", client =>
    {
        client.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot/app";
        });
    }).Map("/admin", admin =>
    {
        admin.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot/admin";
        });
    });
}

in the file system, I only have the dist output of these apps (since they are developed by another team). So it looks like this:

C:[MY PROJECT PATH]\wwwroot\app
C:[MY PROJECT PATH]\wwwroot\admin

But for some reason, the admin app works and the app doesn't and also it doesn't support a default page so I need to enter the URL with /index.html.

Any ideas on how to solve this?

Liran Friedman · Accepted Answer · 2019-03-21 14:01:02Z

16

Well, I finally solved it and it works like this:

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddSpaStaticFiles();

    ...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    ...

    app.UseSpaStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot"))
    });

    app.UseMvc();

    app.Map("/app", client =>
    {
        client.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot/app";
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/app"))
            };
        });
    }).Map("/admin", admin =>
    {
        admin.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot/admin";
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/admin"))
            };
        });
    });
}

Also, don't forget to go into the index.html file of each app and set the base tag accordingly like this:

//for the client application:
<base href="/app/">

//for the admin application
<base href="/admin/">

answered Mar 21, 2019 at 14:01

Liran Friedman

4,32713 gold badges60 silver badges103 bronze badges

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

3 Comments

BinarySolo Over a year ago

Thanks for taking the time to post the answer. I would guess this saved me many hours.

Liran Friedman Over a year ago

You are most welcome. I'm glad to hear that it came out useful for others as well.

Chaim Eliyah Over a year ago

in my mind better answer than this because it mentions the base href

MGDavies · Accepted Answer · 2020-06-10 19:47:50Z

2

Liran answered his own question. In my case I had multiple entry points for a vue cli site. The fix is identical to the correct answer, but also setting spa.Options.DefaultPage.

    app
         .Map("/login", admin =>
         {
             admin.UseSpa(spa =>
             {
                 spa.Options.SourcePath = "ClientApp";
                 spa.Options.DefaultPage = "/login.html";
             });
         })
        .Map("", client =>
    {
        client.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";
            spa.Options.DefaultPage = "/index.html";
        });
    });

answered Jun 10, 2020 at 19:47

MGDavies

1,0543 gold badges17 silver badges30 bronze badges

Collectives™ on Stack Overflow

Asp.net core 2.1 - How to serve multiple angular apps?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related