ASP.NET Core 3.1 Serving static files for react application: index.html and icons found, but js files not

Question

I created an ASP.NET Core 3.1 Web App and in a different folder created react application using create-react-app tool. I'm trying to connect these apps, but when I open the mapped endpoint I can see only index.html was downloaded, and js files are not found. I mapped the specific path to SPA because in future i need one more SPA to be served. ASP.NET Core startup:

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors();
            services.AddControllersWithViews();

            services.AddSpaStaticFiles(config =>
            {
                config.RootPath = "../clients/game-app/build";
            });

            // ...
        }

        public void Configure(IApplicationBuilder app)
        {
            app.UseCors(x => x
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader());

            // ...
            app.UseHttpsRedirection();

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

            app.UseRouting();

            app.MapWhen(c => c.Request.Path.Value.ToLower().StartsWith("/game"), client =>
            {
                client.UseSpa(spa =>
                {
                    spa.Options.SourcePath =  "../clients/game-app";
                    spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
                    {
                        FileProvider = new PhysicalFileProvider(
                            Path.Combine(Directory.GetCurrentDirectory(), "../clients/game-app/build"))
                    };

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

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }

folders structure:

root
    - Project.sln
    - clients
        - game-app
            - build
            - files created by create-react-app
    - Project
        - ...
        - Startup.cs
        - wwwroot/game-app/build - copy of build from game-app folder

I swear it was working as it is now. I even did a commit to save everything, because I was struggling with this a lot. But now it stopped working. I suspect what I did wrong is I didn't shut down react dev server before commit.

Now it's not working:

What can be a root cause?

Nikita Fedorov · Accepted Answer · 2020-08-20 06:23:16Z

2

Okay, the thing is when I'm trying to use some mapped path to serve as react endpoint:

app.MapWhen(c => c.Request.Path.Value.ToLower().StartsWith("/game"), client => {...});

This endpoint starts to serve as static file provider, so I can get index.html without issues. But index.html contains links to js files in this format:

/static/js/bundle.js 
which leads to 
localhost:4000/static/js/bundle.js

But the correct address is

localhost:4000/game/static/js/bundle.js

The workaround I found here : https://github.com/aspnet/Templating/issues/555

I added to package.json:

"homepage": "http://localhost:3000/game", // webpack dev server address

And it worked.

answered Aug 20, 2020 at 6:23

Nikita Fedorov

9702 gold badges18 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

ASP.NET Core 3.1 Serving static files for react application: index.html and icons found, but js files not

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related