YeomanでAngularJS、Express、MongoDB、Node.jsなアプリのひな形を作る。

Yeomanを使ってMEAN(MongoDB、Express、AngularJS、Node.js)なWebアプリケーションのひな形を作ってみます。

AngularJS Full-Stack generator

AngularJS Full-Stack generatorというgeneratorを使用する。

$ npm install -g generator-angular-fullstack

でインストールする。-gオプションを付けてglobalなパッケージとしてインストールする。

AngularJS Full-Stackを実行する。

$ yo angular-fullstack

を実行すると、generatorが次のような質問をしてくるので、適宜答えてあげる。

• JavaScript、CoffeeScriptのどっちを使う?
• HTMLとJade、どっちでマークアップする?
• css、sass、stylus、lessのどれでスタイル書く?
• AngularのRouterは、ngRouterとuiRouterのどっちを使う?
• Twitter Bootstrap使う?
• ui-bootstrapを使う?
• MongoDBのモデリングにはmongooseを使う?
• 認証処理のboilerplateを生成する?
• Google、Facebook、TwitterのOAuthストラテジを有効にする?
• socket.ioを使う?

質問に答えていくと↑のような画面になる。ここから先は、npm installとかbower installとかYoermanが自動で進めてくれる。

生成したプロジェクト

このgeneratorによって生成したプロジェクトは↓のようなディレクトリ構造になる。

.
├── Gruntfile.js
├── bower.json
├── client
├── e2e
├── karma.conf.js
├── node_modules
├── package.json
├── protractor.conf.js
└── server

clientディレクトリにはクライアントサイドのコードを、serverディレクトリにはサーバサイドのコードを格納するっていうのが、以前のバージョンから変わったところか。e2eディレクトリの目的は詳細を調べる必要がある。

アプリケーションを起動する。

$ grunt serve

でアプリケーションが起動する。