Pular para o conteúdo principal

Configurações iniciais

Vamos aprender a configurar o CMS em um novo projeto

O que você vai precisar​

  • Node.js versão 16.14 ou superior:
  • Ter acesso a algum ambiente do CMS da M3 (local ou produção)
  • Algum projeto front-end que deseja se integrar com o CMS (atualmente só temos implementação para front-ends baseados em React)

Instalando Dependências​

npm i @m3cms/api @m3cms/common @m3cms/react

Criando aquivo de configuração​

Crie um arquivo chamado m3cms.config.js na raiz do seu projeto usando o seguinte template:

./m3cms.config.js
/**
 * @type {import('@m3cms/api').M3CmsConfig}
 **/
const config = {
  baseUrl: "...",
  projectName: "...",
  workspaceName: "...",
  locale: "..."
}

export default config

Diretório CMS​

Para agrupar todos os componentes que serão utilizados pelo CMS, crie um diretório chamado CMS na raiz do seu projeto.

Sempre que voce criar um componente que será utilizado pelo CMS, exporte ele no arquivo index.ts dentro do diretório CMS.

mkdir src/cms
touch src/cms/index.ts

E crie um arquivo chamado index.ts dentro do diretório CMS e exporte os componentes que serão utilizados pelo CMS.

./src/cms/index.ts
import ExampleComponent from "../components/ExampleComponent/ExampleComponent.schema"
import type { CmsFunctionalComponent } from "@m3cms/react"

export const allCmsComponents: CmsFunctionalComponent<any>[] = [
  ExampleComponent,
  // repita esse padrão para cada novo componente que você criar
]

CSS global​

Temporário

Na versão da biblioteca @m3cms/[email protected] ainda temos que importar o CSS global dos nosso componentes, para funcionar os estilos do CMS. Porém, estamos trabalhando para que isso não seja mais necessário.

Importe o CSS global do CMS no seu projeto. No exemplo estamos em um projeto Next.js que usa o diretórios pages.

./pages/_app.tsx
import "@m3cms/react/dist/index.css"


// ...