Migrating from previous beta versions

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.9.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "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",
            ]
        })
    ],
    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}",
      ],
  };