Habiticaのローカル開発環境構築から起動まで＠Ubuntu in VirtualBox

# Habitica(https://habitica.com) を開発したい．
## Habiticaとは？
![Hrpg_banner_wiki.png](https://qiita-image-store.s3.amazonaws.com/0/164373/a2dd41e5-0e16-c55b-3265-895ca9c6cf85.png)

> あなたの生活をロールプレイングゲームのように変えるオープンソースの習慣構築プログラム
(「[Habitica Wiki 日本](http://ja.habitica.wikia.com/wiki/Habitica_Wiki)」より)

# VirtualBoxを使う（どうしてもという場合は使わなくて良い）
## 本体のダウンロード
公式サイト[Download VirtualBox](https://www.virtualbox.org/wiki/Downloads)　から，
**[VirtualBox 5.2.2 platform packages]**の**[OS X hosts]**を，ダウンロード＆インストール．
そのあとに，
**[VirtualBox 5.2.2 Oracle VM VirtualBox Extension Pack ]**の**[All supported platforms]**も，ダウンロード＆インストール．

## isoファイルのダウンロード
ひとまずUbuntu16.04 (LTS）にしておく．[Download Ubuntu Desktop](https://www.ubuntu.com/download/desktop)
ダウンロードしたら，USBメモリに移して使うと後々楽．

## 仮想環境立ち上げ＆スペック
メモリ2GB（推奨は4GB？（swapが4Gあると良いらしいので）），ストレージ20GB（10だとギリギリかも）．
入ったら，

```
sudo apt-get update
sudo apt-get upgrade
```

- 本体ディスプレイ一番上部のVirtualBoxメニューから**[Devices]**を選び，一番下の**[Insert Guest Additions CD Image...]**をクリック．画面になんか出るから**[Run]**．

- またも**[Devices]**を選び，**[Shared Clipboard]**（便利である）の中の双方向を選択．

```
reboot
```

# ローカル開発環境の用意の手順
ほぼほぼ公式に書いてある通りにやれば良い（これが楽々読めるなら，その通りやるのを推奨します）
　[Setting up Habitica Locally](http://habitica.wikia.com/wiki/Setting_up_Habitica_Locally)

## Gitを使えるようにする
[1.5 Getting Started - Installing Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)

```
sudo apt-get install git
```

## Git cloneする
1. Gitアカウントを作る．Githubで良い．
1.  https://github.com/HabitRPG/habitica からForkしてくる
**※ここは本家大元からではなく，ローカル管理者が自前でcloneしてきたリポジトリにするのが良いかも．**
1. ForkしたものをCloneする

```
cd ~
git clone https://github.com/YourUsername/habitica.git　（YourUsernameは自分のリモートリポジトリ名を入れる．）
```

1. push先のリモートリポジトリと繋げる
 
```
cd habitica
git remote add upstream https://github.com/HabitRPG/habitica.git
git remote -v　（どこに繋いだか確認できる）
```
出力はこんな感じで表示されてれば良い．

```
  origin   https://github.com/YourUsername/habitica.git (fetch)
  origin   https://github.com/YourUsername/habitica.git (push)
  upstream https://github.com/HabitRPG/habitica.git (fetch)
  upstream https://github.com/HabitRPG/habitica.git (push)
```
## 設定ファイルを用意する
ここをいじってログイン情報とかを入れられる？

```
cp config.json.example config.json
```
作ったファイルは使わなくても動くには動く．

## Node npm のバージョンを仕様に合わせる
要求されるのは，Node : 6以上，npm : 5以上．
不測の事態のこともあるし，一般的にNode系のバージョンは管理するべきだと思うので，
nvm（[Node Version Manager - Simple bash script to manage multiple active node.js versions](https://github.com/creationix/nvm)）を入れておく．

1. nvmのインストール

```
sudo apt-get update
sudo apt-get install build-essential libssl-dev
sudo apt-get install curl
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash
```

**※ここでターミナルを開き直す．**

1. インストールできてるか確認

```
cd ~/habitica　（一応）
command -v nvm
```
「nvm」が返って来ればOK．
1. Nodeの最新版をインストール

```
nvm install node
（これだけだと最新版が入る．安定版ではない．）
```

1. インストールしたバージョンを確認

```
node --version
npm --version
```
要件を満たしてるか確認．


ここまでがプラットフォーム関係なしにやること
---

## MongoDBを入れる
mongoDBの公式（[Install MongoDB Community Edition on Ubuntu](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/)）の通りにやれば良い．

1. インストール（ただし，Linuxが[Ubuntu, 16.04] の場合に限る）

```
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6
echo "deb [ arch=amd64,arm64 ] http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list
sudo apt-get update
sudo apt-get install -y mongodb-org
```

1. 起動

```
sudo service mongod start
cat /var/log/mongodb/mongod.log （確認：[where <port> is the port configured in /etc/mongod.conf, 27017 by default.]が見当たればOK）
sudo service mongod stop
sudo service mongod restart
```

## 他にnpmで必要なものを入れる

```
npm install -g gulp mocha
npm install
```

# Habiticaの起動
## 起動コマンド

```
cd ~/habitica （基本的には今までもここでコマンド操作している）
npm run client:dev
```

少し時間がかかる．「webpack: Compiled successfully.」が表示されるまでしばらく待つ．

このターミナルは走らせたまま，新しくターミナルウインドウを開いて，（※注意：この時，mongoDBが起動している必要がある．）

```
cd ~/habitica
npm start
```

## Habiticaが動いているか確認
ブラウザ（firefoxで良い）を開いて， http://localhost:8080 にアクセスして動いているか確認する．
![スクリーンショット 2017-11-29 22.18.38.png](https://qiita-image-store.s3.amazonaws.com/0/164373/963261ff-4adf-02a6-3625-2935765a37a5.png)




# 終わり！お疲れ様でした．

# ※コマンドまとめ（次回起動時にすればいいこと）

```
cd ~/habitica
sudo service mongod start
npm run client:dev
```

(ターミナルウインドウを新たに1つ開いてから)

```
cd ~/habitica
npm start
```

# データを初期化したい場合

- あるべきボタンが押せない（もしくはない）
 
- ログインボタンがない
 
- ローカルストレージのデータを消去したい

そんな時は， http://localhost:8080/static/clear-browser-data にアクセスして，
そこにあるボタンを押す．データが消去されるので，ページをリロードする．

# いじるべきソースコードがどこにあるか？

```
cd ~/habitica/website
```
とりあえずは，

```
cd ~/habitica/website/client
```
をいじると変化がわかりやすいと思う．

# Gitのクライアントソフトは？
Linuxでは「Sourcetree」は対応されてない．なので，

- 素直にCUI（コマンドライン）を使う
- GitKraken(https://www.gitkraken.com) を使う．