FirebaseCMSApp
FireCMS works as a complete app that is in charge of creating the views that you define based on your collections and entity schemas. It handles navigation for you as well as authentication and login.
However, there is a lot of room to customization, including custom top level views, custom schema views, and custom fields for your entity properties, in case the basic use cases we include don't suit your needs.
In the simplest case, you will want to create some properties, include them in an entity collection, include it in a collection and include that in a CMS instance.
FirebaseCMSApp
The entry point for setting up a FireCMS app based on Firebase is the FirebaseCMSApp
.
This component is in charge of building a full FireCMS instance, using Firebase Auth,
Firestore, and Firebase Storage as backend services.
Internally it will create a FireCMS
which holds the main state and
logic of the app, and create the app scaffold and routes.
It is also possible to use FireCMS by using lower level components and including
FireCMS
in your code, even without using Firebase.
More details in the Custom CMSApp section
You can find an example of a basic FirebaseCMSApp
implementation in the
quickstart section
Text search
Firestore does not support native text search, so we need to rely on external
solutions. If you specify a textSearchEnabled
flag to the collection view, you
will see a search bar on top of the collection view.
The solution described here is specific for Firestore, if you are developing your own datasource, you are free to implement text search in whatever way it makes sense.
Find all the available props for FirebaseCMSApp
You need to define a FirestoreTextSearchController
and pass it to your
FirebaseCMSApp
component (or useFirestoreDataSource
if you are building a
custom app). Typically, you will want to index your entities in some external
solution, such as Algolia. For this to work you need to set up an AlgoliaSearch
account and manage the indexing of your documents. There is a full backend
example included in the code, which indexes documents with Cloud Functions.
We provide a utility method for performing searches in Algolia performAlgoliaTextSearch
Example:
import algoliasearch, { SearchClient } from "algoliasearch";
import {
performAlgoliaTextSearch,
FirestoreTextSearchController,
buildCollection,
buildCollection,
FirebaseCMSApp,
NavigationBuilder,
NavigationBuilderProps
} from "@camberi/firecms";
const client: SearchClient | undefined = algoliasearch("YOUR_ALGOLIA_APP_ID", "YOUR_ALGOLIA_SEARCH_KEY");
const productsIndex = client.initIndex("products");
const usersIndex = client.initIndex("users");
const blogIndex = client.initIndex("blog");
const textSearchController: FirestoreTextSearchController =
({ path, searchString }) => {
if (path === "products")
return performAlgoliaTextSearch(productsIndex, searchString);
if (path === "users")
return performAlgoliaTextSearch(usersIndex, searchString);
if (path === "blog")
return performAlgoliaTextSearch(blogIndex, searchString);
return undefined;
};
export default function App() {
const productSchema = buildCollection({
name: "Product",
properties: {
name: {
title: "Name",
validation: { required: true },
dataType: "string"
}
}
});
const navigation: NavigationBuilder = ({ user }: NavigationBuilderProps) => ({
collections: [
buildCollection({
path: "products",
collection: productSchema,
name: "Products"
})
]
});
return <FirebaseCMSApp
name={"My Online Shop"}
navigation={navigation}
textSearchController={textSearchController}
firebaseConfig={firebaseConfig}
/>;
}