Firebase：codelab

以下サイトの実施メモ
https://firebase.google.com/codelabs/firebase-web

6. Import and configure Firebase

6. Firebaseをインポートして設定する

Install the Firebase SDK and start your Webpack build
(Firebase SDKをインストールして、Webpackビルドを開始します)

4. Run npm run start to start up Webpack. ...
(実行npm run start WebPACKのを起動します...) の部分

実行が以下で止まってしまう

asset firebase-messaging-sw.js 1.74 KiB [emitted] (name: main)
./src/firebase-messaging-sw.js 55 bytes [built] [code generated]
webpack 5.64.4 compiled successfully in 209 ms    
  

"compiled successfully" となっているので成功なんだろう
[CTRL]+[C]で対応した。

7. Set up user sign-in

Test signing in to the app

"firebase serve --only hosting" コマンドを実行し "localhost:5000" へ接続するが、
画面上の"SIGN-IN WITH GOOGLE" をクリックしても何も反応しない

ブラウザ[F12]キーで開発ツールを起動、コンソールを除いてみるとエラーが出ていた。

firebase-config.js?dfdd:15 
    
Uncaught Error: No Firebase configuration object provided.
Add your web app's configuration object to firebase-config.js
 at getFirebaseConfig (firebase-config.js?dfdd:15)
 at eval (index.js?b635:345)
 at Object../src/index.js (main.js:183)
 at __webpack_require__ (main.js:273)
 at main.js:314
 at main.js:316    
  

どうやら src/firebase-config.js に追加した config配列が読めていないらしい。

"npm run start" を実行してから "firebase serve --only hosting" を実行したらエラーは無くなり動作するようになった。

---

Firebase

Firebase #1：初期設定

npm install -g firebase-tools

PS C:\xampp\htdocs\vueapps> npm install -g firebase-tools
  npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
  npm WARN deprecated har-validator@5.1.5: this library is no longer supported
  C:\Users\user\AppData\Roaming\npm\firebase -> C:\Users\user\AppData\Roaming\npm\node_modules\firebase-tools\lib\bin\firebase.js

  > re2@1.16.0 install C:\Users\user\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\r> install-from-cache --artifact build/Release/re2.node --host-var RE2_DOWNLOAD_MIRROR || npm run 
  rebuild

  Trying https://github.com/uhop/node-re2/releases/download/1.16.0/win32-x64-83.br ...
  Writing to build/Release/re2.node ...
  Done.

  > protobufjs@6.11.2 postinstall C:\Users\user\AppData\Roaming\npm\node_modules\firebase-tools\node_modules\protobufjs
  > node scripts/postinstall

  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\firebase-tools\node_modules\chokidar\node_modules\fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

  + firebase-tools@9.12.1
  added 689 packages from 422 contributors in 75.271s

firebase login

PS C:\xampp\htdocs\vueapps> firebase login i Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you. ? Allow Firebase to collect CLI usage and error reporting information? Yes i To change your data collection preference at any time, run `firebase logout` and log in again. Visit this URL on this device to log in: https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=10628102&redirect_uri=http%3A%2F%2Flocalhost%3A9005 Waiting for authentication... + Success! Logged in as xxxx@gmail.com ブラウザでログイン画面が開くのでログイン
成功したっぽい。

---

Firebase