Create a Firebase Project

First things first - In order for your Firepress app to be able to interact with Firebase services, you need to first create a Firebase project.

You can read all about Firebase and its features at https://firebase.google.com/

The following documentation is based on the official Firebase documentation (https://firebase.google.com/docs/web/setup), but adjusted where appropriate to work with Firepress.

Before you begin

Step 1: Create a Firebase project

  1. In the Firebase console, click Add project, then select or enter a Project name.

  2. (Optional) If you created a new project, you can edit the Project ID.

    Firebase automatically assigns a unique ID to your Firebase project. Visit Understand Firebase Projects to learn about how Firebase uses the project ID.After Firebase provisions resources for your Firebase project, you cannot change your project ID. To use a specific identifier, you must edit your project ID during this setup step.

  3. Click Continue.

  4. (Optional) Set up Google Analytics for your project.

  5. Click Create project.

Firebase automatically provisions resources for your Firebase project. When the process completes, you'll be taken to the overview page for your Firebase project in the Firebase console.

Step 2: Register your app

After you have a Firebase project, you can add your web app to it.

Visit Understand Firebase Projects to learn more about best practices and considerations for adding apps to a Firebase project.

  1. In the Firebase console's project overview page, click the Web icon (< />) to launch the setup workflow.

    If you've already added an app to your Firebase project, click Add app to display the platform options.

  2. Enter your app's nickname.

    The nickname is an internal, convenience identifier and is only visible to you in the Firebase console.

  3. (Optional) Set up Firebase Hosting for your web app. If you do not set up Hosting now it's not a problem as Firepress will handle this during deployment.

  4. Click Register app.

  5. You can skip through the next few steps as we will handle that in the coming sections.

Step 3: Authentication

In this step we will be enabling Firebase Authentication so that we can later log in as an admin user and create updates.

  1. From the Firebase console's project overview page, go to the Authentication section.

  2. On the Users tab, click the button to Set up a sign-in method.

  3. Enable the Google provider.

Step 4: Cloud Firestore

Firepress CMS uses cloud firestore to manage stored data.

  1. From the Firebase console's project overview page, go to the Cloud Firestore section.

  2. Click the Create Database button.

  3. Select Start in production mode and click Next.

  4. When the database has finshed provisioning, go to the Data tab and click Start Collection.

  5. Add the collection blocks. -- This blocks collection is where all of the Firepress CMS content will be stored.

  6. In order to create a collection the collection must also include a document. Click the Auto-id button to generate a random id, and then click Next. -- This document won't be used and is solely there to enable the creation of the blocks collection.

  7. Next, go to the Rules tab. -- You can read more about Firebase Rules at https://firebase.google.com/docs/rules

  8. If you created your database in production mode, your rules should look like:

    rules_version ='2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if false; } } }

    This currently blocks all read/write updates from outside of privaliged enironments. We are going to update this rule to allow read/write operations from authenticated users with the custom claim of editor. You can read more about custom claims at https://firebase.google.com/docs/auth/admin/custom-claims. Update your rules to be the following:

    rules_version ='2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.auth.token.editor == true; } } }

  9. Click Publish to save you changes.

Last updated