Skip to main content

​
前提条件

  • 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 でサインインします。）
ターミナルにセットアップ完了のメッセージが表示されます。
このフェーズ後: あなたの CLI が同期を許可された Twenty サーバーが http://localhost:2020 で稼働しています。
Docker がインストールされていない、または起動していない場合、スキャフォルダーが OS に合った開始コマンドを案内します。 Docker が起動したら、yarn twenty docker:start で再開できます — 再スキャフォールドは不要です。

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

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

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

ウォッチャーなしで同じパイプラインを 1 回だけ実行するには、plan と apply を使用します。
すべてのモードで、認証済みのリモートが必要です。 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、およびアプリの公開。