Quickstart

Construa seu próprio painel de administração Firebase e headless CMS com controle total sobre sua infraestrutura. As versões self-hosted do FireCMS permitem que você implante um poderoso back-office baseado em React em seus próprios servidores, com total propriedade dos dados.

Community vs PRO

Recurso	Community (Gratuito)	PRO
UI CRUD completa	✅	✅
Campos React personalizados	✅	✅
Suporte TypeScript	✅	✅
Usuários ilimitados	✅	✅
Histórico de entidades e trilha de auditoria	❌	✅
Editor visual de schema e inferência de dados	❌	✅
Importação (CSV, JSON, Excel) e exportação (CSV, JSON)	❌	✅
Interface de gestão de usuários e papéis	❌	✅
Preenchimento automático com IA (data enhancement)	❌	✅
Suporte prioritário	❌	✅
Preço	Grátis, licença MIT	€99 ($119) / mês pelo primeiro projeto, €49 ($59) por projeto adicional, mais impostos

O PRO é grátis por 30 dias em produção, sem cartão. A página Licenças explica como os projetos são contados e o que pausa sem licença.

Ambas as versões são construídas em React, conectam-se ao Firebase/Firestore e fornecem um painel admin pronto para produção em minutos.

Criar um novo projeto usando a CLI

Para criar um novo projeto usando a CLI, você pode executar o seguinte comando:

npx create-firecms-app

ou:

yarn create firecms-app

Isso criará um novo projeto FireCMS, Community ou PRO, na pasta selecionada. Um projeto FireCMS é uma aplicação React que você pode personalizar para atender às suas necessidades. O projeto inicial terá uma estrutura básica com algumas coleções e algumas views personalizadas.

Executando o projeto

Para executar o projeto, execute os seguintes comandos:

cd my-cms
yarn
yarn dev

cd my-cms
npm install
npm run dev

Isso instalará as dependências e iniciará o servidor de desenvolvimento.

Alterando a URL base do FireCMS

O FireCMS usa o React Router para lidar com o roteamento da aplicação. Você pode alterar a URL base do FireCMS modificando a propriedade basename do componente BrowserRouter no arquivo src/main.tsx. Por exemplo, se você quiser alterar a URL base para /admin, pode fazer assim:

import React from "react"
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

import "./index.css"
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
        <BrowserRouter basename={"/admin"}>
            <App/>
        </BrowserRouter>
    </React.StrictMode>
)