12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

BlazorAdvent Calendar 2023

Day 8

.NET 8 で ASP.NET Core Hosted な Blazor WebAssembly プロジェクトを新規作成する

Last updated at Posted at 2023-12-08

先に結論

タイトルの件、下記リンク先の手順に従って Blazor Minimum プロジェクトテンプレートをインストールし、「Blazor WebAssembly アプリ (空)」プロジェクトテンプレートから作るといいかもです。

背景 - .NET 8 では Blazor WebAssembly + ASP.NET Core Host の選択肢が削除

先日 2023 年 11 月にリリースされた .NET 8 とその SDK では、Blazor WebAssembly のプロジェクトの新規作成時、対象フレームワークに .NET 8 を選択すると、「ASP.NET Core Hosted」のオプションが選択できません。

下図は Visual Studio 2022 における「Blazor WebAssembly アプリ」のプロジェクト新規作成時のダイアログの様子です。.NET 7 だと、「ASP.NET Core Hosted」のオプションが選べますが、

image.png

ここで「フレームワーク」を「.NET 8.0」に変更すると、「ASP.NET Core Hosted」のオプションが消えてしまいます (下図)。

image.png

GUI こそありませんが、.NET CLI (dotnet コマンド) でも同様で、以下のように、フレームワーク = .NET 8 +ASP.NET Core Hosted の組み合わせでプロジェクトを新規作成しようとすると、エラーになります (下記例)。

> dotnet new blazorwasm -f net8.0 --hosted
No templates found matching: 'new' 'blazorwasm' '-f' 'net8.0' '--hosted'.

.NET 8 では「Blazor Web App」プロジェクトテンプレートを使う

では .NET 8 で Blazor WebAssembly + ASP.NET Core Hosted に相当するプロジェクトを作成するにはどうするかというと、Visual Studio の場合はプロジェクトテンプレートとして、「Blazor WebAssembly アプリ」ではなく、.NET 8 から新たに追加された「Blazor Web App」を選択し、途中のオプション構成で、

  • Interactive render mode = WebAssembly
  • Interactive location = Global

を指定します (下図例)。

image.png

.NET CLI なら次のとおりです。

dotnet new blazor -f net8.0 -int WebAssembly -ai

でも、ちょっと面倒なことがあるかも...?

ただ、この構成では、フォールバックページが Blazor SSR だったり、Blazor WebAssembly 側としても事前レンダリングが既定で有効であったりしており、少し気を付けた方がいい場合も考えられます。例えば、今までだったら Blazor WebAssembly としてはちゃんと動作していた、Razor コンポーネントの OnInitializedAsync ライフサイクルメソッドでブラウザのローカルストレージから何か値を取得する処理も、この .NET 8 の Blazor Web App の構成で実行すると、事前レンダリングのタイミングで例外を吐いて停止してしまいます。.NET 7 以前は問題なかったのになぜだ!? と、これまで Blazor WebAssembly プログラムを作成してきた人ほどハマりがちかもしれません。

もちろん、事前レンダリングを無効にするなどのオプション構成も用意されていますし、これが Blazor の進化形であることは間違いないでしょう (ここからさらに Auto レンダーモードに拡張とか、SSR との使い分けができるようなプロジェクト構成になっています)。

とはいえ、「いやいや、静的ホスティング上に配置できる Blazor WebAssembly と、API レイヤーを実装する ASP.NET Core Host が、シンプルに欲しいだけなんだ」という需要は引き続き一定数あるかもしれません。

実際、先日に以下の記事を見かけたりもしました。

上記記事では、前述のとおり .NET 8 SDK では Blazor WebAssembky in .NET 8 + ASP.NET Core Hosted の構成のプロジェクトテンプレートが提供されなくなったことから、代わりに、Blazor WebAssembly 側、ASP.NET Core Host 側、共有プロジェクト、を個別に作成し、協調動作するように構成する手順をひとつずつ解説されています。

ということで、上記記事に従えば、.NET 8 を対象フレームワークとした、古き良き Blazor WebAssembky + ASP.NET Core Hosted 形式のプロジェクトを新規作成することができます。

しかし上記記事の手順を再現する以外、もっと手軽な方法はないのでしょうか。

この用途で使えるプロジェクトテンプレートがあります

幸いなことに、以下のプロジェクトテンプレートを開発環境に事前にインストールしておくことで、.NET 8 を対象フレームワークとした、Blazor WebAssembly + ASP.NET Core Hosted 形式のプロジェクトを、簡単に新規作成することができます。

上記プロジェクトテンプレートをインストールするには、.NET 8 SDK がインストール済みの環境で、ターミナル (コマンドプロンプト) を開き、以下のコマンドを入力すればよいです。

> dotnet new install Toolbelt.AspNetCore.Blazor.Minimum.Templates::8.0.0

上記プロジェクトテンプレートは、元々は余分な CSS や JavaScript を一切含まない、さらには共通レイアウト指定やルーティングまで省くことのできる、限界までそぎ落としたシンプルな Blazor WebAssembly ないしは Server アプリケーションを新規作成するために開発されました。このプロジェクトテンプレートが .NET 8 対応した結果、前述の Blazor WebAssembly + ASP.NET Core Hosted 形式のプロジェクトも、このプロジェクトテンプレートから新規作成できるようになったわけです。

上記手順でこのプロジェクトテンプレートをインストール後、例えば Visual Studio の場合ですと、プロジェクトの新規作成ダイアログで、まず、「Blazor WebAssembly アプリ(空)」を選択し、

image.png

プロジェクトを作成するフォルダやプロジェクト名などを適宜指定し、

image.png

「追加情報」の画面で、フレームワークは「.NET 8.0」を選んだ上で、「ASP.NET Core でホスト」のチェックを On にしてから、「作成」をクリックしてプロジェクト作成を執行すればよいです。適宜、「ルーティングを有効化」「共通レイアウトを有効化」のチェックも On にしておくとよいでしょう。

image.png

以上で .NET 8 でも、Blazor WebAssembly + ASP.NET Core Hosted 形式のプロジェクトが出来上がります。

.NET CLI で同じ事をやるには以下のコマンドとなります。

dotnet new blazorwasmmin -f net8.0 --hosted -n {プロジェクト名}

なお、前述のとおりこのプロジェクトテンプレートは、"Minimum な" Blazor プロジェクトを生成することを目財しているため、.NET SDK 標準のプロジェクトテンプレートにはあった、"Counter" や "Weather Forecast" といったサンプルページは生成されません。

以上、.NET 8 における Blazor のパワーすべてを解き放さず制限する代わりに、なるべく面倒なく Blazor WebAssembly と ASP.NET Core による API サーバー実装の組み合わせを新規作成したいときには、上記 Blazor Minimum プロジェクトテンプレートを導入しておくとよいかもね、というお話でした。

12
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?