ほぼ日刊サービス開発日誌

React, firebase, 機械学習など

sponsored

create-react-appでreactプロジェクトを作成しscssを自動反映する+firebase deployするなどの設定

scss自動コンパイラの設定

package.jsonにて

"scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "node scripts/start.js",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "node scripts/build.js",
    "build": "npm-run-all build-css build-js",
    "test": "node scripts/test.js --env=jsdom"
  },

以上のように設定した。

npm-run-allをグローバルにインストール(-gオプションでインストール)しておく。

これで npm startするとcssとjsの変更を常にウォッチしてコンパイルくれる。

用意ができたら

firebase init

でhostingを追加する

publicディレクトリとしてどこを指すべきか聞かれる

create-react-appのデフォルトならbuildと答えておく。

これはあとからでも変えられる。

firebase.jsonの

{
  "hosting": {
    "public": "build", //ここを変える
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

"public"に対応するバリューがビルド先のディレクトリになっているか確認する。

npm run build; firebase deployでデプロイされる。

firebase not found

firebaseコマンドは

alias firebase="`npm config get prefix`/bin/firebase"

あるいはnpm config get prefixしてfirebaseライブラリのあるパスを出してから

export PATH="/Users/kanbarashiho/.anyenv/envs/nodenv/versions/8.9.3/bin:$PATH"

のように~/.zshrcあるいは~/.bash_profileなどに追加しないと動かなかった