背景

クライアント〜サーバサイドまで全てjsで書けるということで、MEAN stackでの開発に興味があります。
ですがjavascript界隈は、流行り廃りが激しいですよね。
AngularJS2.0betaがリリースされたので、今更感はありますが、
現時点で、ある程度ベストプラクティスとして確立されているangular-fullstackというYeoman generatorを使用して、MEAN開発に入門してみたいと思います。

angular-fullstack使い方

公式ドキュメント

事前準備

Macで作業を行います。
node、npm、mongodbのインストールが必要です。
2015/12/26時点では、nodeが4.2.3以上、npmが2.14.7以上である必要がありました。これらのインストール方法は割愛します。

インストール

npm install -g yo grunt-cli bower generator-angular-fullstack

アプリ作成

まずは下記コマンドでアプリを作成します。

# yo angular-fullstack:app practicemean

以下、対話形式でセットアップを行なっていきます。
yoコマンドを初めて使ったので、統計情報を送信するかどうかYes/Noで選択します。

? ==========================================================================
We're constantly looking for ways to make yo better! 
May we anonymously report usage statistics to improve the tool over time? 
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== (Y/n)

クライアント設定

ここから上下キーで選択していきます。

テンプレートエンジンにJadeを使用するかどうか

? What would you like to write markup with? (Use arrow keys)
❯ HTML 
  Jade

使用するCSSプリプロセッサを選択

? What would you like to write stylesheets with? (Use arrow keys)
  CSS 
❯ Sass 
  Stylus 
  Less

AngularJSのルーティング方法を選択

? What Angular router would you like to use? (Use arrow keys)
  ngRoute 
❯ uiRouter

Bootstrapの使用有無

? Would you like to include Bootstrap? (Y/n)

UI Bootstrapの使用有無

? Would you like to include UI Bootstrap? (Y/n)

サーバ設定

使用するDBを選択 DBエンジンは別途インストールが必要です。

? What would you like to use for data modeling? 
❯◉ Mongoose (MongoDB)
 ◯ Sequelize (MySQL, SQLite, MariaDB, PostgreSQL)

認証の雛形を使用するかどうか

? Would you scaffold out an authentication boilerplate? (Y/n)

各サービスへの認証を行うモジュールをインストールするかどうか上下キーで移動して、スペースキーでインストール有無を切り替えます。 Enterキーで決定

? Would you like to include additional oAuth strategies? 
❯◉ Google
 ◉ Facebook
 ◉ Twitter

Socket.ioの使用有無

? Would you like to use socket.io? (Y/n)

テストモジュールの選択

? What would you like to write tests with? (Use arrow keys)
❯ Jasmine 
  Mocha + Chai + Sinon

項目が多数ありましたが、以上でインストールが開始されます！
内部ではnpm installとbower installがおこなわれます。

フォルダ構成

.
├── client
│   ├── app
│   ├── assets
│   └── components
├── e2e
│   ├── account
│   ├── components
│   └── main
└── server
    ├── api
    ├── auth
    ├── components
    ├── config
    └── views

とりあえず起動してみる

grunt serve

起動完了するとブラウザでlocalhost:9000が開かれます。

ログイン機能が既に動作する状態になっています。
ここからサービスを作り始められるのは便利すぎる！

アプリ名のDBが作られています。

> show dbs
local             0.000GB
practicemean-dev  0.000GB

> use practicemean-dev
> show collections
sessions
things
users

つまづきポイント

grunt serveすると下記のエラーが出た場合は、必要なライブラリがインストールされていないので、もう一度bower installで解決しました。

Error: File to import not found or unreadable: ../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.
        on line 2 of client/app/app.scss

MongoDBの起動を忘れていると下記エラーが出ます。mongodでDB起動してください。

MongoDB connection error: MongoError: connect ECONNREFUSED 127.0.0.1:27017
Stopping Express server

まとめ

各種ツールのインストール等、少し大変ですが、
慣れるとWEBサービス開発が爆速でできそうです。

angular-fullstackを使ってみる

背景