背景
クライアント〜サーバサイドまで全て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サービス開発が爆速でできそうです。