Arbeiten mit Spa-Diensten in .NetCore 3.0?

9

Ich entwickle SPA-Webanwendungen mit ASP.Net Core React + Redux.

Nach dem Update auf .Net Core 3.0 sehe ich, dass UseWebpackDevMiddleware und AddNodeServices veraltet sind.

Ich lerne die neue Projektvorlage React + Redux, aber es wird kein Webpack oder SSR verwendet.

1) Wo finde ich Beispiele oder Informationen zur Arbeit mit Webpack in .Net Core 3.0? Mit UseWebpackDevMiddleware war es wirklich einfach, HMR und Webpack Build zu konfigurieren.

2) Wo finde ich Beispiele oder Informationen zu SSR mit .Net 3.0 + React?

webpack server-side-rendering .net-core-3.0 asp.net-core-3.0 Alex
quelle

Antworten:

4

Ich fühle mich im selben Boot wie du !!! Nachdem ich die letzte Woche seit der offiziellen Veröffentlichung von dotnetcore3 verbracht habe, habe ich versucht, etwas zum Laufen zu bringen, das ein SPA-Framework verwendet.

Da es keine Antworten darauf gibt und ich daran interessiert bin, SPA-Dienste zum Laufen zu bringen, habe aspnetcore3ich mir die verschiedenen Vorlagen angesehen, die in Visual Studio bereitgestellt werden. Derzeit sind die Vorlagen Angularund Reactdiese verwenden aspnetcore3.

Vor dieser Zeit gibt es Vorlagen für Angular, Reactund auch Aurelia. Für mich sieht Aurelia großartig aus - Vanille-Typoskript-Bindungen. Also versuche ich diesen Weg zu gehen.

Ich habe es geschafft, HMR(Hot Module Replacement) zum Laufen zu bringen. Ich habe ein Aurelia-Projekt mit der CLI erstellt. Mein Projekt ist jedoch sehr konfiguriert und ich lerne noch WebPack. HMR arbeitet derzeit nicht mit Aurelia CSS.

Für mein Szenario hatte ich die Client-App in VS Code geladen. Ich habe ein Aspnet-Kernprojekt erstellt, das sich dann in das Webpack einfügt.

Ich weiß, dass Sie speziell nach React fragen, aber das Konzept könnte dasselbe sein.

Etwas Code

Meinen Code finden Sie hier:

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

HINWEIS: Momentan lege ich nur Sachen in dieses Repo. Aus den Vorlagen werden Projekte erstellt, wenn Sie zur obersten Ebene navigieren.

Verwendungszweck

  1. Ordner spa-apps\aurelia-cli\e1\aurelia-appin öffnenVSCode
  2. Öffnen Sie den project.csprojEingangVS2019
  3. Öffnen Sie ein Terminal VSCodeund führen Sie es aus npm start -- --hmrund warten Sie, bis die Ausgabe abgeschlossen ist.
  4. Kompilieren Sie die Lösung und führen Sie sie aus VS2019

Dies sollte den Standardbrowser öffnen und die index.ejs laden.

Dinge zu beachten

Die Portnummern im Dotnet-Projekt und im Aurelia-Projekt müssen übereinstimmen.

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"
  },

Vielleicht ist dies konzeptionell dasselbe wie Reagieren. Aus irgendeinem Grund kann meine React-Vorlage keine Verbindung zu IIS Express herstellen - und es hat neulich funktioniert - und ist daher nicht wirklich in der Lage, zu graben.

Für mich hat dieses Projekt viele bewegliche Teile. Ich wünschte, ich hätte eine minimal funktionierende Lösung - das umfasst Webpack + scss + ein Spa-Framework + dotnetcore3. Aber es gibt eine Tonne Konfiguration und viele Dateien.

Andere Links

Es könnte sich auch lohnen, diesen Blog-Beitrag zu lesen:

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

Lesen Sie hier mehr über Aurelia:

https://aurelia.io/

Hoffentlich gibt Ihnen jemand eine bessere Antwort - aber das könnte Sie zum Laufen bringen. Hoffentlich wird Microsoft die Dokumente und Beispiele aktualisieren und uns eine bessere Anleitung geben.

Aktualisierungen der Dotnet-Vorlage (April 2020)

Ich hoffe, dass aktualisierte Vorlagen die Unterschiede zwischen Aspnet Core und Dotnet Core mit Webpack überwinden können. Ich hoffe also, dass es darum geht, neue Vorlagen zu erstellen.

Siehe hier:

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

Andez
quelle