Todoアプリをfirebaseで。

 firebaseを使った公開までの流れと、開発する際の設定について、忘備録も兼ねて残しておきたいと思います。

Vueアプリ作成

vue create todo-app

でアプリを作成。

次に、VScodeで開いて、

npm install firebase

でfirebaseのライブラリをインストールする。

Firebase を JavaScript プロジェクトに追加する  |  Firebase Documentation

npm run serve 

アプリを立ち上げられるか確認する。

ブラウザでのfirebaseの設定

firebase consoleを開き、プロジェクトを追加をクリックして、プロジェクトを作成する。

アプリ名vue-todoで、アナリティクスはなしで設定。

次に、Cloud firestoreを作成する。

テストモード、asia-northeast1で設定。

Firebaseのプロジェクトを作り直すことになったたった一つの設定項目 - Qiita

次に、アプリの登録をする。

紐付けの作業

var firebaseConfig = {
 apiKey: "---",
 authDomain:  "---",
 projectId: "---",
 storageBucket:  "---",
 messagingSenderId: "---",
 appId:  "---"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

でmain.jsへ。

そのままコピペでもできるんだろうけど、const→varにしたりfirebase.initializeAppにしたりが必要。（ここはまた学習必要）

あとは、App.vueをカスタム。ここについてはゆっくりまとめたいので、別記事に書きます、、、

firebaseをターミナルで設定

firebase login

firebase init

publicディレクトリではなく、distディレクトリで設定。

デプロイまでの準備

yarnでのやり方がたくさん載っていますが、npmでも可能。

npm run build

firebase deploy

でURLが出れば完了。