Please note that in order to use FireCMS as described in this quickstart guide, you need an existing Firebase project with features enabled, such as Firebase Auth, Firestore and Firebase storage. Check the Firebase setup section if you need additional support
To bootstrap your FireCMS project, you can use the starter template by running:
yarn create firecms-app --v2
npx create-firecms-app --v2
Let's build a very simple CMS that creates a collection of products, with some properties. It includes samples of some advanced features, such as dynamic conditional fields or references (to the same products' collection, for simplicity).
We are defining our
Product type for better type checking and code clarity,
but it is not compulsory.
Authentication and authorization are also enabled, and make use of the
field in the
authController to check for permissions.
Remember to replace the Firebase config with the one you get after creating a webapp in the Firebase console. You need to update this config in the file:
If you don't know where to find the Firebase app config, check the Firebase setup section
Then simply run:
You should be able to see your FireCMS instance in your browser, awesome!
Vite uses the default url
http://127.0.0.1:5173 for the development server
in versions of
node < 18.0.0.
If you are using a version of node < 18.0.0, you will need to add this url to
the authorized domains in the Firebase console.
Firebase Auth will require to add this url to the authorized domains in the
Alternatively, you can use the url