How to develop and test a SPA Application on ASP.NET Core in parallel?

Question

ASP.NET

Hello everyone, we are learning how to make a SPA application and the question arose about the approach to development. Backend - ASP.Net Core, frontend - Node.js (React+Redux). When accessing the server, the SPA application is given, which then exchanges data with the server.

At the moment, both parts are being developed in separate projects, after which the front is built using webpack and the finished application (bundle.js + index.html) is manually thrown into the wwwroot folder in the backend project, after which the server is started and the interaction is checked. This method looks rather crutch, but nothing better has yet been found.

I would like to get advice from more experienced colleagues. What are the alternatives to the described method? How to write a backend with a frontend in parallel and test their interaction when developing similar applications?
Thanks in advance.

Answer 1

This code is redundant, but allows you to work in all combinations.
As mentioned above, MS has templates for React, BUT!
The main problem is the speed of the first build ~30 sec. Well, "porridge" in the project.
Therefore, the front in 1 project, the back in another.
The back is started
by dotnet run watch
Front
yarn start
This will allow you not to distort the assembly over and over again when changing the sources.

public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options =>
                options.AddDefaultPolicy(builder =>
                    builder.AllowAnyOrigin()
                        .AllowAnyMethod()
                        .AllowAnyHeader())
            );
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IApiVersionDescriptionProvider provider, ILogger<Startup> logger)
        {
            if (env.IsDevelopment()) app.UseDeveloperExceptionPage();

            app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

}

Answer 2

I have two separate projects, each in its own folder. I won’t tell you about React, but Angular has its own dev server with change monitoring and module overloading. Both directories have been added to the workspace, cors is allowed in asp.net for debugging.