WSLを使ってBlazor WebAssemblyで開発した話

TL;DR

C#のBlazor wasmの開発をVisualStudioなしで行う方法について自分用に適当にまとめたもの。
パソコンスペックが低くてVisualStudioの動きが遅すぎるので代替として。

自分の環境

OS:Windows10 22H2
仮想:WSL2

WSL2内のOS

cat /etc/os-release
> PRETTY NAME="Debian GNU/Linux 11 (bullseye)"
(略)

WSLの準備

WSLのダウンロードについては割愛します。
自分はUbuntu?かDebian?のどっちかを選択しました。(多分Ubuntu)
追記:Debianでした。

.NETのダウンロード

今回はコンソールで行います。
方法はMicrosoft公式に書いてあります。
Ubuntu版
Debian版

今回は、Debian11の場合を紹介します。
Ubuntuも多分これでできるんじゃないかな?
(というか、もしかしたらUbuntu最新版なら最初から.NET SDKがインストールされてるかも)

Microsoftの認証キーを照合

wget https://packages.microsoft.com/config/debian/11/packages-microsoft-prod.deb -O packages- 
microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb

.NET7.0 SDKのインストール

sudo apt-get update && \ sudo apt-get install -y dotnet-sdk-7.0

実際にBlazor wasmを作る

参考:Qitta - 5分でHello WorldできるBlazor WebAssembly (C#)

好きなディレクトリまでcdコマンドで移動します。

デフォルトのプロジェクトを作ります。

dotnet new blazorwasm -o 好きなプロジェクト名

プロジェクトファイル内に移動します。

cd 好きなプロジェクト名
dotnet watch run

起動後にいろいろ出てきますが、https://localhost:5xxxみたいな文字があるので、それをブラウザのアドレス欄で検索すると起動できます。

終わり

Blazorは面白いのでみんなやってみよう!

Qlogについて

Qlogって画像使えないのかな?
あと、長文を書いてるとプレビュー画面にするボタンが上にしかないのが結構面倒に感じるねぇ…
さらに言うと、リンクも自動でハイパーリンクになってくれない…
今回は自分用に適当にまとめる文章だからいいけど、人に読んでもらうときはやっぱり画像があったほうがいいから、今まで通りQiitaのほうで上げるほうがいいかもね。

追記:この記事を投稿した後日に公式様からこのような記事が投稿されました。
こちらによると画像は使えるみたいです。
また、プレビューボタンについても右側に表示されるように変更してくれたみたいです。ありがとうございます!!
対応が爆速なので今後に期待してこちらももう少し使ってみたいと思います。