Posted at

StackBlitz その後 - Angula CLI リポジトリをダイレクトに実行

More than 1 year has passed since last update.


 StackBlitz その後

前回の記事 StackBlitz で Angular のオンラインデモ環境を爆速で用意する からしばらく経ちましたが、StackBlitz は着々と進化を続けています。

最近いろいろなところで目にするようになってきました。なんと Angular Material のサイトでも使われています。今後も様々なところへ普及していくだろうと思っています。


新機能

少し前に追加された機能で StackBlitz で Angula CLI リポジトリをダイレクトに実行 できるようになりました。

何を言っているかというと、


GitHub上のURL

https://github.com/{GH_USERNAME}/{REPO_NAME}


というリポジトリがあった場合に、URL を

  1.github.com から .com を削除し github とし、

  2.ドメイン部分に stackblitz.com を挿入する。


StackBlitzで実行するためのURL

https://stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}


と変更してアクセスすると、直接 StackBlitz 上で Angular CLI プロジェクトが実行できるようになるということです!


実際にやってみる

1. Github に移動

現在、自分の GitHub 上には Angular で作った ToDo アプリがあるので、ブラウザでアクセスします。

https://github.com/tkiryu/todo-app-complete

image.png

2. URLを変更

さきほどの手順にしたがって URL を変更します。

https://stackblitz.com/github/tkiryu/todo-app-complete

image.png

3. 変更後の URL に移動

右ペインに実行結果が表示されます。

image.png


デモとして見せる、共有するのに最適

このように GitHub 上のリポジトリをダイレクトにブラウザ上で実行できるので、とても簡単にデモを見せることができます。URLを送れば、共有も簡単です。ブラウザ上で実行されるので、共有相手先の環境を一切気にする必要がないのも嬉しいですね。共有された側は、ブラウザ右上の FORK ボタンで簡自分のプロジェクトとしてフォークすることができます。これまた簡単ですね。

この機能がローンチされてからというもの、頻繁に利用しています。GitHub 上にプロジェクトをお持ちの方はぜひ試してみてください。


 参照

StackBlitz のファウンダー Eric Simons 氏によるポスト Run Angular CLI repos directly in your browser をあわせてチェックしてみてください。