Quickstart

important

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

or

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 extra 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:

firebase-config.ts

If you don't know where to find the Firebase app config, check the Firebase setup section

Then simply run:

yarn dev

You should be able to see your FireCMS instance in your browser, awesome!

important

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 Firebase console. Alternatively, you can use the url http://localhost:5173.