UseStaticFiles behavior when accessed through branched IAppBuilder.

[spencer741]

I have two React projects with build directories indicated below, with the prod builds of each React app (ReactApp1/Build and ReactApp2/Build).

/Project
--/ReactApp1
----/Build
--ReactApp2
----/Build
--Startup.cs
--other project files

I am serving these two SPA’s conditionally from my asp.net core pipeline. Here is a section of my Startup.cs

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.MapWhen(context =>context.Request.Path.StartsWithSegments(“/MyApps”), myappsBuilder =>
{
    app.Map(“/MyApps/app1”, app1Builder =>
    {           
        StaticFileOptions app1build = new StaticFileOptions()
        {
            FileProvider = new PhysicalFileProvider(
                Path.Combine(
                    Directory.GetCurrentDirectory(),
                    “ReactApp1/build”
                )
            )
        };

        app.UseSpaStaticFiles(app1build);

        app1Builder.UseSpa(spa =>
        {
            spa.Options.SourcePath = “ReactApp1”;
            spa.Options.DefaultPageStaticFileOptions = app1build;

        });         
    });

    /* Similar app2 config code here */

});
}

Currently, this code works how I expect.

When I visit /MyApps/app1, the build packages from ReactApp1/Build are served. Same with /MyApps/app2 (which is similar to app1 in my pipeline logic).

Relating to the line: app.UseSpaStaticFiles(app1build); ...

It took me a while to figure out that I had to invoke UseSpaStaticFiles from the original IApplicationBuilder app object (app.UseSpaStaticFiles(app1build);) instead of the branched version (app1Builder.UseSpaStaticFiles(app1Build);).

I thought I could just do app1Builder.UseSpaStaticFiles(app1Build); , but it's never properly served.

Only when UseSpaStaticFiles is called from the original IApplicationBuilder for the entire pipeline (app.UseSpaStaticFiles(app1Build);) was my react app properly served (from the build directory).

Why is this? Perhaps it is due to my lack of understanding regarding these anonymous lambda branching expressions and how each nested Action<IApplicationBuilder> differs when I do certain branching like this (using Map and MapWhen).

[Tratcher]

Map makes a specific change to the request that other APIs like MapWhen can't. It trims the matched portion of the request.Path and moves it to request.PathBase. Most middleware ignore the PathBase and only look at the remaining Path.

Why this would mess up UseSpaStaticFiles is a good question, but as a rule, nothing inside any of these Map* Actions should ever reference the outer IApplicationBuilder. That's the same as not putting it inside the Map Action at all.

Similarly, I don't think that MapWhen is doing anything, you never reference myappsBuilder.

Clean up the sample to remove the MapWhen and nest UseSpaStaticFiles and then we can start tracking down why it doesn't work as expected.

[spencer741]

Ah. The only sub folder is registration/build/static/ ... It looks like when the index.html is served up from the registration/build directory, it tries to fetch content at / instead of /registration. If I wanted to UseStaticFiles within the mapped branch, how would I do so?

If I do registrationappbuilder.UseStaticFiles(registrationbuild); within the mapped branch (accessing the branched appbuilder), do sub folders have to be supplied as well? It works fine with app.UseStaticFiles(registrationbuild);

[Tratcher]

If I wanted to UseStaticFiles within the mapped branch, how would I do so?

I don't think you can if the SPA is requesting resources under /. Unless you start getting creative and start serving them from different subdomains or similar.

[spencer741]

I am just trying to figure out in a general sense why:
mappedappbuilder.UseStaticFiles(registrationbuild);
behaves differently than
app.UseStaticFiles(registrationbuild);

If I use the mappedappbuilder, my static files aren't fetched. (i.e., browser-side, a static file shows up as static.jswith the only content inside being 'app.' (from app.run ... context.Response.WriteAsync("App"); )

But if I use the original appbuilder, the content is fetch perfectly.

[Tratcher]

If the browser is asking for /static.js then the request skips the Map("/registration"...) code, the path doesn't start with "/registration". If the request was for "/registration/static.js" then it would enter the Map block, have "/registration" trimmed off, and then match the "/static.js" file.

[spencer741]

That makes sense. I believe I was overthinking this one... haha. Thanks for your help! I appreciate your time.

[spencer741]

I'll put this here for anybody who stumbles on this thread. There are a lot of examples out there modifying the base href in angular SPAs, but not a lot of information for React.

The solution for this scenario involved me changing the "homepage" route. Once I changed the default production route for the react app, I was able to call the UseStaticFiles from the branched IAppBuilder with no issues. The initial issue was that my react app index.html was being served properly, but the static content was being fetched at the root of the url (as per a default create-react-app project). Changing the "homepage" route (in package.json) to match the app.map("/route") branch (in startup.cs) which I was enabling static file usage under for that individual spa, resolved it.