Microsoft Web Template Studio

オープンソースの「Visual Studio Code」拡張機能の「Microsoft Web Template Studio」を試してみました。

Github

WebTemplateStudio
https://github.com/microsoft/WebTemplateStudio
VisualStudioCode
https://github.com/microsoft/vscode

Visual Studio Codeのインストール

Visual Studio Codeは以下からダウンロード＋インストールしてください。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Microsoft Web Template Studioのインストール

以下のショートカットで拡張機能を表示します。

OS	ショートカット
Mac	⇧⌘X
Windows	Ctrl+Shift+X

テキストボックスに「Web Template Studio」を入力します。
「Web Template Studio」が出てきたら「Install」ボタンクリックでインストールされます。

※既にインストール済みのスクショで申し訳ない

Web Template Studioでプロジェクト作成

コマンドパレットから開始

以下のショートカットでコマンドパレットを表示します。

OS	ショートカット
Mac	⇧⌘P
Windows	Ctrl+Shift+P

コマンドパレットが表示されたら「Web Template Studio」を入力して開始です。

プロジェクト名＋保存先設定

「Project Name」と「Save To」を設定したら「Next」をクリックします。

JavaScriptフレームワークの設定

React、Angular、Vue.jsから選択が可能です。
今回はAngularを選択しました。

バックエンドフレームワークの選択

Node/Express、Flask、Moleculerから選択が可能です。
今回はNode/Expressを選択しました。

JavaScriptフレームワークとバックエンドフレームワークを選択したら「Next」をクリックします。

ページテンプレートの選択

とりあえずなんでもいいかなと思ったので、選ばれているやつをそのままにして「Next」をクリックします。
※好みのを選択・追加して下さい

Azure Cloudの設定

とりあえず今の所スルーでいいかなと思ったので、「Next」をクリックして次へ。

プロジェクト作成！

設定したものに問題がなけれ、「Create Project」をクリックしてプロジェクト作成を完了します。

プロジェクト作成が完了すると以下のウィンドウが表示されるので、「Open Project」をクリックします。

プロジェクトを開くと以下のようか画面になるかと思います。

サーバーを起動する

ターミナルを起動

以下のショートカットでターミナルを表示します。

OS	ショートカット
Mac	⇧⌃`
Windows	Ctrl+Shift+`

npmを初期化

表示されたターミナルで以下のコマンドを入力し実行します。

npm install

npmでサーバー起動

npmでサーバーを起動するコマンドを入力し実行します。

npm run start

サーバー起動完了！！
あとは、以下のURLにアクセスすれば良いです。

http://localhost:3000/

感想

楽だなと思うのですよ。
最初から全て入れようとしたら
nodeインストールして
フレームワークインストールして
フォルダ構成考えて
etc・・・
となんやかんややらなきゃいけないのを手軽にWebページ表示（ローカル）できるので便利です。
いいオモチャを手に入れた気分です。
※nodeインストールとか最初だけだけど

とりあえず今回はここまで。