Getting Started with Firebase Cloud Firestore
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).
- Time to complete the lab---remember, once you start, you cannot pause a lab.
How to start your lab and sign in to the Google Cloud console
-
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
-
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. -
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.
-
Click Next.
-
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.
-
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. -
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.
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.
- Right click on the Cloud Shell link.
- Select Open link in an incognito window.
- Use gcloud to set the project configuration:
- Make a new firebase-project folder:
- Create a file named firebase.json.
- Create a file named firestore.rules.
- Create a file named firestore.indexes.json.
- The folder will now contain the following files:
- Deploy the Firebase database rules for the project:
- The Security Rules deploy will be similar to below:
Example Output
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.
Set up the environment ready for the Firebase application.
- Create a default npm project:
- Install the Firebase SDK package:
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. |
- Make a src folder within the firebase-project:
- Create a src/index.js file with the following content:
- Create src/index.html file with the following content:
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.
- Create a webpack.config.js file:
- Install webpack packages using
npm
:`
- Install html-webpack-plugin:
-
Edit the package.json file:
-
Replace the "main": "index.js" entry with the following line in the package.json:
- Add a build script to the package.json:
- The package.json should now look similar to the following:
Example Output
- Run the build for the application from the command line:
- Serve the dist directory on port 8080:
- Open the Cloud Shell web preview on port 8080:
Example Output
- 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.
- Edit src/index.js.
- Add an import statement to src/index.js:
- Add a call to getFirestore in src/index.js after the initializeApp call:
- Add a writeFirestoreDemo function to write to the Cloud Firestore database:
- The src/index.js file should look similar to below:
Example Output
- Run the build for the application from the command line:
- Serve the dist directory in the browser on port 8080:
- Open the Cloud Shell web preview on port 8080:
- In the Cloud console, select the Firestore menu option to view the Firestore data:
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.
- Edit src/index.js.
- Update the import statement to include
getDoc
:
- Add a function readASingleDocument to read from the Firebase database:
- The src/index.js file should look similar to below:
Example Output
- Run the build for the application from the command line:
- Serve the dist directory in the browser on port 8080:
- 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.