Робота зі спа-сервісами в .NetCore 3.0?


9

Я розробляю SPA-аплікацію за допомогою ASP.Net Core React + Redux.

Після оновлення до .Net Core 3.0 я бачу, що UseWebpackDevMiddleware і AddNodeServices є застарілим.

Я вивчаю новий шаблон проекту React + Redux, але він не використовує webpack або SSR.

1) Де я можу знайти приклад або інформацію про роботу з webpack в .Net Core 3.0? За допомогою UseWebpackDevMiddleware було дуже легко налаштувати HMR та збірку веб-пакетів.

2) Де я можу знайти приклад або інформацію про SSR за допомогою .Net 3.0 + React?

Відповіді:


4

Я відчуваю, що перебуваю в тому ж човні, що і ти !!! Провівши останній тиждень або близько того з моменту офіційного випуску dotnetcore3, я спробував розробити щось, що використовує рамки SPA.

З огляду на те, що відповіді на це не було, і я прагну запустити SPA-послуги, aspnetcore3я роздивився різні шаблони, що надаються у Visual Studio. В даний час шаблони є Angularі Reactякі використовують aspnetcore3.

До цього існують шаблони для Angular, Reactа також Aurelia. Для мене Aurelia чудово виглядає - ванільні машинописні прив’язки. Тому я намагаюся піти цим шляхом.

Мені вдалося налагодити роботу HMR(Заміна гарячого модуля). Я створив проект Aurelia за допомогою CLI. Однак мій проект має багато конфігурації, і я все ще вчуся WebPack. В даний час HMR не працює з Aurelia CSS.

Для мого сценарію у мене був завантажений клієнтський додаток у коді VS. Я створив основний проект aspnet, який потім підключається до webpack.

Я знаю, що ви конкретно запитуєте про React, але концепція може бути такою ж.

Якийсь код

Ви можете знайти мій код тут:

https://github.com/andez2000/spa-apps/tree/master/aurelia-cli/e1/aurelia-app

ПРИМІТКА: Наразі я просто скидаю речі в це репо. Є проекти, створені з шаблонів, якщо ви переходите на верхній рівень.

Використання

  1. Відкрити папку spa-apps\aurelia-cli\e1\aurelia-appвVSCode
  2. Відкрийте project.csprojвхідVS2019
  3. Відкрийте термінал VSCodeі запустіть npm start -- --hmrі дочекайтеся завершення виводу.
  4. Складіть і запустіть рішення в VS2019

Це має відкрити браузер за замовчуванням і завантажити index.ejs.

Що потрібно відзначити

Номери портів у проекті dotnet та aurelia повинні бути пов'язані.

Startup.cs

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    ...
    app.UseSpa(spa =>
    {

        if (env.IsDevelopment())
        {
            spa.UseProxyToSpaDevelopmentServer("http://localhost:5000");
        }
    });
}

aurelia.json

  "platform": {
    "hmr": false,
    "open": false,
    "port": 5000,
    "host": "localhost",
    "output": "wwwroot/dist"
  },

Тож, можливо, це концептуально те саме, що і React. Чомусь мій шаблон React не вдається підключитися до IIS Express - і він працював днями - так що насправді не в змозі копати.

Для мене цей проект має багато рухомих деталей. Мені б хотілося, щоб у мене було мінімальне робоче рішення - яке включає webpack + scss + деякі спа-рамки + dotnetcore3. Але є тонна конфігурація і безліч файлів.

Інші посилання

Крім того, можливо, варто перевірити цю публікацію в блозі:

https://www.alexdresko.com/2019/07/09/htmlwebpackplugin-asp-net-core-3/

Детальніше про аурелію читайте тут:

https://aurelia.io/

Сподіваємось, хтось дасть вам кращу відповідь - але це може вас змусити піти. Сподіваємось, Microsoft оновить документи та приклади та надасть нам кращі вказівки.

оновлення шаблону dotnet (квітень 2020 р.)

Сподіваюсь, що оновлені шаблони можуть подолати відмінності ядра aspnet / ядра dotnet за допомогою webpack. Тож сподіваємось, що це справа із залученням нових шаблонів.

Дивіться тут:

https://github.com/NetCoreTemplates/aurelia-spa

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.