How to configure ASP.net Core server routing for multiple SPAs hosted with SpaServices

Question

I have an Angular 5 application that I want to host with Angular Universal on ASP.net Core using the latest Angular template RC. I've followed the docs and have the application up and running. The problem is that I am also using Angular's i18n tools, which produce multiple compiled applications, 1 per locale. I need to be able to host each from https://myhost.com/{locale}/.

I know that I can spin up an instance of the ASP.net Core app for each locale, and set up hosting in the webserver to have the appropriate paths route to the associated app, but this seems excessive to me.

Routes are configured with:

// app is an instance of Microsoft.AspNetCore.Builder.IApplicationBuilder
app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller}/{action=Index}/{id?}");
});

SpaServices are configured with:

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

    spa.UseSpaPrerendering(options =>
    {
        options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
        options.BootModuleBuilder = env.IsDevelopment()
            ? new AngularCliBuilder(npmScript: "build:ssr:en")
            : null;
        options.ExcludeUrls = new[] { "/sockjs-node" };
        options.SupplyData = (context, data) =>
        {
            data["foo"] = "bar";
        };
    });

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

I've looked through the documentation and the source on Github, and I cannot find how to configure ASP.net Core to associate a specific route with a given SPA. Anyone have any ideas?

If you use IIS try to set all your locale app as sub apps

itikhomi
– itikhomi

2018-01-19 15:47:46 +00:00
Commented Jan 19, 2018 at 15:47 — itikhomi
– itikhomi, Commented Jan 19, 2018 at 15:47

Adam Millerchip · Accepted Answer · 2019-03-25 14:23:27Z

43

Thanks to SteveSandersonMS and chris5287 over on Github for pointing me towards the solution on this.

IApplicationBuilder.Map can segregate paths into different areas of concern. If you wrap a call to app.UseSpa in a call to app.Map, the SPA will be handled only for the path specified by the Map call. The app.UseSpa call ends up looking like:

app.Map("/app1", app1 =>
{
    app1.UseSpa(spa =>
    {
        // To learn more about options for serving an Angular SPA from ASP.NET Core,
        // see https://go.microsoft.com/fwlink/?linkid=864501

        spa.Options.SourcePath = "ClientApp";

        spa.UseSpaPrerendering(options =>
        {
            options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
            options.BootModuleBuilder = env.IsDevelopment()
                ? new AngularCliBuilder(npmScript: "build:ssr:en")
                : null;
            options.ExcludeUrls = new[] { "/sockjs-node" };
            options.SupplyData = (context, data) =>
            {
                data["foo"] = "bar";
            };
        });

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start --app=app1 --base-href=/app1/ --serve-path=/");
        }
    });
});

You can make as many calls to app.Map as necessary to configure your SPAs. Also note the modification to the spa.UseAngularCliServer call at the end: you will need to set --base-href and --serve-path to match your particular config.

edited Mar 25, 2019 at 14:23

Adam Millerchip

23.3k6 gold badges62 silver badges86 bronze badges

answered Jan 26, 2018 at 16:38

asgallant

26.4k6 gold badges75 silver badges91 bronze badges

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

14 Comments

Jean-Francois Over a year ago

what is your build:ssr:en and what is app1 refer to. thanks so much

Jean-Francois Over a year ago

An other thing, should you have a different BootModulePath per language. for exemple ptions.BootModulePath = $"{spa.Options.SourcePath}/dist-server/en/main.bundle.js"; and ptions.BootModulePath = $"{spa.Options.SourcePath}/dist-server/fr/main.bundle.js";

Jean-Francois Over a year ago

hre is my build for EN "buildssr-i1n8-en-browser": "ng build --prod --locale=en --i18n-file src/i18n/messages.en.xlf --base-href=/en --deploy-url=/en --output-path=dist/en", "buildssr-i1n8-en-server": "ng build --prod --locale=en --i18n-file src/i18n/messages.en.xlf --base-href=/en --deploy-url=/en --output-path=dist-server/en --app 1 --output-hashing=false",

Jean-Francois Over a year ago

nothing seem to work on my side . If you could share the entire startup plus the build command, that would be a great help. Thanks a lot

Jean-Francois Over a year ago

I opened a new question here : stackoverflow.com/questions/48754386/…

|

Collectives™ on Stack Overflow

How to configure ASP.net Core server routing for multiple SPAs hosted with SpaServices

1 Answer 1

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related