newbie question regarding .net core and react

Question

My day of web development was in .net 3 or 4, now I am trying to upgrade my skill bit.

So, I installed .net core 2.1.5 and react template, then created a react project in visual studio. However there are some basic things I am struggling with:

In startup.cs, I have following lines:

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

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

It is recommended that spa.UseReactDevelopmentServer(npmScript: "start"); should be just for development environment, so what should I do in production environment?

If I just comment out this line, it will throw errors

An unhandled exception occurred while processing the request. InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.

When running the project, from the source of index.html, I can see this line was added at the end of the page. <script type="text/javascript" src="/static/js/bundle.js"></script>.

So who added this line? Is it the embedded react development server or it is actually the build process? As I see these lines in packages.json, so I am guessing it is the npm build that created the bundle? If that is the case, how do I tell it not to bundle the js and I would to do some debugging in chrome to learn the code.

  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

Alexander Staroselsky · Accepted Answer · 2018-11-08 16:53:32Z

2

You should be able to use AddSpaStaticFiles() in ConfigureServices to indicate that the built, static React files should be used in production:

public void ConfigureServices(IServiceCollection services)
{
  // ...

  // In production, the React files will be served from this directory
  services.AddSpaStaticFiles(configuration =>
  {
    configuration.RootPath = "ClientApp/build";
  });

  // ...
}

Also, I'd make sure you have app.UseSpaStaticFiles(); in Configure().

answered Nov 8, 2018 at 16:53

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

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

3 Comments

daxu Over a year ago

looks like I may not need to do this. I commented out the usereactserver line and published the code from visual studio directly to an azure web app. Looks like the publish process (or build process) created all the needed static files (js bundles and images etc). I don't really know the internal process of this process, but looks like I don't need to worry about this at all anyway.

daxu Over a year ago

Actually, you are right, the source code I downloaded indeed have above lines, didn't really know where to check

Alexander Staroselsky Over a year ago

The React project template for .NET Core demonstrates the structure for serving the React application really well.

Collectives™ on Stack Overflow

newbie question regarding .net core and react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related