firecms/website/docs/cms_config.md

id, title, sidebar_label

id	title	sidebar_label
cms_config	CMS	CMS

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 main custom 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 schema, include it in a collection and include that in a CMS instance.

CMSApp

The entry point for setting up a FireCMS app is the CMSApp, where you can define the following specs:

• name

  Name of the app, displayed as the main title and in the tab title.

• navigation

  Use this prop to specify the views that will be generated in the CMS. You will usually want to create a Navigation object that includes collection views where you specify the path and the schema. Additionally, you can add custom views to the root navigation. In you need to customize the navigation based on the logged user you can use a NavigationBuilder

• logo

  Logo to be displayed in the drawer of the CMS.

• authentication

  Do the users need to log in to access the CMS. You can specify an Authenticator function to discriminate which users can access the CMS or not. If not specified, authentication is enabled but no user restrictions apply.

• signInOptions

  List of sign in options that will be displayed in the login view if authentication is enabled. You can pass google providers strings, such as firebase.auth.GoogleAuthProvider.PROVIDER_ID or full configuration objects such as specified in https://firebase.google.com/docs/auth/web/firebaseui Defaults to Google sign in only.

• allowSkipLogin

  If authentication is enabled, allow the user to access the content without login.

• firebaseConfig

  Firebase configuration of the project. If you afe deploying the app to Firebase hosting, you don't need to specify this value.

• onFirebaseInit

  An optional callback after Firebase has been initialised. Useful for using the local emulator or retrieving the used configuration.

• primaryColor

  Primary color of the theme of the CMS.

• secondaryColor

  Primary color of the theme of the CMS.

• fontFamily

  Font family string. e.g. '"Roboto", "Helvetica", "Arial", sans-serif'.

• toolbarExtraWidget

  A component that gets rendered on the upper side of the main toolbar.

• dateTimeFormat

  Format of the dates in the CMS. Defaults to 'MMMM dd, yyyy, HH:mm:ss'

• locale

  Locale of the CMS, currently only affecting dates

• schemaResolver

  Used to override schemas based on the collection path and entityId. This resolver allows to override the schema for specific entities, or specific collections, app wide. This overrides schemas all through the app. You can also override schemas in place, when using useSideEntityController

Navigation and custom views

You have 2 main ways of creating in FireCMS, either creating entity collections that get mapped to CMS views, or create your own React views.

You can check all the possible configurations for defining collections and entity schemas in their respective documents.

Otherwise, you can define your own custom views.

You can change the navigation based on the logged-in user, by using a NavigationBuilder function which can be asynchronous.

By using an async NavigationBuilder you can also fetch some data in order to build your schemas. Let's say you have a collection called subscriptions and would like to use its ids as the enum values of a string property; you can fetch them and then build the schema with them.

import {
    // ...
    NavigationBuilder,
    NavigationBuilderProps
} from "@camberi/firecms";

// ...

const navigation: NavigationBuilder = async ({ user }: NavigationBuilderProps) => ({
    collections: [
        buildCollection({
            relativePath: "products",
            schema: productSchema,
            name: "Products"
        })
    ]
});

Builder functions

FireCMS provides a set of builder functions that just return the input they receive but are useful for using the features of the type system and validate your schemas and properties at compile time.

• buildNavigation
• buildCollection
• buildSchema
• buildProperties
• buildProperty
• buildProperty
• buildEnumValueConfig

Additionally, if you have defined your models as Typescript types, you can use this function to validate them (only the property names):

• buildSchemaFrom<YOUR_TYPE>

Schema resolver

You may want to override the schema definition for particular entities. In that case you can define a schema resolver in the CMSApp level.

import { buildSchema, SchemaResolver } from "@camberi/firecms";

const customSchemaResolver: SchemaResolver = ({
                                                  entityId,
                                                  collectionPath
                                              }: {
    entityId?: string;
    collectionPath: string;
}) => {

    if (entityId === "B0017TNJWY" && collectionPath === "products") {
        const customProductSchema = buildSchema({
            name: "Custom product",
            properties: {
                name: {
                    title: "Name",
                    description: "This entity is using a schema overridden by a schema resolver",
                    validation: { required: true },
                    dataType: "string"
                }
            }
        });

        return { schema: customProductSchema };
    }
};

More granular control

If you don't want to use FireCMS CMSApp as a full app but would like to integrate some of its components you may want to use the CMSAppProvider and CMSMainView components (used internally) directly.

This will allow you to initialise Firebase on your own and integrate the FireCMS components into your own app. Just place CMSAppProvider on top of the components that need to use the FireCMS hooks.

You can see an example here