webdevqa.jp.net

.Net Core 3.0でスパサービスを使用していますか?

ASP.Net Core React + Reduxを使用してSPA Webアプリケーションを開発しています。

.Net Core 3.0に更新した後、UseWebpackDevMiddlewareとAddNodeServicesが廃止されていることがわかりました。

新しいプロジェクトテンプレートReact + Reduxを学びましたが、webpackやSSRを使用していません。

1).Net Core 3.0のwebpackの使用例や情報はどこにありますか? UseWebpackDevMiddlewareを使用すると、HMRとWebpackビルドを非常に簡単に構成できました。

2).Net 3.0 + Reactを使用したSSRの例や情報はどこにありますか?

8
alex

私はあなたと同じ船に乗っていると感じています!!! dotnetcore3の公式リリース以来、先週かそこらを費やして、SPAフレームワークを使用するものを立ち上げて実行しようとしました。

これに対する答えはなく、aspnetcore3でSPAサービスを実行したいので、Visual Studio内で提供されているさまざまなテンプレートを調べました。現在、テンプレートはAngularReactで、aspnetcore3を使用しています。

これより前には、AngularReact、およびAureliaのテンプレートがあります。私にとって、アウレリアは素晴らしく見えます-バニラTypeScriptバインディング。だから私はそのルートを下りようとしています。

なんとかHMR(ホットモジュールの交換)を機能させることができました。 CLIを使用してAureliaプロジェクトを構築しました。ただし、私のプロジェクトには多くの構成があり、WebPackをまだ学習しています。 HMRは現在、Aurelia CSSでは機能しません。

私のシナリオでは、VS Codeにクライアントアプリをロードしました。次に、aspnetコアプロジェクトを作成し、webpackにフックします。

Reactについて具体的に質問しているのは承知していますが、コンセプトは同じでもかまいません。

いくつかのコード

ここに私のコードを見つけることができます:

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

注:現在、私はこのリポジトリにデータをダンプしています。トップレベルに移動すると、テンプレートから作成されたプロジェクトがあります。

使用法

  1. VSCodeのフォルダspa-apps\aurelia-cli\e1\aurelia-appを開きます
  2. project.csprojVS2019で開く
  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 +いくつかのspaフレームワーク+ dotnetcore3で構成されています。しかし、大量の設定と多くのファイルがあります。

その他のリンク

また、このブログ投稿をチェックアウトする価値があるかもしれません:

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

ここでアウレリアについてもっと読む:

https://aurelia.io/

うまくいけば、誰かがあなたにもっと良い答えを与えるでしょう-しかし、これはあなたをうまくいくかもしれません。うまくいけば、マイクロソフトがドキュメントと例を更新し、いくつかのより良いガイダンスを提供してくれることを願っています。

4
Andez