DOCSEARCHbyAlgolia
Submit Docs

FireCMS Documentation

website·Indexed 34 days ago

https://firecms.co

A React library for building Firebase admin panels and headless CMS. Features include self-hosted and cloud versions, a set of stylable UI components via @firecms/ui, custom entity views, and user management for PRO versions.

Tokens
12.8K
Snippets
56
Records
81
Agent score
65%

What's inside FireCMS

  1. Understand FireCMS telemetry and license check behavior

    Self-hosted FireCMS apps send a POST request to https://api.firecms.co/access_log once per signed-in user each time the app loads (including local development). This request serves as both a telemetry log and the PRO license check. The request includes the user's ID token in the Authorization header, the page URL in the Referer header, and a body containing the apiKey, user email, datasource key, and configured plugins keys. It does not send database credentials, documents, or collection schemas.

  2. Use Material Design icons in FireCMS

    FireCMS utilizes Material Design icons from Google. These icons are provided as independent React components that can be integrated into custom components. Depending on the use case, icons can be implemented either as a React component (e.g., inside a button) or by specifying the icon key.

  3. Request structured markdown content from react-i18next docs

    To ensure you receive structured content from the documentation, append .md to the end of the URL paths (e.g., /readme.md). Alternatively, you can use the Accept: text/markdown HTTP header for content negotiation.

  4. Deploy custom code to FireCMS Cloud

    FireCMS uses module federation to integrate your custom code into the core FireCMS Cloud infrastructure. To deploy, your module must export a FireCMSAppConfig object. Running the deploy command uploads only your custom code, allowing you to maintain customizations while receiving core updates from FireCMS Cloud.
    # Using npm
npm run deploy

# Using yarn
yarn deploy

  5. Implement authentication using FirebaseAuthController

    The AuthController manages user authentication, including signing in, signing out, and retrieving the current user. In a Firebase project, this is implemented using the useFirebaseAuthController hook. It can be integrated with a UserManagement controller to define user roles.
    const authController: FirebaseAuthController = useFirebaseAuthController({
    firebaseApp,
    signInOptions: ["google.com", "password"], // you can pick many more options
    loading: userManagement.loading,
    defineRolesFor: userManagement.defineRolesFor
});

  6. Run FireCMS in development mode

    After creating a project, navigate into the project directory, install the necessary dependencies, and start the development server.
    # Using yarn
cd my-cms
yarn
yarn dev

# Using npm
cd my-cms
npm install
npm run dev

  7. Initialize Firebase in a FireCMS project

    Use the useInitialiseFirebase hook to initialize Firebase using your firebaseConfig (obtained from the Firebase console). This setup is required for all Firebase-related operations within the application.
    const {
    firebaseApp,
    firebaseConfigLoading,
    configError
} = useInitialiseFirebase({
    firebaseConfig
});

  8. Run a FireCMS project locally for development

    FireCMS projects are built on Vite. Running the project locally allows you to test custom code while using the FireCMS backend to store configuration data. If you are using Node.js version < 18.0.0, Vite defaults to http://127.0.0.1:5173; you must add this URL to the authorized domains in the Firebase console for Firebase Auth to work, or use http://localhost:5173 instead.
    # Using npm
npm run dev

# Using yarn
yarn dev

  9. Define reusable property configurations in FireCMS

    FireCMS 3 allows you to define a set of reusable property configurations via the propertyConfigs array. This enables you to define a property's base configuration once and select it across different entities and collections in the collection editor. Each configuration is defined as a PropertyConfig object.
    export type PropertyConfig<T extends CMSType = any> = {
    /** Key used to identify this property config. */
    key: string,

    /** Name of this field type (not the property name). */
    name: string;

    /** 
     * Default config for the property. 
     * Can be a base property, a builder function, or a custom React component Field. 
     */
    property: PropertyOrBuilder<T>;

    /** Optional icon for the field selector (recommended 24x24 component). */
    Icon?: React.ComponentType;

    /** CSS color used in plugins like the field selector (e.g. "#2d7ff9"). */
    color?: string;

    /** Description of this field type. */
    description?: string;
}

  10. Set up PRO User Management for roles and permissions

    FireCMS PRO includes a user management system to define roles and permissions stored in Firestore. You can use useBuildUserManagement to create the system and useUserManagementPlugin to integrate it into the FireCMS component. The system also provides a built-in authenticator that can be passed to useValidateAuthenticator to delegate all authentication logic.
    // 1. Build the user management system
const userManagement = useBuildUserManagement({
    dataSourceDelegate: firestoreDelegate,
});

// 2. Create the plugin for the <FireCMS /> component
const userManagementPlugin = useUserManagementPlugin({ userManagement });

// 3. Use the built-in authenticator for access control
const { authLoading, canAccessMainView, notAllowedError } = useValidateAuthenticator({
    authController,
    disabled: userManagement.loading,
    authenticator: userManagement.authenticator,
    dataSourceDelegate: firestoreDelegate,
    storageSource
});

  11. Install the FireCMS User Management Plugin

    The User Management Plugin provides a role-based access control (RBAC) system for FireCMS, allowing for User CRUD, role definitions, and per-collection permissions stored in Firestore.
    yarn add @firecms/user_management

  12. Request structured content from i18next documentation

    When requesting documentation pages, prefer URLs ending in .md (e.g., /readme.md) to ensure you receive structured content. Alternatively, you can use the Accept: text/markdown HTTP header for content negotiation.