Merge pull request #22 from firebase/jsUpdates

localhost -> 127.0.0.1 and updated firebase version to 9.* to match quickstart-js.

codelab-final-state/functions/package.json

@@ -22,7 +22,7 @@
     "@firebase/rules-unit-testing": "^1.2.3",
     "eslint": "^5.12.0",
     "eslint-plugin-promise": "^4.0.1",
-    "firebase": "^8.2.10",
+    "firebase": "^9.14.0",
     "firebase-functions-test": "^0.2.3",
     "mocha": "^6.1.4"
   },

codelab-final-state/functions/test.js

@@ -39,8 +39,8 @@ const bobAuth = {
 
 before(async () => {
   // Discover which emulators are running and where by using the Emulator Hub
-  // This assumes the hub is running at localhost:4400 (the default), you can check
-  // by looking for the "Emulator Hub running at localhost:<port>" line in the
+  // This assumes the hub is running at 127.0.0.1:4400 (the default), you can check
+  // by looking for the "Emulator Hub running at 127.0.0.1:<port>" line in the
   // logs from firebase emulators:start
   const emulatorSettings = await firebase.discoverEmulators();
   firebase.useEmulators(emulatorSettings);

codelab-final-state/public/index.html

@@ -33,9 +33,9 @@
     />
     <link rel="stylesheet" href="index.css" />
 
-    <script src="/__/firebase/8.2.10/firebase-app.js"></script>
-    <script src="/__/firebase/8.2.10/firebase-auth.js"></script>
-    <script src="/__/firebase/8.2.10/firebase-firestore.js"></script>
+    <script src="/__/firebase/9.14.0/firebase-app-compat.js"></script>
+    <script src="/__/firebase/9.14.0/firebase-auth-compat.js"></script>
+    <script src="/__/firebase/9.14.0/firebase-firestore-compat.js"></script>
     <script src="/__/firebase/init.js"></script>
 
     <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

codelab-final-state/public/js/homepage.js

@@ -28,10 +28,10 @@ export async function onDocumentReady(firebaseApp) {
   const auth = firebaseApp.auth();
   const db = firebaseApp.firestore();
 
-  if (location.hostname === "localhost") {
-    console.log("localhost detected!");
-    auth.useEmulator("http://localhost:9099");
-    db.useEmulator("localhost", 8080);
+  if (location.hostname === "127.0.0.1") {
+    console.log("127.0.0.1 detected!");
+    auth.useEmulator("http://127.0.0.1:9099");
+    db.useEmulator("127.0.0.1", 8080);
   }
 
   const homePage = new HomePage(db, auth);

codelab-initial-state/functions/package.json

@@ -22,7 +22,7 @@
     "@firebase/rules-unit-testing": "^1.2.3",
     "eslint": "^5.12.0",
     "eslint-plugin-promise": "^4.0.1",
-    "firebase": "^8.2.10",
+    "firebase": "^9.14.0",
     "firebase-functions-test": "^0.2.3",
     "mocha": "^6.1.4"
   },

codelab-initial-state/functions/test.js

@@ -39,8 +39,8 @@ const bobAuth = {
 
 before(async () => {
   // Discover which emulators are running and where by using the Emulator Hub
-  // This assumes the hub is running at localhost:4400 (the default), you can check
-  // by looking for the "Emulator Hub running at localhost:<port>" line in the
+  // This assumes the hub is running at 127.0.0.1:4400 (the default), you can check
+  // by looking for the "Emulator Hub running at 127.0.0.1:<port>" line in the
   // logs from firebase emulators:start
   const emulatorSettings = await firebase.discoverEmulators();
   firebase.useEmulators(emulatorSettings);

codelab-initial-state/public/index.html

@@ -33,9 +33,9 @@
     />
     <link rel="stylesheet" href="index.css" />
 
-    <script src="/__/firebase/8.2.10/firebase-app.js"></script>
-    <script src="/__/firebase/8.2.10/firebase-auth.js"></script>
-    <script src="/__/firebase/8.2.10/firebase-firestore.js"></script>
+    <script src="/__/firebase/9.14.0/firebase-app-compat.js"></script>
+    <script src="/__/firebase/9.14.0/firebase-auth-compat.js"></script>
+    <script src="/__/firebase/9.14.0/firebase-firestore-compat.js"></script>
     <script src="/__/firebase/init.js"></script>
 
     <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

scripts/README.md

@@ -31,7 +31,7 @@ $ npm run devserver
 > [email protected] devserver /.../emulators-codelab/scripts
 > node devserver.js
 
-Serving content from /.../emulators-codelab/steps/firebase-emulator at http://localhost:3000
+Serving content from /.../emulators-codelab/steps/firebase-emulator at http://127.0.0.1:3000
 Detected file change (/.../emulators-codelab/steps/index.lab.md), recompiling...
 ```
 

scripts/devserver.js

@@ -14,7 +14,7 @@ function main() {
   const app = express();
   app.use(express.static(DST_PATH));
 
-  console.log(`Serving content from ${DST_PATH} at http://localhost:${PORT}`);
+  console.log(`Serving content from ${DST_PATH} at http://127.0.0.1:${PORT}`);
 
   chokidar.watch(LAB_PATH).on("all", (event, path) => {
     console.log(`Detected file change (${path}), recompiling...`);

steps/index.lab.md

@@ -132,28 +132,28 @@ i  emulators: Starting emulators: auth, functions, firestore, hosting
 i  firestore: Importing data from /Users/samstern/Projects/emulators-codelab/codelab-initial-state/seed/firestore_export/firestore_export.overall_export_metadata
 i  firestore: Firestore Emulator logging to firestore-debug.log
 i  hosting: Serving hosting files from: public
-✔  hosting: Local server: http://localhost:5000
+✔  hosting: Local server: http://127.0.0.1:5000
 i  ui: Emulator UI logging to ui-debug.log
 i  functions: Watching "/Users/samstern/Projects/emulators-codelab/codelab-initial-state/functions" for Cloud Functions...
 ✔  functions[calculateCart]: firestore function initialized.
 
 ┌─────────────────────────────────────────────────────────────┐
 │ ✔  All emulators ready! It is now safe to connect your app. │
-│ i  View Emulator UI at http://localhost:4000                │
+│ i  View Emulator UI at http://127.0.0.1:4000                │
 └─────────────────────────────────────────────────────────────┘
 
 ┌────────────────┬────────────────┬─────────────────────────────────┐
 │ Emulator       │ Host:Port      │ View in Emulator UI             │
 ├────────────────┼────────────────┼─────────────────────────────────┤
-│ Authentication │ localhost:9099 │ http://localhost:4000/auth      │
+│ Authentication │ 127.0.0.1:9099 │ http://127.0.0.1:4000/auth      │
 ├────────────────┼────────────────┼─────────────────────────────────┤
-│ Functions      │ localhost:5001 │ http://localhost:4000/functions │
+│ Functions      │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
 ├────────────────┼────────────────┼─────────────────────────────────┤
-│ Firestore      │ localhost:8080 │ http://localhost:4000/firestore │
+│ Firestore      │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
 ├────────────────┼────────────────┼─────────────────────────────────┤
-│ Hosting        │ localhost:5000 │ n/a                             │
+│ Hosting        │ 127.0.0.1:5000 │ n/a                             │
 └────────────────┴────────────────┴─────────────────────────────────┘
-  Emulator Hub running at localhost:4400
+  Emulator Hub running at 127.0.0.1:4400
   Other reserved ports: 4500
 
 Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
@@ -165,7 +165,7 @@ Once you see the **All emulators started** message, the app is ready to use.
 > 
 > **Aside: What just happened?**
 > 
-> * Each emulator started up on localhost, each one is running on a different port.
+> * Each emulator started up on 127.0.0.1, each one is running on a different port.
 > * The Firestore emulator imported data from the `seed` directory, which is provided to make this codelab simpler.
 > * The Functions emulator noticed the `calculateCart` function and notified the Firestore emulator.
 > * The Functions emulator is now watching the `functions` directory for code changes.
@@ -178,13 +178,13 @@ Based on the table in the logs we can see that the the Cloud Firestore emulator
 ┌────────────────┬────────────────┬─────────────────────────────────┐
 │ Emulator       │ Host:Port      │ View in Emulator UI             │
 ├────────────────┼────────────────┼─────────────────────────────────┤
-│ Authentication │ localhost:9099 │ http://localhost:4000/auth      │
+│ Authentication │ 127.0.0.1:9099 │ http://127.0.0.1:4000/auth      │
 ├────────────────┼────────────────┼─────────────────────────────────┤
-│ Functions      │ localhost:5001 │ http://localhost:4000/functions │
+│ Functions      │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
 ├────────────────┼────────────────┼─────────────────────────────────┤
-│ Firestore      │ localhost:8080 │ http://localhost:4000/firestore │
+│ Firestore      │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
 ├────────────────┼────────────────┼─────────────────────────────────┤
-│ Hosting        │ localhost:5000 │ n/a                             │
+│ Hosting        │ 127.0.0.1:5000 │ n/a                             │
 └────────────────┴────────────────┴─────────────────────────────────┘
 ```
 
@@ -206,18 +206,18 @@ Let's update the `db` and `auth` objects to point to the local emulators:
   const db = firebaseApp.firestore();
 
   // ADD THESE LINES
-  if (location.hostname === "localhost") {
-    console.log("localhost detected!");
-    auth.useEmulator("http://localhost:9099");
-    db.useEmulator("localhost", 8080);
+  if (location.hostname === "127.0.0.1") {
+    console.log("127.0.0.1 detected!");
+    auth.useEmulator("http://127.0.0.1:9099");
+    db.useEmulator("127.0.0.1", 8080);
   }
 ```
 
-Now when the app is running on localhost (served by the Hosting emulator) the Firestore client also points at the local emulator rather than at a production database.
+Now when the app is running on your local machine (served by the Hosting emulator) the Firestore client also points at the local emulator rather than at a production database.
 
 #### **Open the EmulatorUI**
 
-In your web browser, navigate to  [http://localhost:4000/](http://localhost:4000/). You should see the Emulator Suite UI.
+In your web browser, navigate to  [http://127.0.0.1:4000/](http://127.0.0.1:4000/). You should see the Emulator Suite UI.
 
 <img src="img/emulator-ui-home.png" alt="Emulators UI home screen" />
 
@@ -232,7 +232,7 @@ Duration: 02:00
 
 #### **Open the app**
 
-In your web browser, navigate to  [http://localhost:5000](http://localhost:5000) and you should see The Fire Store running locally on your machine!
+In your web browser, navigate to  [http://127.0.0.1:5000](http://127.0.0.1:5000) and you should see The Fire Store running locally on your machine!
 
 <img src="img/939f87946bac2ee4.png" alt="939f87946bac2ee4.png"  width="624.00" />
 
@@ -657,7 +657,7 @@ Right now, although cart owners read and write to their cart, they can't read or
 
 This is a broken state for users. 
 
-Return to the web UI, which is running on `http://localhost:5000,` and try to add something to your cart. You get a `Permission Denied` error, visible from the debug console, because we haven't yet granted users access to created documents in the *`items`* subcollection.
+Return to the web UI, which is running on `http://127.0.0.1:5000,` and try to add something to your cart. You get a `Permission Denied` error, visible from the debug console, because we haven't yet granted users access to created documents in the *`items`* subcollection.
 
 
 ## Allow cart items access
@@ -755,7 +755,7 @@ Nice! Now all of our tests pass. We have one pending test, but we'll get to that
 Duration: 02:00
 
 
-Return to the web front end ( [http://localhost:5000](http://localhost:5000)) and add an item to the cart. This is an important step to confirm that our tests and rules match the functionality required by the client. (Remember that the last time we tried out the UI users were unable to add items to their cart!)
+Return to the web front end ( [http://127.0.0.1:5000](http://127.0.0.1:5000)) and add an item to the cart. This is an important step to confirm that our tests and rules match the functionality required by the client. (Remember that the last time we tried out the UI users were unable to add items to their cart!)
 
 <img src="img/69ad26cee520bf24.png" alt="69ad26cee520bf24.png"  width="624.00" />
 
@@ -1169,7 +1169,7 @@ Good job!
 Duration: 03:00
 
 
-For the final test, return to the web app ( [http://localhost:5000/](http://localhost:5000/)) and add an item to the cart. 
+For the final test, return to the web app ( [http://127.0.0.1:5000/](http://127.0.0.1:5000/)) and add an item to the cart. 
 
 <img src="img/69ad26cee520bf24.png" alt="69ad26cee520bf24.png"  width="624.00" />