ASP.NET Core + React

参考

チュートリアル: Visual Studio での React を使用した ASP.NET Core アプリの作成
React と、ASP.NET Core 用の最小 API を使用して、フル スタック アプリケーションを作成する
React（本家）クイックスタート

React and ASP.NET Core プロジェクトテンプレート

はまりどころ１

そもそも npm のインストールが必要。 React 関連のプロジェクトテンプレートでは npm のインストールが必須。 npm のインストールは Visual Studio で npm を使えるようにする を参照。

はまりどころ２

React and ASP.NET Core のプロジェクトテンプレートでプロジェクトを作成すると実行時にエラーとなる。

// vite.config.js

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7033';

環境変数等を見て ASP.NET Core 側の url を設定していると思われるが、結果的に間違ったURLを参照するため、 500 Internal Server Error が発生する。

// vite.config.js

//const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
//    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7033';
const target = 'https://localhost:32773';

ASP.NET Core の url を確認して正しい url（ポート番号）を固定で指定することでエラーは解消される。

プロジェクトの構成

• reactwithasp.client（React 側）
• ReactWithASP.Server（ASP.NET Core（C#））

それぞれ別々の Webサーバーが起動する。
reactwithasp.client では Vite という（開発用）Webサーバーが起動する。