Charles BochetandGitHub
29c0c952e7
## Add `frontComponent` entity type to SDK This PR adds a new `frontComponent` entity type at parity with `serverlessFunction`. Front components are React components that can be defined and bundled as part of Twenty applications. ### Changes #### New Entity Type - Added `FRONT_COMPONENT` to `SyncableEntity` enum - Front components use `*.front-component.tsx` file naming convention - CLI command `twenty app:add` now includes `front-component` as an option #### SDK Application Layer (`twenty-sdk`) - Added `defineFrontComponent()` function for defining front component configurations with validation - Added `FrontComponentConfig` type for component configuration - Added `getFrontComponentBaseFile()` template generator for scaffolding new front components - Added `loadFrontComponentModule()` to load front component modules and extract component metadata #### Shared Types (`twenty-shared`) - Added `FrontComponentManifest` type with `universalIdentifier`, `name`, `description`, `componentPath`, and `componentName` fields - Updated `ApplicationManifest` to include optional `frontComponents` array #### Manifest Build System - Updated `manifest-build.ts` to discover and load `*.front-component.tsx` files - Updated `manifest-validate.ts` to validate front components and check for duplicate IDs - Updated `manifest-display.ts` to display front component count in build summary - Updated `manifest-plugin.ts` to display front component entry points and watch `.tsx` files #### Template (`create-twenty-app`) - New applications now include a sample `hello-world.front-component.tsx` file #### Tests - Added unit tests for `defineFrontComponent()` - Added unit tests for `getFrontComponentBaseFile()`
Create Twenty App
Create Twenty App is the official scaffolding CLI for building apps on top of Twenty CRM. It sets up a ready‑to‑run project that works seamlessly with the twenty-sdk.
- Zero‑config project bootstrap
- Preconfigured scripts for auth, generate, dev sync, one‑off sync, uninstall
- Strong TypeScript support and typed client generation
Prerequisites
- Node.js 24+ (recommended) and Yarn 4
- A Twenty workspace and an API key (create one at https://app.twenty.com/settings/api-webhooks)
Quick start
npx create-twenty-app@latest my-twenty-app
cd my-twenty-app
# Get Help
yarn run help
# Authenticate using your API key (you'll be prompted)
yarn auth:login
# Add a new entity to your application (guided)
yarn entity:add
# Generate a typed Twenty client and workspace entity types
yarn app:generate
# Start dev mode: automatically syncs local changes to your workspace
yarn app:dev
# Or run a one‑time sync
yarn app:sync
# Watch your application's functions logs
yarn app:logs
# Uninstall the application from the current workspace
yarn app:uninstall
What gets scaffolded
- A minimal app structure ready for Twenty
- TypeScript configuration
- Prewired scripts that wrap the
twentyCLI from twenty-sdk - Example placeholders to help you add entities, actions, and sync logic
Next steps
- Explore the generated project and add your first entity with
yarn entity:add. - Keep your types up‑to‑date using
yarn app:generate. - Use
yarn app:devwhile you iterate to see changes instantly in your workspace.
Publish your application
Applications are currently stored in twenty/packages/twenty-apps.
You can share your application with all Twenty users:
# pull the Twenty project
git clone https://github.com/twentyhq/twenty.git
cd twenty
# create a new branch
git checkout -b feature/my-awesome-app
- Copy your app folder into
twenty/packages/twenty-apps. - Commit your changes and open a pull request on https://github.com/twentyhq/twenty
git commit -m "Add new application"
git push
Our team reviews contributions for quality, security, and reusability before merging.
Troubleshooting
- Auth prompts not appearing: run
yarn auth:loginagain and verify the API key permissions. - Types not generated: ensure
yarn app:generateruns without errors, then re‑startyarn app:dev.