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 thetailwindcss
package, andpostcss
version8.4.38
. -
The preset now comes from the
@firecms/ui
package. You can update yourtailwind.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}",
],
};