Frontend は React(or Next.js) で、Backend を ASP.NET Core で開発したい。しかも React(or Next.js) の開発は Visual Studio Code がいい。TypeScript を使いたいし、npm じゃ yarn がいい。でも Visual Studio 2019 の React テンプレートだと React のバージョンが古いし、 jqueryなど余計なものも入っていてすごく嫌。
なんて思ったことないでしょうか。大丈夫、簡単にきれいなプロジェクトを作ることができます。実は何回やっても細かいところを忘れるのでいい加減メモとして残すことにしただけです。VS2022がもうすぐ出そうなこのタイミングで出す内容じゃないですけど、個人的なメモとして残しておきます。
以下の手順です。
1. VS のテンプレートを使ってプロジェクトを作成
2. ビルドする前に ClientApp の中身を全部削除
3. ClientApp 内部で yarn を使って React or Next.jsア プリケーションを作成
React の場合
yarn create react-app myapp --template typescript
Next.jsの場合
yarn create next-app myapp --typescript
4. ClientAppフォルダ内部にできた myapp フォルダの中身をすべて ClientApp へ移動
移動したら myapp フォルダは削除。
5. .env ファイルを ClientApp サブディレクトリに追加し、下記の内容を追記
BROWSER=none
6. Startup クラスで、spa.UseReactDevelopmentServer の呼び出しを以下に置き換え
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
7. .cspojファイルを開いて、npm の箇所を下記のように修正
<Exec WorkingDirectory="$(SpaRoot)" Command="yarn install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="yarn install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="yarn build" />
8. 起動する
ClietApp フォルダでフロント側の開発サーバーを起動します。Powershellなどから以下コマンドを叩いてもいいのですが、React or Next.js を Visual Studio Code で開発していくなら ClientApp フォルダを Visual Studo Code で「フォルダを開く」で開いてから Terminal でコマンドを叩くことになるでしょう。
yarn start
もし Next.js を作成していたならば
yarn dev
Visual Studio でデバッグ実行。すると、https://localhost:44342 など、Visual Studio で設定されているWebサーバーのアドレスでブラウザが立ち上がります。http://localhost:3000 へProxy設定がされているので、それだけ問題なく動作します。