VisualStudio2019のASP.NET Core+ReactテンプレートでReact部分を置き換えてみた

技術的な話だけど、公式ドキュメントに基づいた内容のシェアではなく、思いつきでやってみたらうまくいったような気がしただけなのでQiitaではなくnoteに...。

Firebaseを使ってReactアプリを作っていたのでサーバーサイドを書くことがあまりなかったけど、C#を書きたくなったのでVS2019をインストールした。

VS2019のASP.NET Core+Reactテンプレートで土台を作ったけど、Reactバージョンが16.0.0と古い。React Hooksが使えない。それは嫌だ。しかもTypeScript環境もテンプレで導入できない。無理無理。(静的型付け過激派)

CreateReactApp(以下CRA)で作ったReactアプリをそのまま挿し込めたらいいのになぁと思いながら、とりあえずVS2019が生成したテンプレートを眺めてた。

テンプレートを眺める

.csprojファイルにSPAフォルダを指定している...。

<PropertyGroup>
 ...
 <SpaRoot>ClientApp\</SpaRoot>
 ...
</PropertyGroup>

Startup.csを見るとConfigureServicesメソッドでSPAのbuildフォルダを指定している...。

public void ConfigureServices(IServiceCollection services)
{

   services.AddControllersWithViews();

   // In production, the React files will be served from this directory
   services.AddSpaStaticFiles(configuration =>
   {
       configuration.RootPath = "ClientApp/build";
   });
}

さらにConfigureメソッドを見ると、SPAプロジェクトのソースフォルダを指定、そしてReactの開発サーバーを起動するらしき処理が書いてある...。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
   // 中略

   app.UseSpa(spa =>
   {
       spa.Options.SourcePath = "ClientApp";

       if (env.IsDevelopment())
       {
           spa.UseReactDevelopmentServer(npmScript: "start");
       }
   });
}

このへんを正しく指定すれば動くのでは???

CRAを実行して参照を修正

ということでASP.NET Coreプロジェクト内でCRAを実行してみる...。

npx create-react-app dotnetreact2019 --typescript

.csprojファイルを書き換えます。

<PropertyGroup>
 ...
 <SpaRoot>dotnetreact2019\</SpaRoot>
 ...
</PropertyGroup>

Startup.csを書き換えます。

public void ConfigureServices(IServiceCollection services)
{

   services.AddControllersWithViews();

   // In production, the React files will be served from this directory
   services.AddSpaStaticFiles(configuration =>
   {
       configuration.RootPath = "dotnetreact2019/build";
   });
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
   // 中略

   app.UseSpa(spa =>
   {
       spa.Options.SourcePath = "dotnetreact2019";

       if (env.IsDevelopment())
       {
           spa.UseReactDevelopmentServer(npmScript: "start");
       }
   });
}

そしてデバッグ起動すると...。

画像1

CRAテンプレートが起動した!

ReactからASP.NET CoreのWebAPIにアクセスできることも確認できました。

VS2019で「発行」を実行したらリリース用のファイルも正しく一式作成してくれました。

終わり

もっといろいろ精査しないといけない気がするけど、とりあえずASP.NET Core+React+TypeScriptでアプリケーションが作れそう。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
2
雑記を雑に記します
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。