Vous travaillez avec des services de spa dans .NetCore 3.0?


9

Je développe une application web SPA en utilisant ASP.Net Core React + Redux.

Après la mise à jour vers .Net Core 3.0, je constate que UseWebpackDevMiddleware et AddNodeServices sont obsolètes.

J'apprends le nouveau modèle de projet React + Redux, mais il n'utilise pas de webpack ou de SSR.

1) Où puis-je trouver des exemples ou des informations de travail avec webpack dans .Net Core 3.0? avec UseWebpackDevMiddleware était vraiment facile à configurer HMR et la construction de webpack.

2) Où puis-je trouver des exemples ou des informations sur la SSR avec .Net 3.0 + React?

Réponses:


4

Je sens que je suis dans le même bateau que toi !!! Ayant passé la semaine dernière depuis la sortie officielle de dotnetcore3, j'ai essayé de mettre en place quelque chose qui utilise un framework SPA.

Étant donné qu'il n'y a eu aucune réponse à cela et que je suis désireux de faire fonctionner les services SPA car aspnetcore3j'ai examiné les différents modèles fournis dans Visual Studio. Actuellement, les modèles sont Angularet Reactutilisent aspnetcore3.

Avant cela, il existe des modèles pour Angular, Reactet aussi Aurelia. Pour moi, Aurelia a fière allure - des reliures typographiques vanille J'essaie donc de suivre cette voie.

J'ai réussi à faire fonctionner HMR(remplacement de module à chaud). J'ai construit un projet Aurelia en utilisant la CLI. Cependant, mon projet a beaucoup de configuration et j'apprends toujours WebPack. HMR ne fonctionne pas actuellement avec Aurelia CSS.

Pour mon scénario, j'avais l'application client chargée dans VS Code. J'ai créé un projet principal aspnet qui se connecte ensuite au webpack.

Je sais que vous posez des questions spécifiques sur React, mais le concept pourrait être le même.

Du code

Vous pouvez trouver mon code ici:

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

REMARQUE: Actuellement, je ne fais que jeter des trucs dans ce dépôt. Des projets sont créés à partir des modèles si vous accédez au niveau supérieur.

Usage

  1. Ouvrir le dossier spa-apps\aurelia-cli\e1\aurelia-appdansVSCode
  2. Ouvrez le project.csprojdansVS2019
  3. Ouvrez un terminal VSCodeet exécutez-le npm start -- --hmret attendez la fin de la sortie.
  4. Compilez et exécutez la solution dans VS2019

Cela devrait ouvrir le navigateur par défaut et charger le fichier index.ejs.

À noter

Les numéros de port du projet dotnet et du projet aurelia doivent être liés.

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

Alors peut-être que c'est conceptuellement la même chose que React. Pour une raison quelconque, mon modèle React ne parvient pas à se connecter à IIS Express - et cela a fonctionné l'autre jour - donc pas vraiment en mesure d'aller creuser.

Pour moi, ce projet a beaucoup de pièces mobiles. J'aimerais avoir une solution de travail minimale - qui comprend webpack + scss + un cadre de spa + dotnetcore3. Mais il y a une tonne de configuration et beaucoup de fichiers.

Autres liens

Il pourrait également être utile de consulter ce billet de blog:

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

En savoir plus sur aurelia ici:

https://aurelia.io/

J'espère que quelqu'un vous donnera une meilleure réponse - mais cela pourrait vous aider à continuer. J'espère que Microsoft mettra à jour les documents et les exemples et nous fournira de meilleurs conseils.

Mises à jour du modèle dotnet (avril 2020)

J'espère que les modèles mis à jour pourraient surmonter les différences entre le noyau aspnet et le noyau dotnet avec webpack. J'espère donc qu'il s'agit de tirer de nouveaux modèles.

Vois ici:

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.