IApplicationBuilder.Map breaks the functionality of UseSpa (bundle not found)

Question

I am trying to make an application which would host two SPAs with one backend. I have followed the instructions for creating a React app with .NET Core. This worked perfectly.

Then I changed the configuration to start the .NET Core and React apps separately. Also no problem.

However, then I tried to follow the guide on hosting multiple SPAs under different subroues. And suddenly I am gettig 404s for my script:

Here is my Configure method:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseSpaStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}");
    });

    app.Map("/reactapp", ra => {
        ra.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
            }
        });
    });
}

The individual HTTP calls seem to be almost identical, except for the /reactapp path. What am I doing wrong? Is there any additional configuration needed on .NET side? Or should I change something in the React app (e.g.: in React router)?

Could you please share your client app folder structure？ The two react app are all inside one folder which path is ClientApp? Normally, we will create two middleware to match the different client app with its own path like this [answer](https://stackoverflow.com/a/56482490/7609093) shows. — Brando Zhang, Nov 30 '20 at 06:40
Currently there are no two react apps. There is still just one app in the ClientApp folder and I did not make any changes to it. All the changes I have done are described in my question (using `UseProxyToSpaDevelopmentServer` and then `app.Map("/reactapp", ...`) — Storm, Nov 30 '20 at 07:48

score 0 · Accepted Answer · answered Nov 30 '20 at 08:19

Actually, this question was already answered here. I am not sure why, but the search engine did not propose me that question last week... and then it suddenly did, today.

So the full answer is:

Add "homepage": "/reactapp/", to the package.json file, e.g.:

{
  "name": "weatherapp",
  "version": "0.1.0",
  "private": true,
  "homepage": "/reactapp/",
   "dependencies": { ...

Replace the whole app.Map("/reactapp", ra => {... section with a method call, e.g.: ConfigureReactApp(app, env);
Implement the ConfigureReactApp method:

private void ConfigureReactApp(IApplicationBuilder app, IWebHostEnvironment env)
{
    var spaPath = "/reactapp";
    if (env.IsDevelopment())
    {
        app.MapWhen(y => y.Request.Path.StartsWithSegments(spaPath), client =>
        {
            client.UseSpa(spa => 
            {
                // spa.UseReactDevelopmentServer(npmScript: "start");
                spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
            });
        });
    }
    else
    {
        app.Map(new PathString(spaPath), client =>
        {
            client.UseSpaStaticFiles();
            client.UseSpa(spa => {});
        });
    }
}

IApplicationBuilder.Map breaks the functionality of UseSpa (bundle not found)

1 Answers1