Skip to main content

📓 Setting up a Firebase Project, Firestore Database, and Web App

In this lesson, we will go through the steps to setting up a Firebase account, and setting up project with a web app and Firestore database. In the next lesson, we will integrate our new Firebase project with our Help Queue application.

Step 1: Set Up A Firebase Account​

Firebase is cloud-based so all of our data will be stored in the cloud. We'll start by setting up a Firebase account. Note that in order to set up a Firebase account, you do need to set up a Google account if you don't have one already.

Firebase is free for smaller projects, which gives us the opportunity to explore and integrate projects with Firebase. If we were to build a larger application, however, we'd eventually need to start paying for the service.

Start by navigating to https://firebase.google.com/ in the browser.

Then, click on Get Started. This will take you to a sign in page where you can log into a Google account (or create one if needed).

Step 2: Create a Firebase Project​

Once you've signed into your Google account, you'll be taken to the Firebase console, which is the homepage for all of your Firebase projects. You can always access the Firebase console later by going to https://console.firebase.google.com/. Also, once you are logged into your Google account, there will be a Go to console button on the Firebase homepage that you can click to get back to the console.

In the console, we will have the option to Create a Project. According to the docs, a Firebase project is the top-level entity for Firebase. Within one project we can set up databases and different types of apps. For example, one project could have a web app and an Android app that both share the same Firestore database. In our Firebase project, we will create a web app with a Firestore database.

Click on Create a Project. When we do this, we'll be taken to a page where we can name our project. We'll call our project help-queue, and we'll select the checkbox that confirms that we'll use our project appropriately.

Firebase screen for naming a project

The next step will ask us if we want to use Google Analytics in our project. There's a toggle button Enable Google Analytics for this project that is on. We will click the toggle button to disable Google Analytics, unless you'd like to add it to your own project. It won't affect our project development. If you are planning to build out your project long term, you may want to add this feature.

Clicking continue on the Google Analytics page will prompt Firebase to create your project. Once complete, click continue again to be taken to the homepage of our newly created Help Queue project.

Success message for creating a Firebase project.

There are quite a few options from the Help Queue project homepage, and we'll review those now. As we work through the different links and locations, reference the image below.

  • The first thing to note is that we can navigate back to the Firebase console homepage by clicking the drop-down menu called help-queue at the top of the page (circled in black), and selecting the option see all projects.
  • Next, there's a link to the Firebase docs (circled in black) at the far right of the screen.
  • In the vertical menu to the left of the screen, there's options to set up different Firebase products. The Build tab is highlighted by a green rectangle, and it will have the options for Firestore Database and Authentication, which we'll set up later.
  • Anytime we navigate away from our Help Queue's homepage, we can always get back to it by clicking on the Project Overview button (circled in green).
  • Now, notice the cog symbol to the right of the Project Overview button (circled in red). This is where we'll find our project settings. We'll revisit our project settings as needed to get information about our project's configuration.
  • In the middle of the homepage we'll see the message "Get started by adding Firebase to your app". This area gives us options to configure our firebase to connect to a web app, an Android app, or an iOS app. This is something we'll do later in this lesson. The </> icon with the black circle represents web apps.

The Help Queue project homepage on Firebase, and the various navigation options.

Step 3: Set Up Firestore​

Next, we will set up our Firestore database. For more information on Firestore, check the Firebase docs on Firestore. We will be covering Firestore in more depth in future lessons.

One the homepage of our Help Queue project, click on the Build tab in the left-hand menu, and then select Firestore Database:

Click on "Firestore Database" in the "Build" drop-down menu.

You'll be taken to the following page:

This image shows the screen for adding Firebase to an application. The button for adding Firebase to a web application is circled.

Click on the Create database button.

A popup will appear:

Click on _Start in Test Mode_.

Within this popup, do the following:

  • Select Start in Test Mode, and then click Next.
  • On the next page, leave the default form values and click Enable to proceed.
  • Then, wait as Firebase creates the database.

When the Firestore database is created, we'll be taken to the Firestore database homepage.

Step 4: Add Firebase to Our Web App​

Next, we need to add Firebase to our Help Queue application. First, head back to the Help Queue homepage by clicking the Project Overview button at the top-left of the page.

Then, click on the </> icon from underneath the message "Get started by adding Firebase to your app". In the image below, this icon is circled in black.

This image shows the screen for adding Firebase to an application. The icon for adding Firebase to a web application is circled.

When we click on the </> button, we'll be taken to a page that reads Add Firebase to your web app.

This image shows the screen for giving our Firebase project a nickname.

We'll need to enter an app nickname. We'll call ours help-queue-web. The nickname we choose should be something that we can differentiate from other apps that we add to our Help Queue Firebase project. We don't have other apps right now, but this could be a mobile app, or yet another web app.

We also have an option to set up Firebase hosting. This is a nice thing about Firebase — we can also use it to easily deploy our application! We'll be able to set that up later so we won't do it right now. Go ahead and click on the Register app button.

Finally, we'll be given a script that we will include in our source code to configure and initialize firebase in our application. We're not ready to use this script just yet (we will in the next lesson), but we also don't need to worry about copying down this information. We can access it later via our Help Queue project settings.

Click on Continue to console, which will take us back to the Help Queue project homepage.

Anytime we need to access the firebase configuration script, we can do so by clicking on the gear icon to the right of Project Overview in the upper-left corner of the screen. Then, click on Project settings, which will take you to a page which includes the script (make sure to scroll down on that page). See the image below for the location of Project settings:

You can access _Project settings_ in the upper left-hand corner of the Firebase console.

At this point, we've finished all the steps for setting up our Firebase project. In the next lesson, we'll integrate Firebase with our Help Queue application.

Before we move on, let's briefly talk about the read/write rules for our Firestore database.

Adjusting Firestore Read/Write Rules​

Let's revisit our database by clicking on the Firestore Database, from the Build drop-down menu. We'll see a UI for our database. Here, we'll be able to see our data once we wire up our database to our Help Queue application and start creating tickets.

We can update our database's read/write rules by clicking the Rules tab as pictured in the image below:

Image shows tabs for database. The rules tab is circled.

These are the current rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if
        request.time < timestamp.date(2021, 11, 19);
    }
  }
}

The timestamp.date will contain a different date than in the example above. That's because the default rules are configured to expire after 30 days from the time that we initialize our Firestore database. In this example, the database was created on October 20th, 2021. Up until November 19th, 2021, anyone on the internet can view, edit, and delete all data in our Firestore database. After that date, all requests will be denied.

These are great rules for getting started with Firestore, but we will need to reconfigure them before the 30 days have ended.

We could update our rules to the following:

// Note that these rules are not secure and should NEVER be used in production!
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

However, this would be insecure. We would be updating access so that anyone can modify our database. What's more, there's no expiration for this rule. This is something we should never do in production.

For development purposes allowing all access may not be as big of a deal — as long as you don't share your database URL. Ultimately, it depends on the security practices of your team and the organization you are working for.

However, if you end up deploying your Firebase project, you'll want to write rules that protect your data. Here are two great resources to help you learn how to protect your data: