This is a study note of the Firebase Hosting and Cloud Firestore development. It is based on the Firebase Hosting docs and Cloud Firestore docs.
Firebase Hosting
Firebase hosting allows you to serve both static content and dynamic contents supported by Cloud Functions or Clour Run.
Setup
Run firebase init
to configure application hosting. The configuration specifies a Firebase project.
All hosting configurations are defined in firebase.json
file in the project root. You can specify the public root directory that includes all HTML, CSS and JavaScript files. The default is public\
folder in the project root. Additionally, you can custom error pages, redirects, rewrites, and headers.
The default configuratioin is as the following:
|
|
Reserved URLs
Firebase Hosting reserves URLs in your site beginning with /__
. These reserved URLs are available both when you deploy to Firebase (firebase deploy
) or when you run your app on a local server (firebase serve
).
The reserved URL has a format /__/firebase/js-sdk-version/firebase-sdk-name.js
. For better performance, only load libraries used in applicaiton.
The reserved namespace also provides the configuration neccessary to intialize the hosted application. The configuration and SDK initialization should be loaded after SDKs.
As a result, a sample list of scripts that uses authentication and firestore is as the following:
|
|
Cloud Firestore
Firestore is a cloud document-oriented database that can sync across client apps through realtime listeners and offers offline support. It provides a rich hierachical data model and expressive querying.
Get Started
The first step is to create a Firebase database. For testing puporse, choose Test mode
and select a local close to the users of your application.
|
|
Data Model
Firebase is a document-oriented database. Data is stored in documents. Each document contains a set of key-value pairs – just like a JavaScrit object or a JSON record.
All documents must be stored in collections. A document can contain subcollections and nested documents, ooops, so good! However, a collection cannot contain subcollection or raw data.
The identifiers of documents within a collection are unique. You can provide an identifier or Firestore can create a random name automatically. Simply assign data to a document within a collection. If either the collection or document doesn’t exist, Firestore creates it.
To access a doc, there are two ways:
db.collection('collection-name').doc('doc-id')
db.doc('collection-name/doc-id')
Access Data
There are common ways to add data.
- The
set
method:db.doc('collection-name/doc-id').set(obj)
- The
add
method:db.collection('collection-name').add(obj)
. Firebase create the doc identifier automatically.
To update data, use docRef.update(obj)
method.
Use docRef.delete()
to delete a doc.
Use docRef.get()
to retrieve a doc. Check doc.exists
before use the doc.data
.
To query documents with a condition, use where()
method, the result is a iterable querySnapshot
. Without where()
, all documents are returned. The query supports many composable operations.
To listen for realtime updates, use docRef.onSnapshot
method. You can listen to multiple documents.
The API doc has detail information.