Как параллельно разрабатывать и тестировать SPA-Приложение на ASP.NET Core?

Question

[Lepricon74]

Всем привет, учимся делать SPA-приложение и возник вопрос о подходе к разработке. Бекенд - ASP.Net Core, фронтенд - Node.js(React+Redux). При обращении к серверу, отдается SPA-приложение, которое потом обменивается с сервером данными.

На данный момент обе части разрабатываются в отдельных проектах, после чего фронт билдится с помощью webpack и готовое приложение (bundle.js+index.html) вручную закидывается в папку wwwroot в проекте бэкенда, после чего сервер запускается и проверяется взаимодействие. Данный способ выглядит довольно костыльно, но ничего лучше пока не нашлось.

Хотелось бы получить совет от более опытных колег. Какие существуют альтернативы описанному способу? Как параллельно писать бекенд с фронтендом и тестировать их взаимодействие при разработке подобных приложений?
Заранее Спасибо.

Answer 1

[Владимир Коротенко]

Этот код избыточен, но позволяет работать во всех сочетаниях.
Как выше уже сказали у MS есть шаблоны для реакта, НО!
Основная проблема это скорость первого билда ~30 сек. Ну и "каша" в проекте.
Поэтому фронт в 1 проекте, бэк в другом.

Бэк запускается
dotnet run watch

Фронт
yarn start

Это позволит не передергивать раз за разом сборку при изменении исходников.

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());

}

Comments

[Алексей Джо]

Можно на webpack все поднять, настроить для него dev server и запускать через прокси сервер.

[Владимир Коротенко]

RxR, Так там практически всегда вебпак.
Минусы при запуске проекта не всегда перестраивается фронт.
Проблемы с корсом
Так что приходится перезагружать проект.

Answer 2

[Роман]

У меня два отдельных проекта, каждый в своей папке. Про реакт не скажу, но у ангуляра есть свой dev сервер с мониторингом изменений и перегрузкой модулей. Оба каталога в workspace добавлены, в asp.net для отладки разрешен cors.