メインコンテンツへスキップ

前提条件

  • Node.js 24.5+こちらからダウンロード
  • Yarn 4 — Corepack 経由で Node.js に同梱されています。 有効化: corepack enable
  • Dockerこちらからダウンロード。 ローカルの Twenty サーバーを実行するために必要です。 すでに別の場所で Twenty が稼働している場合はスキップしてください。
Twenty アプリの構築は 3 つのフェーズで構成されます。 スキャフォルダーはそれらをハッピーパスの 1 つのコマンドにまとめますが、各フェーズは別個の概念です — 何かが失敗したとき、いまどのフェーズにいるかが分かると、直すべき箇所が特定できます。

フェーズ 1 — プロジェクトをスキャフォールドする

テンプレートから新しいアプリを作成します:
スキャフォルダーは非対話型であり、ディレクトリ名がアプリ名になります。 生成されるメタデータをカスタマイズするには、--display-name--description を指定します(後から src/constants/universal-identifiers.ts 内で編集することもできます)。 これにより、my-twenty-app/ にスターターの application-config.ts、デフォルトロール、CI/CD ワークフロー、および統合テストを含む TypeScript プロジェクトが生成されます。 このフェーズ後: マシン上にアプリのソースコードがあります。 まだ実行はされていません — それはフェーズ 2 です。

フェーズ 2 — ローカルの Twenty サーバーを起動する

アプリは同期先としての Twenty サーバーを必要とします。 サーバーは、UI、GraphQL API、PostgreSQL を備えた完全な Twenty インスタンスで、Docker 上でローカルに実行されます。 ローカルのコードは定義をそのサーバーにアップロードし、UI に反映されます。 スキャフォルダーが環境を自動的に起動します。Docker が動作している状態で、twentycrm/twenty-app-dev イメージを取得し、ポート 2020 で起動して、事前にデモデータが投入されたワークスペース(tim@apple.dev)に対して CLI を認証します — サインインは不要です。 既存の Twenty サーバーに接続する場合は、代わりに --url \<your-server-url> を指定してください。 リモートサーバーは OAuth で認証されます。ブラウザーが開き、サインインして Authorize をクリックすると、CLI にワークスペースへのアクセス権が付与されます。 (ローカルでも --authentication-method oauth を指定して OAuth を利用できます。その場合は tim@apple.dev / tim@apple.dev でサインインします。)
Twenty のログイン画面
Twenty CLI の承認画面
ターミナルにセットアップ完了のメッセージが表示されます。
アプリのスキャフォルドに成功しました。
このフェーズ後: あなたの CLI が同期を許可された Twenty サーバーが http://localhost:2020 で稼働しています。
Docker がインストールされていない、または起動していない場合、スキャフォルダーが OS に合った開始コマンドを案内します。 Docker が起動したら、yarn twenty docker:start で再開できます — 再スキャフォールドは不要です。

フェーズ 3 — 変更を同期する

ここが、最も多くの時間を費やす内側のループです。
これは src/ を監視し、変更のたびに再ビルドして、その結果をサーバーに同期します。 ファイルを編集して保存すると、数秒以内にサーバーに変更が反映されます。 ターミナルにライブステータスパネルが表示されます。 より詳細な出力(ビルドログ、同期リクエスト、エラートレース)が必要な場合は、--verbose フラグを使用します。
開発モードのターミナル出力
ブラウザーで http://localhost:2020/settings/applications#developer を開きます。 Your Apps にアプリが表示されるはずです。
Your Apps リストに My twenty app が表示されている様子
My twenty app をクリックすると、その application registration(アプリを記述するサーバーレベルのレコード。名前、識別子、OAuth 認証情報、ソース)が表示されます。 同一サーバー上では、1 つの登録を複数のワークスペースにインストールできます。
アプリケーション登録の詳細
ワークスペースへのインストールを確認するには View installed app をクリックします。 About タブには現在のバージョンと管理オプションが表示されます。
インストール済みのアプリ
このフェーズ後: ライブな開発ループが確立しています。 src/ 内の任意のファイルを編集すると、UI に反映されます。

CI やスクリプト向けの一回限りの同期

ウォッチャーなしで同じパイプラインを 1 回だけ実行するには、planapply を使用します。
すべてのモードで、認証済みのリモートが必要です。 plan の詳細については、Syncing & recovery を参照してください。
yarn twenty dev --once および yarn twenty dev --once --dry-run は非推奨であり、それぞれ yarn twenty apply および yarn twenty plan のエイリアスです。

Dev モードのオプション

構築できるもの

アプリはエンティティで構成されており、それぞれが単一の export default を持つ TypeScript ファイルとして定義されます: 完全なリファレンス: Concepts

次のステップ

設定

アプリケーション ID、デフォルトロール、インストールフック、公開アセット。

データ

オブジェクト、フィールド、および双方向リレーション。

ロジック

ロジック関数、スキル、エージェント、および OAuth 接続。

レイアウト

ビュー、ナビゲーション、ページレイアウト、フロントコンポーネント。

オペレーション

CLI、テスト、リモート、CI、およびアプリの公開。