coah

しないといけないこと

.envを書く

この辺を書いておくとよいです

TWITTER_CONSUMER_KEY=
TWITTER_CONSUMER_SECRET=
TWITTER_CALLBACK_URL=
MONGODB_URI=

必要なもの

• io.js
• redis
• mongodb
• sketch tools

あると便利なもの

• nvm
• direnv

インストール方法

nvm

brew install nvm
echo '
[[ -d /usr/local/opt/nvm ]] && export NVM_DIR=/usr/local/opt/nvm
[[ -f $NVM_DIR/nvm.sh ]] && source $NVM_DIR/nvm.sh
' >> ~/.{zshrc,bashrc}

iojsのアップデート頻度が高い + バージョンによって動かない等あるので、nvmとかnodebrewとかでバージョン管理してください、ここではnvmを想定して説明します

iojs

nvm install
nvm alias default
nvm use

プロジェクトルートに.nvmrcがあります、同じ階層でnvmの作業をするとバージョン指定が省略できます

sketch tools

brew install caskroom/cask/brew-cask
brew cask install sketch-tool

フォントをビルドするために必要です（特にフォントをいじらない場合は不要です）、brewcaskで入れられます

こちらからダウンロードして手動でインストールしてもいいです

direnv

brew install direnv
direnv allow

.envrcがある場所へ移動すると中に書いてある処理が自動で実行されます、最初にdirenv allowと叩いて実行を許可しないと有効になりません（次回以降は変更があるまで不要です）

開発のはじめかた

npm i
npm run dev

アプリケーションサーバ・ウォッチサーバが立ち上がります

特定のファイルを編集後、必要であればサーバをリロードし、読み込みが可能な状態になった時点でブラウザがオートリロードされます、child_process.forkとbrowser-syncを使っています

キャッシュを使った差分ビルドなど活用しているのでそこそこ軽快に動作するはずです、「このタスクが重い」などあれば指摘ください

単独ビルド

npm run build

静的ファイルがすべてビルドされます、サーバは立ち上がりません

SublimeLinterの設定

SublimeLinter
SublimeLinter-jscs
SublimeLinter-contrib-eslint

上記3パッケージを導入します

npm -g i jscs esprima-fb eslint eslint-plugin-react babel-eslint

アクティベートするには上記パッケージが必要です

direnv allow

開発パッケージには全てのlinterが含まれています

direnvでnode_modules/.binへパスを通せば上記パッケージの導入は不要です

ctrl + `でコンソールが開きます、パッケージが足りない旨警告が出ていた場合はnpm -gします(jscsはdirenvを使ってもパスが通らないかもしれないです)

カスタムフォントのビルド

gulp symbols

フォント生成はosxでしか動作しないためオートメーション化されていません、lib/symbol/symbol-font-16px.sketchを編集後、上記コマンドにて手動でビルドしてください

git監視下にあるファイルが変更されますが正しい挙動です

生成ファイルをpublicフォルダへ配送する処理はbuildタスクに入っています、ウォッチサーバが起動していれば生成コマンドを実行後に自動で配送されオートリロードされます

フォントはなるべくピクセルパーフェクトになっていると良いと思います

プロダクションモード

unitech/pm2を使います

インスタンス数などの設定はpackage.jsonに記述されています

direnvを導入していればpm2コマンドが使えます

何か問題が起きた場合はpm2 kill (node_modules/.bin/pm2 kill)してください、PM2プロセスがmasterごと全部落ちます

環境変数を上書きする

$ cat .env
ENV1=hoge
ENV2=fuga

プロジェクトルートに.envファイルを作れば起動時にその値で上書きされます

ファイルの読み込みやデフォルト値の設定に関する処理はlib/env.jsに記述されています、.envはlib/env.jsよりも優先されます