Migrating from previous beta versions

FireCMS PRO

If you are migrating from previous beta versions of FireCMS PRO, you will need to make some updates to your project. The main components have changed theis composition. Instead of having a single Scaffold components with all the configuration, you have additionally an AppBar and a Drawer component.

More information about the main components can be found in the Main Components section.

User management auth controller

For self-hosted versions, there has been a change in the API for the data management controllers. The authController is now passed to the User Management controller, instead of the other way around. The userManagementController can be used as an auth controller, but with all the added logic for user management.

❌ Code before:

    /**
     * Controller in charge of user management
     */
    const userManagement = useBuildUserManagement({
        dataSourceDelegate: firestoreDelegate
    });

    /**
     * Controller for managing authentication
     */
    const authController: FirebaseAuthController = useFirebaseAuthController({
        firebaseApp,
        signInOptions,
        loading: userManagement.loading,
        defineRolesFor: userManagement.defineRolesFor
    });

✅ Code after:

    /**
     * Controller for managing authentication
     */
    const authController: FirebaseAuthController = useFirebaseAuthController({
        firebaseApp,
        signInOptions
    });

    /**
     * Controller in charge of user management
     */
    const userManagement = useBuildUserManagement({
        dataSourceDelegate: firestoreDelegate,
        authController
    });

The userManagement controller now also qualifies as an authController, so you can use it as such, but it is not necessary to do so.

Styling

You also will need to import the default FireCMS styles in your project. You can do this by adding the following import to your index.css file:

@import "@firecms/ui/index.css";

Your index.css file should look like this:

@import "@firecms/ui/index.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --fcms-primary: #0070F4;
    --fcms-primary-bg: #0061e610;
    --fcms-secondary: #FF5B79;
}

Dependencies

The default fonts are now imported in the clients project (so they can be replaced if needed). You need to add these imports:

    "typeface-rubik": "^1.1.13",
    "@fontsource/jetbrains-mono": "^5.0.20",

FireCMS Cloud

If you are migrating from previous beta versions of FireCMS Cloud, you will need to make some updates to your project.

Dependencies

The main package has been renamed from firecms to @firecms/cloud since version 3.0.0-beta.4. You can also remove the @firecms/cli package, as it is implicitly installed by @firecms/cloud.

This is a sample package.json with the new config:

{
  "name": "my-firecms-project",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port 5001",
    "build": "vite build",
    "serve": "vite preview --port 5001",
    "deploy": "run-s build && firecms deploy --project=YOUR_PROJECT_ID"
  },
  "dependencies": {
    "@firecms/cloud": "^3.0.0-beta",
    "firebase": "^10.12.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@originjs/vite-plugin-federation": "^1.3.5",
    "@tailwindcss/typography": "^0.5.10",
    "@types/react": "^18.2.71",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.4.3",
    "vite": "^5.2.6"
  }
}

Imports

You need to update your imports to use the new package name. For example, if you have a file that imports firecms:

import { FireCMS } from "firecms";

You need to update it to use the new package name:

import { FireCMS } from "@firecms/cloud";

Vite configuration

You also need to update your vite.config.js file to include the new package name and config:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import federation from "@originjs/vite-plugin-federation"

// https://vitejs.dev/config/
export default defineConfig({
    esbuild: {
        logOverride: { "this-is-undefined-in-esm": "silent" }
    },
    plugins: [
        react(),
        federation({
            name: "remote_app",
            filename: "remoteEntry.js",
            exposes: {
                "./config": "./src/index"
            },
            shared: [
                "react",
                "react-dom",
                "@firecms/cloud",
                "@firecms/core",
                "@firecms/firebase",
                "@firecms/ui",
                "@firebase/firestore",
                "@firebase/app",
                "@firebase/functions",
                "@firebase/auth",
                "@firebase/storage",
                "@firebase/analytics",
                "@firebase/remote-config",
                "@firebase/app-check"
            ]
        })
    ],
    build: {
        modulePreload: false,
        target: "ESNEXT",
        cssCodeSplit: false,
    }
})

Tailwind CSS

• You need to add the tailwind typography plugin to your project. You can do this by installing the @tailwindcss/typography package:

  yarn add -D @tailwindcss/typography

• You should also make sure you are using at least version 3.4.3 of the tailwindcss package, and postcss version 8.4.38.

• The preset now comes from the @firecms/ui package. You can update your tailwind.config.cjs file to include the new preset:

  import fireCMSConfig from "@firecms/ui/tailwind.config.js";
  
  export default {
      presets: [fireCMSConfig],
      content: [
          "./index.html",
          "./src/**/*.{js,ts,jsx,tsx}",
          "./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}",
      ],
  };