npm パッケージの使用
アプリで任意の npm パッケージをインストールして使用できます。 ロジック関数とフロントコンポーネントはどちらも esbuild でバンドルされ、依存関係はすべて出力にインライン化されます—実行時にnode_modules は不要です。
パッケージのインストール
src/logic-functions/fetch-data.ts
src/front-components/chart.tsx
バンドルの仕組み
ビルドステップでは esbuild を使用して、各ロジック関数および各フロントコンポーネントごとに自己完結した単一ファイルを生成します。 インポートされたパッケージはすべてバンドルにインライン化されます。 ロジック関数は Node.js 環境で実行されます。 Node の組み込みモジュール(fs、path、crypto、http など) は利用可能で、インストールは不要です。
フロントコンポーネントは Web Worker で実行されます。 Node の組み込みモジュールは利用できません—ブラウザー環境で動作するブラウザー API と npm パッケージのみが使用できます。
どちらの環境でも、twenty-client-sdk/core および twenty-client-sdk/metadata が事前提供モジュールとして利用可能です—これらはバンドルされず、実行時にサーバーによって解決されます。
セットアップ
スキャフォルドされたアプリにはすでに Vitest が含まれています。 手動で設定する場合は、依存関係をインストールしてください:vitest.config.ts を作成します:
vitest.config.ts
src/__tests__/setup-test.ts
プログラム用 SDK API
twenty-sdk/cli サブパスは、テストコードから直接呼び出せる関数をエクスポートします:
| 関数 | 説明 |
|---|---|
appBuild | アプリをビルドし、必要に応じて tarball にパッケージ化 |
appDeploy | tarball をサーバーにアップロード |
appInstall | アクティブなワークスペースにアプリをインストール |
appUninstall | アクティブなワークスペースからアプリをアンインストール |
success: boolean と data または error のいずれかを含む結果オブジェクトを返します。
統合テストの作成
アプリをビルド、デプロイ、インストールし、その後ワークスペースに表示されることを検証する完全な例を次に示します:src/__tests__/app-install.integration-test.ts
テストの実行
ローカルの Twenty サーバーが起動していることを確認し、次を実行します:型チェック
テストを実行せずに、アプリの型チェックのみを実行することもできます:tsc --noEmit を実行し、型エラーを報告します。
GitHub Actions による CI
スキャフォルダーは、すぐに使える GitHub Actions ワークフローを.github/workflows/ci.yml に生成します。 main へのプッシュやプルリクエストのたびに、統合テストを自動実行します。
ワークフローの内容:
- コードをチェックアウトする
twentyhq/twenty/.github/actions/spawn-twenty-docker-imageアクションを使って一時的な Twenty サーバーを起動するyarn install --immutableで依存関係をインストールする- アクションの出力から注入された
TWENTY_API_URLとTWENTY_API_KEYを用いてyarn testを実行する
.github/workflows/ci.yml
spawn-twenty-docker-image アクションがランナー内で一時的な Twenty サーバーを直接起動し、接続情報を出力します。 GITHUB_TOKEN シークレットは GitHub によって自動的に提供されます。
latest の代わりに特定の Twenty バージョンを固定するには、ワークフローの先頭にある TWENTY_VERSION 環境変数を変更します。