ということをやってみたので、その手順をば。
完成形はこのリポジトリで。
leaysgur/cfw-storage-bindings-studio https://github.com/leaysgur/cfw-storage-bindings-studio
どういうこと
npx my-guiとかするとhttp://localhost:3000とかで、GUIが起動できる
ようにしたかった。
drizzle-kit studioコマンドみたいなイメージ。他にもあるとは思うけど。
ポイント
必要なものは、この2つ。
npxのトリガーとなるCLI- GUIを実行するNodeランタイムのサーバー実装
前者のCLIで、オプションなどをパースした後に、そのままGUIのアプリ用のサーバーを立てればよい。
ここで気にするべきは、npxで実行できるようnpmに公開する関係上、そのコードをすべてアップロードしないといけないってところ。
依存モジュールがあるならば、それらも全部バンドルして、それをnpm publishでアップロードされるようにする。
CLIも静的ファイルも全部まとめてしまったらよい。
という点さえ押さえれば（それを理解するのに時間はかかったけど）、そこまで難しくはない。
アプリをどう組むか
SPAとしてクライアント主導で組む場合と、サーバー主導で組む場合と2パターンありそう。
SPAでやる場合は、CLIが立てるサーバーの実装をSPA仕様にしてやる必要がある。
どんなURLでリクエストがきても、それがHTMLを返すべきパスなら、ルートのindex.htmlを返すとか。
そこさえやれば、どんなUIでも作れるので、このパターンとしては定番かなと。
サーバー主導でやる場合は、CLIが立てるサーバーはその実装そのままでよい（Node.jsランタイム向けのアダプターを使ってビルドする）代わりに、そこですべてのリクエストを捌くことになる。
npmにアップロードするファイルもサイズも増えがちになると思うし、単純な実装だとUIかDXに制限が生まれがちかと。
（冒頭に書いたdrizzle-kit studioは、ソースが公開されてないものの中を覗いてみると、fastifyを使ってクラシックな感じで実装されてた）