Pular para o conteúdo principal

Frontend — Instalação

Via scaffold (recomendado)​

npx @oondemand/create-central-oon minha-central
cd minha-central/frontend
npm install

Instalação manual​

npm install @oondemand/oon-core-front
npm install react react-dom react-router-dom
npm install @chakra-ui/react @tanstack/react-query @tanstack/react-table
Peer dependencies

@oondemand/oon-core-front requer as seguintes peer dependencies:

PacoteVersão
react^18.0.0
react-dom^18.0.0
react-router-dom^6.0.0
@chakra-ui/react^3.0.0
@tanstack/react-query^5.0.0
@tanstack/react-table^8.0.0

Configuração do Vite​

O projeto precisa de um vite.config.ts com o plugin React:

vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

Variáveis de ambiente​

.env
VITE_API_URL=http://localhost:4000
VITE_MEUS_APPS_URL=https://meus-apps.oondemand.com.br
VariávelObrigatórioDescrição
VITE_API_URL✅URL base do backend (oon-core-back)
VITE_MEUS_APPS_URL—URL do Meus Apps para redirect de login

Ponto de entrada​

O scaffold gera central.ui.json (manifesto JSON) e usa startFromManifest:

src/main.tsx
import { startFromManifest } from "@oondemand/oon-core-front";
import manifest from "../central.ui.json";

startFromManifest(manifest, {
  apiBaseUrl: import.meta.env.VITE_API_URL ?? "http://localhost:4000",
  meusAppsUrl: import.meta.env.VITE_MEUS_APPS_URL,
});

Se preferir TypeScript puro com start() diretamente, veja start() — Configuração.

index.html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Minha Central</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>