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.

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-dark: #0061e6;
    --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=firecms-demo-27150"
  },
  "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 "packages/firecms_cloud/src/index";

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}",
          "./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}",
      ],
  };