asp.net WebAPI + Svelteで開発 - とりあえず雑記

Visual StudioでWebAPIを作成してついでにSvelteと一緒にデバッグしようと思ったのだけれど、色々試行錯誤したときのメモ。
Visual Studioのテンプレートでsvelteを使えるのがあったのだけれど、うまく動かなかったので自分でいろいろと頑張った。
ちなみに、Svelte自体のデバッグが、Visual Studioのエディタからできるわけではないです。
あくまでWebAPIとSvelteで作ったSPAが連携してうまく動いているのを確認できる程度です。

実行環境

Windows 10
nodejs
.net 6.0
git

LinuxやMacでは試していませんが、.netのプロジェクトフォルダのサブフォルダにnpmのプロジェクトを作成するだけなので、多分同じように動くと思います。

WebAPIのプロジェクトを作成

dotnet new webapi -au None -f net6.0 -lang "C#" -n WebAPIProject

プロジェクトのディレクトリに移動

cd WebAPIProject

SPA(svelte)のプロジェクトを、WebAPIのディレクトリ内に作成

svelteのクイックスタートのコマンドとほぼ一緒です。

npx degit sveltejs/template SvelteApp
cd SvelteApp
npm install

作成直後のディレクトリ構成

これまでのコマンドがエラーなく実行できたら、多分、以下のようなディレクトリ構成になっているはず。
SvelteAppディレクトリの中にさらにnpx/npmで作成したSvelteのディレクトリSvelteAppがある。

dir


    ディレクトリ: C:\mydata\svelte\WebAPIProject


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2022/04/12     21:08                bin
d-----        2022/04/12     21:04                Controllers
d-----        2022/04/12     21:08                obj
d-----        2022/04/12     21:04                Properties
d-----        2022/04/12     21:06                SvelteApp
-a----        2022/04/12     21:04            127 appsettings.Development.json
-a----        2022/04/12     21:04            151 appsettings.json
-a----        2022/04/12     21:04            557 Program.cs
-a----        2022/04/12     21:04            262 WeatherForecast.cs
-a----        2022/04/12     21:04            327 WebAPIProject.csproj

WebAPIのProgram.csを修正

このままだと、WebAPIをデバッグしていても、npx/npmで作成したSvelteAppプロジェクトのアプリケーションファイルが参照できない。
Program.csで、静的ファイルの参照ディレクトリ(ルートディレクトリ)をデフォルトのwwwrootから、SvelteAppのpublicディレクトリに変更する。

//var builder = WebApplication.CreateBuilder(args); // コメントアウト
// 以下のように修正
var builder = WebApplication.CreateBuilder(new WebApplicationOptions
{
    WebRootPath = "SvelteApp/public" // Svelteのpublicディレクトリを参照
});

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

// 静的ファイルを参照可能に設定(デフォルトはwwwrootだが、上部の修正箇所でWebRootPathを指定して参照先を変更している)
app.UseStaticFiles();

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

npm run devをデバッグ時は実行しておく

SPA(svelte)の変更がすぐに参照されるよう、デバッグ時はVisual Studio Codeのコンソールでnpm run devを実行しておく。

cd SvelteApp
npm run dev

Visual StudioでWebAPIのプロジェクトをデバッグ

Visual Studioでデバッグ実行すると、デフォルトのWeatherForecastのページがブラウザで表示される。

アドレスをルートディレクトリに変更すると、svelteのトップページが表示されます。

これで、svelteの修正がWebAPIのデバッグ時にリアルタイムに反映されるようになりました。コンパイルが完了したからリロードを行わないといけないのがちょっと面倒ですが。