MGPanel CLI

Herramienta oficial para crear y gestionar proyectos MGPanel desde tu computadora con HTML, CSS y JavaScript puro.

Requisitos

• Node.js (incluye npm)

node -v
npm -v

Instalación

npm install -g mgpanel-cli

O con npx:

npx mgpanel-cli init mi-web

Configuración (.env)

Tras mgpanel init, edita el archivo .env en la raíz del proyecto:

MGPANEL_ACCOUNT=zzz-miempresa
MGPANEL_TOKEN=tu-token-bearer
MGPANEL_API_URL_DEV=https://dev.mgpanel.co
MGPANEL_API_URL_PROD=https://app.mgpanel.co

| Variable | Descripción | |---|---| | MGPANEL_ACCOUNT | Nick de la cuenta MGPanel | | MGPANEL_TOKEN | Token Bearer del panel | | MGPANEL_API_URL_DEV | API de pruebas / desarrollo | | MGPANEL_API_URL_PROD | API de producción |

En pull y push debes indicar el entorno con --dev o --prod. Los flags --account, --token y --api-url son opcionales (override puntual).

Comandos

| Comando | Descripción | |---|---| | mgpanel init <proyecto> | Crea un proyecto nuevo | | mgpanel version | Muestra la versión del CLI | | mgpanel make page <pagina> | Crea pages/<pagina>/page.json | | mgpanel make section <nombre> | Crea sección en secciones/ con code ABCD | | mgpanel add section <ref> --to <pagina> | Asocia sección a una página | | mgpanel dev [puerto] | Preview local (default 3000) | | mgpanel pull --dev \| --prod | Descarga draft desde MGPanel | | mgpanel push --dev \| --prod | Sube cambios locales (alias: publish) |

Estructura del proyecto

proyecto/
├── pages/<slug>/page.json
├── secciones/<slug>/
│   ├── section.json      # { code, name, status, html/css/javascript.type }
│   ├── <slug>.html
│   ├── <slug>.css
│   └── <slug>.js
├── assets/css/style.css
├── assets/js/app.js
├── dev/preview.js
├── index.html
└── .env

Ejemplo page.json

{
  "name": "Home",
  "route": "/",
  "title": "Inicio",
  "description": "Página principal",
  "directory": "",
  "index": true,
  "status": 1,
  "soon": false,
  "sections": [
    {
      "code": "58IU",
      "name": "Header",
      "slug": "header",
      "import": false,
      "status": 1
    }
  ]
}

Regla de import

Por cada code de sección en todo el proyecto:

• Solo una referencia puede tener import: false (sección dueña).
• Las demás deben tener import: true.

mgpanel push valida esta regla y aborta si hay conflicto.

En pull, las secciones con import: true no tienen carpeta propia en secciones/ — reutilizan el code, slug y archivos de la dueña. No se crean carpetas menu--* ni codes inventados.

Flujo típico

mgpanel init mi-web
cd mi-web
# Editar .env

mgpanel pull --dev
mgpanel dev
# editar secciones y páginas
mgpanel push --dev

Migración desde v1 (modules)

1. Renombra modules/ → secciones/.
2. En cada carpeta de sección, crea section.json con el code de MGPanel.
3. En page.json, cambia modules[] por sections[] con code, name, import, status.
4. Agrega name, index, status, soon en cada page.json.
5. Haz un mgpanel pull --dev fresco si es posible.

Sync de status (importante)

pull solo sincroniza status si la respuesta HTTP de GET /api/cli/draft incluye status en cada sección. Si --debug muestra raw.status=undefined, el mapper del backend no está copiando el campo desde MongoDB (aunque exista en la base de datos). Usa mgpanel pull --dev --dump-draft y compara dev/draft-response.json con MongoDB. Ver README-API.md.

Mientras tanto:

• Cambios de status en MGPanel → no llegan al local con pull
• Cambios de status en local → sí suben con mgpanel push --dev

API

Ver README-API.md para el contrato de merge en push (POST /api/cli/publish).