Skip to content

Firebase Setup

Chris Schmitz edited this page May 15, 2019 · 3 revisions

To set up a Firebase backend, either for local development or production, follow these steps:

WARNING: Firebase is currently only supported by the MVP branch.

Create Firebase Database

Go to firebase.google.com and sign up for an account if needed. From your Firebase console click on Add Project. You can use any project name. Once the project has been created, open the project and click Database under the Develop section on the left. On the Database page scroll down to the Realtime Database section and click the button labeled Create Database. If given an option to set the access rules for the database, set it to publicly accessible.

Populate Data

The database structure must match the defined Firebase Structure. An easy way to populate it is to import the test data file (firebase-export.json) from the root of the project (currently only in the MVP branch). To do this, under the Data section for the Realtime Database click the vertical ellipses and select Import JSON from the menu. Once you import the file you'll see all the required data added to your database.

Populate Rules

It's not required to add additional rules as long as the current rules make everything publicly accessible. Additional rules can be added to optimize searches. To do this you can copy the rules from the example rules file (database.rules.json) and paste it into the Rules section for the Realtime Database and click Publish.

Enable Anonymous Users

We currently don't support authenticated users, so unauthenticated users need to be enabled. Go to Firebase and select Authentication from the Develop section on the left. From the Authentication screen select the Sign-in Method tab and click the Anonymous item at the bottom of the Sign-in Providers section. Click the toggle to enable anonymous users, then click the Save button.

Connect to Firebase

To use Firebase from the project you need to add the config values to the ctree-app/ctree-app.html file. In the Firebase project click on Project Overview on the left. Find the text which says "Add an app to get started" and click the web button (</>) or click the "Add app" button then the web button (</>). Where it says "Initialize Firebase" copy the value after var config = . Open the ctree-app.html file and replace the null value for CTree.firebaseConfig with the value you just copied.

Verify

Once you've followed all these steps, refresh the page pointing to the project to verify that the data is coming from Firebase. It's important to note that the MVP branch currently requires a URL pointing directly to an existing cTree. For example, a cTree who's key in Firebase is "test" in your localhost (127.0.0.1:8081) would have the path http://127.0.0.1:8081/test.

Clone this wiki locally