ASP.NET Core + Vite + React.js (TypeScript)でHelloWorldする方法

2023/09/24 追記

VisualStudioが公式にTypeScript, Vite対応予定
https://devblogs.microsoft.com/visualstudio/new-react-typescript-spa-templates-and-more/

Ⅰ. はじめに

タイトルの通り「ASP.NET Core + Vite + React.js (TypeScript)でHelloWorldする方法」です。

Ⅱ. 手順

1. プロジェクトを新規作成する

説明の都合上、プロジェクト名をMyPerfectProjectと仮定する

2. ClientAppディレクトリを削除する

デフォルトの状態ではViteとTypeScriptに対応していないので削除する

3. ClientAppを新規作成する

npm create vite@latest ClientApp -- --template react-ts

4. SpaProxyServerUrlのポート番号を確認する

説明の都合上、ポート番号44412と仮定する

cat MyPerfectProject.csproj | grep SpaProxyServerUrl

5. ファイルを編集する

ClientApp/src/App.tsx

root.render(
  <h1>HelloWorld!</h1>
)

ClientApp/package.json

 {
   "scripts": {
+    "start": "vite",
   }
 }

ClientApp/vite.config.ts

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build'
  },
  server: {
    port : 44412,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        secure: false,
        ws: true
      }
    }
  }
})

MyPerfectProject/Properties/launchSettings.json

{
  "profiles": {
    "MyPerfectProject": {
      "applicationUrl": "http://localhost:5000"
    }
  }
}

6. Webサーバを起動する

dotnet run

実行結果

http://localhost:5000にアクセスすると自動的にリダイレクトされる

備忘録

備忘録