Cloud9でAngular2公式Tutorialをやるための環境設定

TL;DR

bs-config.json

{
  "port"  : "8080",
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}

はじめに

Cloud9 はRails Tutorialで出会って以来お気に入りのIDEで、環境構築が簡単なので仕事でもよく使う。
今回、同僚にAngular2 Tutorialをやってもらうにあたり、簡易Webサーバ立ち上げのところでつまずいたのでメモ。

手順

Quickstart用テンプレートをGit Cloneする

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install

lite-serverの設定を変更

lite-serverのポート設定はアプリケーションルートのbs-config.jsonに記載されている。
"port" : "8080" を追加。

bs-config.json

{
  "port"  : "8080",
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}

簡易サーバを立ち上げる

npm start

URLはCloud9上で、Share->Applicationから取得できる。

Cloud9にはnode.jsもnpmも入っているからこれだけで開発が始められる。すごいね。