angular-fullstackを使ってみる


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

# angular-fullstack使い方

## 公式ドキュメント
https://github.com/angular-fullstack/generator-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```が開かれます。

![スクリーンショット 2015-12-27 23.35.02.png](https://qiita-image-store.s3.amazonaws.com/0/6811/2e40bf6b-ff85-5eb0-4a8e-55ca79c97229.png "スクリーンショット 2015-12-27 23.35.02.png")

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

![スクリーンショット 2015-12-27 23.38.28.png](https://qiita-image-store.s3.amazonaws.com/0/6811/8b1c27e8-ab12-6963-872a-e00eadb6180a.png "スクリーンショット 2015-12-27 23.38.28.png")


アプリ名の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サービス開発が爆速でできそうです。