2015/01/01

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
でアプリケーションが起動する。

0 件のコメント: