Prerrequisitos
- Node.js 24+ — Descargar
- Yarn 4 — incluido con Node.js a través de Corepack. Actívalo:
corepack enable - Docker — Descargar. Necesario para ejecutar un servidor local de Twenty. Omítelo si ya tienes Twenty ejecutándose en otro lugar.
| Fase | Qué haces | Herramienta | Resultado |
|---|---|---|---|
| 1. Generar estructura | Genera el código fuente de la app | npx create-twenty-app | Un proyecto de TypeScript en disco |
| 2. Ejecutar un servidor | Inicia un servidor de Twenty con el que sincronizar | Docker + yarn twenty server | Una instancia de Twenty en ejecución |
| 3. Sincronizar | Sincroniza en vivo tu código con el servidor | yarn twenty dev | Tus cambios aparecen en la UI |
Fase 1 — Genera la estructura de tu proyecto
Crea una app nueva a partir de la plantilla:my-twenty-app/ con un application-config.ts inicial, un rol predeterminado, un flujo de trabajo de CI y una prueba de integración.
Después de esta fase: tienes el código fuente de tu app en tu máquina. Aún no se está ejecutando — esa es la Fase 2.
Fase 2 — Ejecuta un servidor local de Twenty
Tu app necesita un servidor de Twenty con el que sincronizar. El servidor es una instancia completa de Twenty — UI, API GraphQL, PostgreSQL — ejecutándose localmente en Docker. Tu código local sube sus definiciones a ese servidor, lo que hace que aparezcan en la UI. El generador ofrece iniciar uno por ti:¿Te gustaría configurar una instancia local de Twenty?
- Sí (recomendado) — descarga la imagen de Docker
twentycrm/twenty-app-devy la inicia en el puerto2020. Asegúrate de que Docker esté en ejecución antes. - No — elige esto si ya tienes un servidor de Twenty al que te quieres conectar. Puedes conectarlo más tarde con
yarn twenty remote:add.
- Correo electrónico:
tim@apple.dev - Contraseña:
tim@apple.dev
Si Docker no está instalado o en ejecución, el generador te indicará el comando de inicio correcto para tu sistema operativo. Una vez que Docker esté en marcha, puedes reanudar con
yarn twenty docker:start — no es necesario volver a generar la estructura.Fase 3 — Sincroniza tus cambios
Este es el ciclo interno en el que pasarás la mayor parte del tiempo.src/, recompila en cada cambio y sincroniza el resultado con el servidor. Edita un archivo, guarda y, en cuestión de unos segundos, el servidor reflejará el cambio. Verás un panel de estado en vivo en tu terminal.
Para una salida más detallada (registros de compilación, solicitudes de sincronización, trazas de errores), añade --verbose.
src/ y aparecerá en la UI.
Sincronización de una sola vez para CI y scripts
Pasa--once para ejecutar una sola compilación + sincronización y salir — mismo pipeline, sin watcher:
| Comando | Comportamiento | Cuándo usarlo |
|---|---|---|
yarn twenty dev | Supervisa tus archivos fuente y vuelve a sincronizar en cada cambio. Se ejecuta hasta que lo detengas. | Desarrollo local interactivo. |
yarn twenty dev --once | Realiza una sola compilación + sincronización y luego sale con el código 0 si tiene éxito o 1 si falla. | CI, hooks de pre-commit, agentes de IA, flujos de trabajo con scripts. |
yarn twenty dev --once --dry-run | Genera y muestra los cambios de metadatos sin aplicarlos. | Inspeccionar qué cambiaría una sincronización antes de confirmarla. |
--dry-run.
Opciones del modo de desarrollo
| Opción | Descripción |
|---|---|
--once | Compila y sincroniza una vez y luego finaliza. |
--dry-run | Con --once, obtén una vista previa de los cambios de metadatos sin aplicarlos. No escribe nada. |
--debounceMs \<ms> | Establece el tiempo de antirrebote para los cambios de archivo en milisegundos (valor predeterminado: 2000). |
--verbose / --debug | Muestra registros de compilación detallados, solicitudes de sincronización y seguimientos de errores. |
Lo que puedes crear
Las apps se componen de entidades — cada una definida como un archivo de TypeScript con un únicoexport default:
| Entidad | Qué hace |
|---|---|
| Objetos y campos | Modelos de datos personalizados (Post Card, Invoice, etc.). con campos tipados |
| Funciones de lógica | Funciones de TypeScript del lado del servidor activadas por rutas HTTP, programaciones de cron o eventos de base de datos |
| Componentes de frontend | Componentes de React que se renderizan dentro de la interfaz de Twenty (panel lateral, widgets, menú de comandos) |
| Habilidades y agentes | Capacidades de IA — instrucciones reutilizables y asistentes autónomos |
| Vistas y navegación | Vistas de lista preconfiguradas y elementos del menú lateral |
| Diseños de página | Páginas de detalle de registros personalizadas con pestañas y widgets |
Próximos pasos
Configuración
Identidad de la aplicación, rol predeterminado, hooks de instalación y recursos públicos.
Datos
Objetos, campos y relaciones bidireccionales.
Lógica
Funciones de lógica, habilidades, agentes y conexiones OAuth.
Diseño
Vistas, navegación, diseños de página y componentes de frontend.
Operaciones
CLI, pruebas, remotos, CI y publicación de tu aplicación.