Express で Firebase Cloud Firestore のテスト用環境を作成する

Firebase express-generator をインストールする

node.js npm が必要。

任意のプロジェクトディレクトリに行く。

# nodeバージョン
node -v
v12.6.0

# express-generator のインストール
npm install express-generator -g

# 動作確認
express -h

# カレントディレクトリにプロジェクト作成
express .

# 依存関係をインストール
npm install

# サーバ起動
npm start

npm start は bin/www を実行する。

bin/www で起動するサーバのポートは環境変数の PORT を参照し、
環境変数の PORT が null のときは 3000 を使用する。
使いやすい番号を環境変数の PORT に入れておくと楽。

Firebase SDK を CDN から読み込んで init する

layoutファイルでscriptタグを使用して読み込む。

# bashで実行

cat << 'EOF' >| views/layout.jade
doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
    div#firebaseScripts.
EOF

うまく表示されないので別にして書くが、
div#firebaseScripts. の中で下記の内容を記述している

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script defer src="https://www.gstatic.com/firebasejs/5.11.0/firebase-app.js"></script>

<!-- Add Firebase products that you want to use -->
<!-- 使いたいSDKを選ぶ。とりあえずここでは Authentication と Firestore -->
<script defer src="https://www.gstatic.com/firebasejs/5.11.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/5.11.0/firebase-firestore.js"></script>

<!-- Firebase init scripts -->
<!-- 以降は自分で作る -->
<script defer src="./javascripts/init-firebase.js"></script>

Firebase 初期化のための js ファイルを作成する。

jsファイルの置き場所はpublic配下にある。

# bashで実行
cat << 'EOF' >| public/javascripts/init-firebase.js

// TODO: Replace the following with your app's Firebase project configuration
// 使うSDKによってコンフィグ項目が増えるかも
var firebaseConfig = {
  apiKey: "ダッシュボードのサイドバーの歯車マーク > プロジェクトの設定に遷移して確認",
  projectId: "同上",
  authDomain: "[プロジェクトID].firebaseapp.com",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// お好みでdbインスタンスを作っておく
var db = firebase.firestore();
EOF

ExpressのViewテンプレートエンジンはデフォルトでJadeのようだが、
Jade, Pugともに慣れてくるなかなか良い。
否応なく構造を意識させられるので安心感がある。