--- id: cms_config title: CMS sidebar_label: 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_main_views.md), [custom schema views](custom_schema_views.md), and [custom fields](custom_fields.md) 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](collections.md) and [entity schemas](entity_schemas.md) in their respective documents. Otherwise, you can define your own [custom views](custom_main_views.md). 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. ```tsx 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` ### 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. ```tsx 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](https://github.com/Camberi/firecms/blob/master/example/src/SimpleAppWithProvider.tsx)