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

2023/01/24追記

本記事内容は非推奨です

何か特別な理由がない限りViteを利用した方法を推奨します
（webpackよりもViteの方が高速で動作する事が理由です）
https://kagasu.hatenablog.com/entry/2023/01/24/121703

Ⅰ. はじめに

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

Ⅱ. 手順

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

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

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

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

3. ClientAppを新規作成する

npx create-react-app --template typescript clientapp
move clientapp ClientApp

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

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

cat MyPerfectProject.csproj | grep SpaProxyServerUrl

5. 新規ファイルを作成する

ClientApp/.env.development

PORT=44412

6. パッケージをインストールする

npm install http-proxy-middleware

7. 新規ファイルを作成する

※react-scriptsがsetupProxy.jsファイルを探すのでファイル名は変更不可（拡張子もjs固定）
ClientApp/src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware')
const { env } = require('process')

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

const context =  [
  '/api'
]

module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  })

  app.use(appProxy)
}

8. ファイルを編集する

ClientApp/src/index.tsx

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

MyPerfectProject/Properties/launchSettings.json

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

9. Webサーバを起動する

dotnet run

実行結果

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

参考

https://reactjs.org/

備忘録

備忘録