GSP1136

Overview

In this lab you will learn the fundamentals of Firebase Cloud Firestore development for the web. If you are new to Firebase development or looking for an overview of how to get started, you are in the right place. Read on to learn about the specifics of this lab and areas that you will get hands-on practice with.

The following lab is based on the Firebase Fundamentals YouTube Series:

Getting started with Cloud Firestore for the web

In this lab learn how to create a basic web application using webpack.

• Installing Firebase
• Creating a Firebase Application
• Using the Firebase Emulator
• Creating a Cloud Firestore Database
• Writing content to the database
• Reading content from the database

Prerequisites

Over the course of this lab the following elements are required:

• Understanding of Webpack
• Understanding of Node.js

Setup and requirements

Before you click the Start Lab button

Read these instructions. Labs are timed and you cannot pause them. The timer, which starts when you click Start Lab, shows how long Google Cloud resources will be made available to you.

This hands-on lab lets you do the lab activities yourself in a real cloud environment, not in a simulation or demo environment. It does so by giving you new, temporary credentials that you use to sign in and access Google Cloud for the duration of the lab.

To complete this lab, you need:

• Access to a standard internet browser (Chrome browser recommended).

Note: Use an Incognito or private browser window to run this lab. This prevents any conflicts between your personal account and the Student account, which may cause extra charges incurred to your personal account.

• Time to complete the lab---remember, once you start, you cannot pause a lab.

Note: If you already have your own personal Google Cloud account or project, do not use it for this lab to avoid extra charges to your account.

How to start your lab and sign in to the Google Cloud console

1. Click the Start Lab button. If you need to pay for the lab, a pop-up opens for you to select your payment method. On the left is the Lab Details panel with the following:

   • The Open Google Cloud console button
   • Time remaining
   • The temporary credentials that you must use for this lab
   • Other information, if needed, to step through this lab

2. Click Open Google Cloud console (or right-click and select Open Link in Incognito Window if you are running the Chrome browser).

   The lab spins up resources, and then opens another tab that shows the Sign in page.

   Tip: Arrange the tabs in separate windows, side-by-side.

   Note: If you see the Choose an account dialog, click Use Another Account.

3. If necessary, copy the Username below and paste it into the Sign in dialog.

   {{{user_0.username | "Username"}}}

   You can also find the Username in the Lab Details panel.

4. Click Next.

5. Copy the Password below and paste it into the Welcome dialog.

   {{{user_0.password | "Password"}}}

   You can also find the Password in the Lab Details panel.

6. Click Next.

   Important: You must use the credentials the lab provides you. Do not use your Google Cloud account credentials. Note: Using your own Google Cloud account for this lab may incur extra charges.

7. Click through the subsequent pages:

   • Accept the terms and conditions.
   • Do not add recovery options or two-factor authentication (because this is a temporary account).
   • Do not sign up for free trials.

After a few moments, the Google Cloud console opens in this tab.

Note: To view a menu with a list of Google Cloud products and services, click the Navigation menu at the top-left.

Task 1. Setting Database Security Rules

Before the database can be used, the security rules need to be configured. In this lab Cloud Firestore will be used in development mode.

Note: To learn more about how to set up Firebase security rules visit Get Started with Cloud Firestore Security Rules

1. Right click on the Cloud Shell link.
2. Select Open link in an incognito window.
3. Use gcloud to set the project configuration:

gcloud config set project {{{ project_0.project_id | "PROJECT_ID" }}}

4. Make a new firebase-project folder:

mkdir firebase-project && cd $_

5. Create a file named firebase.json.

cat << EOF > firebase.json { "firestore": { "rules": "firestore.rules", "indexes": "firestore.indexes.json" } } EOF

6. Create a file named firestore.rules.

cat << EOF > firestore.rules rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if true; } } } EOF

7. Create a file named firestore.indexes.json.

cat << EOF > firestore.indexes.json { "indexes": [], "fieldOverrides": [] } EOF

8. The folder will now contain the following files:

. ├── firebase.json ├── firestore.indexes.json └── firestore.rules

9. Deploy the Firebase database rules for the project:

firebase deploy --only firestore:rules --project {{{ project_0.project_id | "PROJECT_ID" }}} Note: The above command will update the Cloud Firestore security rules. If this is the first Cloud Shell API command, you may be required to authorize the command. Select AUTHORIZE when presented with this option.

10. The Security Rules deploy will be similar to below:

Example Output

=== Deploying to '{{{ project_0.project_id }}}'... i deploying firestore i firestore: reading indexes from firestore.indexes.json... i cloud.firestore: checking firestore.rules for compilation errors... ✔ cloud.firestore: rules file firestore.rules compiled successfully i firestore: uploading rules firestore.rules... ✔ firestore: released rules firestore.rules to cloud.firestore ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/{{{ project_0.project_id }}}/overview

The Firestore database can now be accessed by the application. The default security rules setting does not permit read/write access to the database. Ensure the security rules reflect the desired access, to learn more on this subject visit Get started with Cloud Firestore Security Rules | Firebase.

With the database security rules in place, the next step is to configure the environment. Learn more about it in the next section.

Task 2. Configuring the Firebase Environment

Before you can add Firebase to your JavaScript app, you need to create a Firebase project and register your app with that project. When you register your app with Firebase, you'll get a Firebase configuration object that you'll use to connect your app with your Firebase project resources.

Note: Before installing the Firebase packages ensure the host device has a valid Node.js installation.

Set up the environment ready for the Firebase application.

1. Create a default npm project:

npm init -y

2. Install the Firebase SDK package:

npm i firebase

At this point you will have a folder complete with entries for node_modules and package.json. In addition the firebase configuration files:

File	Description
firebase.json	Provides the configuration for the available Firebase components. In our example, auth and ui elements will be contained within this file together with port information.
.firebaserc	Provides the linked project configuration information.

The Firebase environment has now been successfully initialized. Next, learn how to create a Firebase application.

Task 3. Creating a Firebase Application

The following section creates the elements required to perform Firebase Authentication using an email/password combination on the web.

Firebase Cloud Firestore information can be accessed via the Firebase site.

Service	Import Statement	Description
Firestore	import { getFirestore } from ‘firebase/firestore'	Returns the existing default Firestore instance that is associated with the provided FirebaseApp. If no instance exists, initializes a new instance with default settings.
Firestore	import { initializeFirestore } from ‘firebase/firestore'	Initializes a new instance of Cloud Firestore with the provided settings. Can only be called before any other functions, including getFirestore(). If the custom settings are empty, this function is equivalent to calling getFirestore().
Firestore	import { collection } from ‘firebase/firestore'	Gets a CollectionReference instance that refers to the collection at the specified absolute path..
Firestore	import { doc } from ‘firebase/firestore'	Gets a DocumentReference instance that refers to the document at the specified absolute path.

1. Make a src folder within the firebase-project:

mkdir src

2. Create a src/index.js file with the following content:

import { initializeApp } from 'firebase/app' // Add your web app's Firebase configuration const firebaseConfig = { apiKey: "{{{ project_0.startup_script.apiKey }}}", authDomain: "{{{ project_0.startup_script.authDomain }}}", projectId: "{{{ project_0.project_id }}}", storageBucket: "{{{ project_0.startup_script.storageBucket }}}", messagingSenderId: "{{{ project_0.startup_script.messageSenderId }}}", appId: "{{{ project_0.startup_script.appId }}}", measurementId: "{{{ project_0.startup_script.measurementId }}}" }; // Initialize Firebase const firebaseApp = initializeApp(firebaseConfig); console.log('Hello, Firestore!')

3. Create src/index.html file with the following content:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <h3>Getting started with Firebase Cloud Firestore</h3> </head> <body> <p> I probably won't even put anything in here! So check out the JavaScript console using DevTools. </p> <p id=dbTitle></p> <p id=dbDescription></p> <script src="main.js"></script> </body> </html>

The next step is to enhance the application to support webpack. Configure webpack in the next section to handle the build process for the application.

Task 4. Adding a Webpack configuration

Webpack is a common method of bundling web code and assets.

1. Create a webpack.config.js file:

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: 'development', devtool: 'eval-source-map', entry: path.resolve(__dirname, '/src/index.js'), output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', assetModuleFilename: '[name][ext]', }, watch: false, plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html', filename: 'index.html', inject: false }) ], }

2. Install webpack packages using npm :`

npm install webpack webpack-cli --save-dev

3. Install html-webpack-plugin:

npm install --save-dev html-webpack-plugin

4. Edit the package.json file:

5. Replace the "main": "index.js" entry with the following line in the package.json:

"private": "true",

6. Add a build script to the package.json:

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" },

7. The package.json should now look similar to the following:

Example Output

{ "name": "firebase-project", "version": "1.0.0", "description": "", "private": "true", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "firebase": "^9.19.1" }, "devDependencies": { "webpack": "^5.79.0", "webpack-cli": "^5.0.1" } }

8. Run the build for the application from the command line:

npm run build Note: The build command will generate a webpack dist folder containing the code to access the Firebase Cloud Function application.

9. Serve the dist directory on port 8080:

python3 -m http.server 8080 --directory dist

10. Open the Cloud Shell web preview on port 8080:

Example Output

11. Cancel the Cloud Shell web preview (Press CTRL-C).

At this point the backend Firebase project is being referenced. Proceed to the next section to learn how to write information to the database.

Task 5. Writing to a Firestore Document

Update the Cloud Firestore firestore configuration to write information to the database.

To add content to the linked Firebase project, use the getFirestore call. Update the src/index.js code created earlier to write to the project Firestore database.

1. Edit src/index.js.
2. Add an import statement to src/index.js:

import { getFirestore, doc, setDoc } from 'firebase/firestore'

3. Add a call to getFirestore in src/index.js after the initializeApp call:

const firestore = getFirestore()

4. Add a writeFirestoreDemo function to write to the Cloud Firestore database:

const firestoreIntroDb = doc(firestore, 'firestoreDemo/lab-demo-0001') function writeFirestoreDemo() { const docData = { title: 'Firebase Fundamentals Demo', description: 'Getting started with Cloud Firestore', } setDoc(firestoreIntroDb, docData) } writeFirestoreDemo()

5. The src/index.js file should look similar to below:

Example Output

import { initializeApp } from 'firebase/app' import { getFirestore, doc, setDoc } from 'firebase/firestore' // Add your web app's Firebase configuration const firebaseConfig = { apiKey: "{{{ project_0.startup_script.apiKey }}}", authDomain: "{{{ project_0.startup_script.authDomain }}}", projectId: "{{{ project_0.project_id }}}", storageBucket: "{{{ project_0.startup_script.storageBucket }}}", messagingSenderId: "{{{ project_0.startup_script.messageSenderId }}}", appId: "{{{ project_0.startup_script.appId }}}", measurementId: "{{{ project_0.startup_script.measurementId }}}" }; // Initialize Firebase const firebaseApp = initializeApp(firebaseConfig); const firestore = getFirestore() const firestoreIntroDb = doc(firestore, 'firestoreDemo/lab-demo-0001') function writeFirestoreDemo() { const docData = { title: 'Firebase Fundamentals Demo', description: 'Getting started with Cloud Firestore', } setDoc(firestoreIntroDb, docData) } writeFirestoreDemo() console.log('Hello, Firestore!')

6. Run the build for the application from the command line:

npm run build

7. Serve the dist directory in the browser on port 8080:

python3 -m http.server 8080 --directory dist

8. Open the Cloud Shell web preview on port 8080:
9. In the Cloud console, select the Firestore menu option to view the Firestore data:

Note: It may be necessary to refresh the Firestore page to see the updated database content.

Data is now being written to the Firestore database. The next step is to be able to read information from the database.

Task 6. Reading a Firestore Document

Update the Cloud Firestore firestore configuration to read information from the database.

To access document information from the linked Firebase project, add the getDoc call. Update the src/index.js code created earlier to enable the application to read from the project Firestore database.

1. Edit src/index.js.
2. Update the import statement to include getDoc:

import { getFirestore, doc, setDoc, getDoc } from 'firebase/firestore' const titleControl = document.querySelector('#dbTitle') const descriptionControl = document.querySelector('#dbDescription') titleControl.textContent = '' descriptionControl.textContent = ''

3. Add a function readASingleDocument to read from the Firebase database:

async function readASingleDocument() { const mySnapshot = await getDoc(firestoreIntroDb) if (mySnapshot.exists()) { const docData = mySnapshot.data() const dbJSON = await JSON.stringify(docData) console.log(`Data: ${dbJSON}`) const dbOBJ = await JSON.parse(dbJSON) console.log(`Title: ${dbOBJ.title}`) titleControl.textContent = "Title: " + dbOBJ.title descriptionControl.textContent = "Description: " + dbOBJ.description } } readASingleDocument() Note: Do not forget to comment out the writeFirestoreDemo function. If you are unsure how to do this, take a look at the example solution shown below.

10. The src/index.js file should look similar to below:

Example Output

import { initializeApp } from 'firebase/app' import { getFirestore, doc, setDoc, getDoc } from 'firebase/firestore' const titleControl = document.querySelector('#dbTitle') const descriptionControl = document.querySelector('#dbDescription') // Initialize html elements titleControl.textContent = '' descriptionControl.textContent = '' // Add your web app's Firebase configuration const firebaseConfig = { apiKey: "{{{ project_0.startup_script.apiKey }}}", authDomain: "{{{ project_0.startup_script.authDomain }}}", projectId: "{{{ project_0.project_id }}}", storageBucket: "{{{ project_0.startup_script.storageBucket }}}", messagingSenderId: "{{{ project_0.startup_script.messageSenderId }}}", appId: "{{{ project_0.startup_script.appId }}}", measurementId: "{{{ project_0.startup_script.measurementId }}}" }; // Initialize Firebase const firebaseApp = initializeApp(firebaseConfig); const firestore = getFirestore() const firestoreIntroDb = doc(firestore, 'firestoreDemo/lab-demo-0001') // Write to Firestore Database function writeFirestoreDemo() { const docData = { title: 'Firebase Fundamentals Demo', description: 'Getting started with Cloud Firestore', } setDoc(firestoreIntroDb, docData) } // Read from Firestore Database async function readASingleDocument() { const mySnapshot = await getDoc(firestoreIntroDb) if (mySnapshot.exists()) { const docData = mySnapshot.data() const dbJSON = await JSON.stringify(docData) console.log(`Data: ${dbJSON}`) const dbOBJ = await JSON.parse(dbJSON) console.log(`Title: ${dbOBJ.title}`) titleControl.textContent = "Title: " + dbOBJ.title descriptionControl.textContent = "Description: " + dbOBJ.description } } // writeFirestoreDemo() readASingleDocument() console.log('Hello, Firestore!')

11. Run the build for the application from the command line:

npm run build

12. Serve the dist directory in the browser on port 8080:

python3 -m http.server 8080 --directory dist

13. Open the Cloud Shell web preview on port 8080:

In the application output, the information written to the Firestore database is output using HTML. The title and description fields are shown as defined in the original code.

Feel free to make changes to the code to update the application to include different text using the read and write functions provided.

Congratulations!

In just 30 minutes, you developed a solid understanding of Firebase on the Web and the key features. You learned about installing Firebase Firestore, writing information to the database and reading a document. You are now ready to take more labs.

What's next

• Try out other Google Cloud features for yourself. Have a look at our tutorials.
• Explore more Google Cloud solutions.
• Learn about the Firebase suite of products and services

Finish your quest

This self-paced lab is part of the JavaScript Web Developer - Firebase Fundamentals quest. A quest is a series of related labs that form a learning path. Completing a quest earns you a badge to recognize your achievement. You can make your badge or badges public and link to them in your online resume or social media account. Enroll in any quest that contains this lab and get immediate completion credit.

See the Google Cloud Skills Boost catalog for all available quests.

Take your next lab

Continue your quest with A tour of Firebase, or check out these other Google Cloud Skills Boost labs:

• Getting started with Webpack
• Getting started with Firebase Web
• Getting started with Firebase Email Authentication

Google Cloud training and certification

...helps you make the most of Google Cloud technologies. Our classes include technical skills and best practices to help you get up to speed quickly and continue your learning journey. We offer fundamental to advanced level training, with on-demand, live, and virtual options to suit your busy schedule. Certifications help you validate and prove your skill and expertise in Google Cloud technologies.

Manual Last Updated November 8th, 2023

Lab Last Tested November 8th, 2023

Copyright 2023 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.