intergrading asp net core with Reactjs

Question

On the Reactjs template I saw the use of "Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;"
To intergrade asp net core with Reactjs

after a google search I saw that "SpaServices" is outdated
and that " webpack development server" is a better alternative

I would like to know if " webpack development server" really is the best option
or are there even better options to intergrate front-end frameworks like react

and how do i use that, on the on the react template i can see a good example:

in the configureService:

    services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/build";
            });

in the configure:

    app.UseSpaStaticFiles();

and:

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

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

I could not find clear examples in the " webpack development server" version

Answer

The spa services has always used the webpack developer server. The current version starts the webpack server, and proxies requests to the server when in development mode. This meant spa services has to customized to pass the correct setting when stating the node server.

Also a spa server needed to be developed for every JavaScript framework.

the line

spa.UseReactDevelopmentServer(npmScript: "start");

just starts the web pack dev server via the nom command line, and is the same as typing:

npm start

at the command line.

But webpack server and other JavaScript frameworks also have proxy support. Most framework examples show how to configure proxy. So the new react template has webpack proxy configured and no longer uses a spa proxy.

The static file handler was update to to include client app/build, so the spa copy of this code is not required.

So in .net 6, spa services is no longer required. The startup of the webpack server is part of the .net 6 startup code, and configured in the build script.

To summarize, the new 6 template uses the same webpack dev server as the 3.1 version, the change is to use webpack’s robust proxy support rather than the simple spa proxy. And build passes the client app folder name, rather than configuration.

Note: other than static file handler doing the clientapp file support instead of spa services, there is no change to how the production code works. The webpack server is not used for production, only dev.

intergrading asp net core with Reactjs

1 answer