Node.js + Express (+ ejs) + Mongoose, Bootstrap + AngularJSの開発環境作成

サーバーサイドは、Node.js + Express (+ ejs) + Mongoose、クライアントサイドはBootstrap + AngularJSで開発をするための環境を作成する。 前提として、Node.jsとNode.jsのパッケージ管理システムのnpmがインストールされているものとする。 オンライン開発環境の Cloud9 は、これらはすでに用意されている。 まずはNode.jsのWebアプリケーションフレームワークであるExpressをグローバルインストールする。

$ npm install -g express

ソースのルートに移動して、Expressのテンプレートファイルを作成する。デフォルトのHTMLテンプレートはjadeだが、ejsを使用する。jadeのテンプレートのサンプルをちょっと見ただけで判断しているのだが、jadeのテンプレートはHTMLを吐き出すコードを書かなくてはならないように見える。一方ejsのテンプレートは、HTMLファイルに動的な値を注入する。

$ express -e .

すでにコードのルートにいるので、現在のディレクトリを表す . を指定した。 すると現在のディレクトリにpublic, routes, viewsというディレクトリとapp.js, package.jsonというファイルが追加された。 package.jsonの内容は、以下のとおりである。

{
  "name": "billman",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.0",
    "ejs": "*"
  }
}

bootstrapはバージョン3がグリッドシステムもわかりやすくなったので、バージョン3を使用する。ただし、カスタマイズをしたいので、LESSを使用するように設定する。ココらへんは、https://github.com/twbs/bootstrapのREADME.mdに記載されている。 まず、publicに最新のbootstrapを複製する。

$ cd public
$ git clone git://github.com/twbs/bootstrap.git

bootstrapのCSSとJavascriptをコンパイルするために、Gruntをインストールする。

$ npm install -g grunt-cli
$ cd bootstrap
$ npm install

bootstrapディレクトリにpackage.jsonというファイルとnode_modulesディレクトリが追加された。 bootstrapディレクトリで、コマンドラインから grunt distとすると、recessとUglifyJSを使用して、bootstrap/distディレクトリにコンパイルしたファイルが作成される。 素晴らしいのが、grunt watchとコマンドを打つと、Lessファイルを監視して、ファイルが変更されると自動的にコンパイルされる。 単にgruntとするとコンパイルからテスト、ドキュメント作成までしてくれる。ただし、ローカルにドキュメントを作成するには、Jekyllが必要なのだが、JekyllはRubyで動作するので、ひとまずインストールはしないことにした。 コンパイル済みのbootstrapを使用しないのは、グリッドシステムのカラム数を12ではなく、24で使用したいためである。 bootstrap/less/variables.lessファイルの

// Number of columns in the grid system
@grid-columns:              12;

を

// Number of columns in the grid system
@grid-columns:              24;

にする。 col-画面サイズ-カラムクラスのカラムはgrid.lessで、12までしか定義されていないので、24まで追加する。
AngularJSは、長くなるので割愛。MongoDBとmongooseの設定は後回し。