docs(examples): update firebase example to use .env

Author: kaciakmaciak

examples/firebase/.env

@@ -0,0 +1,14 @@
+## ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+# Firebase Config.
+#
+# 1. Create firestore database.
+# 2. Set the `firebaseConfig` variable.
+#
+# @see https://firebase.google.com/docs/firestore/quickstart#create
+## ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+VITE_FIREBASE_API_KEY=
+VITE_FIREBASE_AUTH_DOMAIN=
+VITE_FIREBASE_PROJECT_ID=
+VITE_FIREBASE_STORAGE_BUCKET=
+VITE_FIREBASE_MESSAGING_SENDER_ID=
+VITE_FIREBASE_APP_ID=

examples/firebase/README.md

@@ -1,6 +1,24 @@
 # Example
 
-```
-npm install --ignore-scripts
-npm run dev
-```
+1. Create firestore database as per [docs](https://firebase.google.com/docs/firestore/quickstart#create).
+1. Set environment variables:
+
+ ```sh
+ # Copy the template .env file to local .env file
+ cp .env .env.local
+ # Edit .env.local with firebase config.
+ ```
+
+1. Install dependencies (ideally in project root):
+
+ ```sh
+ npm install
+ ```
+
+ > If you are running the command directly in the `examples/firebase` directory, use ` --ignore-scripts`.
+
+1. Run local dev server:
+
+ ```sh
+ npm run dev
+ ```

examples/firebase/package.json

@@ -1,6 +1,9 @@
 {
  "name": "react-query-subscription-firebase-example",
  "private": true,
+ "engines": {
+ "npm": ">=8"
+ },
  "version": "0.0.0",
  "scripts": {
  "dev": "vite",

examples/firebase/src/firebase.ts

@@ -11,10 +11,15 @@ import { getFirestore } from 'firebase/firestore';
  * @see https://firebase.google.com/docs/firestore/quickstart#create
  */
 const firebaseConfig = {
- // add config here
+ apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+ authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+ projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+ storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+ messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+ appId: import.meta.env.VITE_FIREBASE_APP_ID,
 };
-if (Object.keys(firebaseConfig).length === 0) {
- throw new Error('Configure firebase in `src/firebase.ts`');
+if (Object.values(firebaseConfig).filter(Boolean).length === 0) {
+ throw new Error('Configure env variables in .env.local`');
 }
 
 export const firebaseApp = initializeApp(firebaseConfig);