なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2022/07/29

ASP.NET Core + Vite で爆速フロントエンド開発を行いたい

カテゴリー：

TypeScript を使いたーい！しかもできるだけ早くコンパイルして欲しいー！みたいなとき、 Vite は設定も少なく爆速なので便利ですよね。
ということで、今回は Vite + ASP.NET Core を使った、爆速フロントエンド開発の紹介です。

なお、開発サーバーのみ Vite を使う想定なので、 Production 環境はお好みに合わせてください。

ということで、早速ディレクトリ構成。今回は以下の要件で作成するとします：

wwwroot で静的リソースを配信する
assets ディレクトリでフロントエンド開発を行う

といった場合、 Vite を使う場合は設定の変更と、 cshtml 側での設定の 2 つが必要です。
まず、 Vite の設定は、以下のようになります。

vite.config.ts

import { resolve } from "path";
import { defineConfig } from "vite";
 
export default defineConfig({
    build: {
        outDir: "wwwroot",
        manifest: true,
        rollupOptions: {
            input: {
                main: resolve(
                    __dirname,
                    "assets",
                    "main.ts"
                )
            }
        }
    }
});

単純な、 index.html をエントリーポイントとしない構成ですね。
必要なのは outDir を wwwroot にしているくらいで、その他は最悪無くても OK です。

次に、 cshtml 側は以下のようにします：

@inject IWebHostEnvironment HostEnvironment

<head>
    @if (HostEnvironment.IsDevelopment())
    {
        <script type="module" src="http://localhost:5173/@@vite/client"></script>
        <script type="module" src="http://localhost:5173/assets/main.ts"></script>
    }
</head>

とまぁ、要するに Laravel 開発とかと同じように設定してあげます。
Blazor が @ を特殊文字として捉えているので、 @@ としないといけないのは要注意です。ということで、メモでした。

参考：

https://ja.vitejs.dev/guide/backend-integration.html