プロジェクトのセットアップ
プロジェクトのセットアップ
このガイドでは、AppKit アプリケーションで推奨されるプロジェクト構造とスキャフォールディングについて説明します。
標準的なプロジェクトレイアウト
推奨される構成 (クライアント／サーバー分割) :
my-app/
├── server/
│ ├── server.ts # バックエンドのエントリポイント (AppKit)
│ └── .env # ローカル開発用の環境変数 (任意、コミットしないこと)
├── client/
│ ├── index.html
│ ├── vite.config.ts
│ └── src/
│ ├── main.tsx
│ └── App.tsx
├── config/
│ └── queries/
│ └── my_query.sql
├── app.yaml
├── package.json
└── tsconfig.jsonlayout の設計意図
AppKit の server() plugin は、次を自動的に配信します。
- 開発時:
client/の Vite 開発サーバー(HMR) - 本番時:
client/distの静的ファイル(Vite でビルド)
プロジェクトのスキャフォールディング
package.json
{
"name": "my-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "NODE_ENV=development tsx watch server/server.ts",
"build": "npm run build:server && npm run build:client",
"build:server": "tsdown --out-dir build server/server.ts",
"build:client": "tsc -b && vite build --config client/vite.config.ts",
"start": "node build/index.mjs"
},
"dependencies": {
"@databricks/appkit": "^0.1.2",
"@databricks/appkit-ui": "^0.1.2",
"react": "^19.2.3",
"react-dom": "^19.2.3"
},
"devDependencies": {
"@types/node": "^20.0.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^5.1.1",
"tsdown": "^0.20.3",
"tsx": "^4.19.0",
"typescript": "~5.6.0",
"vite": "^7.2.4"
}
}client/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>client/src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>,
);client/src/App.tsx (最小構成)
export default function App() {
return (
<div className="p-8">
<h1 className="text-2xl font-bold">My App</h1>
</div>
);
}client/vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});tsconfig.json
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"strict": true,
"skipLibCheck": true,
"noEmit": true,
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true
},
"include": ["server", "client/src"]
}server/server.ts
import { createApp, server } from "@databricks/appkit";
await createApp({
plugins: [server()],
});アプリの実行
# 依存関係をインストール
npm install
# 開発（バックエンドと Vite 開発サーバーを起動）
npm run dev
# 本番ビルド
npm run build
npm start既存アプリへの統合
すでに React/Vite アプリがあり、そこに AppKit を追加する場合は、次の手順に従います。
1. 依存関係をインストールする
npm install @databricks/appkit @databricks/appkit-ui react react-dom
npm install -D tsx tsdown vite @vitejs/plugin-react typescriptまだ client/ フォルダーがない場合は作成し、Vite アプリをその中に移動します。
index.html→client/index.htmlに移動vite.config.ts→client/vite.config.tsに移動src/→client/src/に移動
2. server/server.ts を作成する (新規ファイル)
import { createApp, server } from "@databricks/appkit";
await createApp({
plugins: [server()],
});3. package.json のスクリプトを更新する
{
"scripts": {
"dev": "NODE_ENV=development tsx watch server/server.ts",
"build": "npm run build:server && npm run build:client",
"build:server": "tsdown --out-dir build server/server.ts",
"build:client": "tsc -b && vite build --config client/vite.config.ts",
"start": "node build/index.mjs"
}
}4. セットアップを完了する
AppKit のサーバー plugin は、開発モードでは Vite アプリを、本番環境では client/dist を自動的に配信します。Vite アプリをリポジトリのルートに置いたままにする必要がある場合 (client/ フォルダーがない場合) でも AppKit は動作しますが、推奨されるレイアウトは client/ + server/ です。
既存アプリへの分析機能の追加
SQL query の実行機能を追加するには、次の手順を実行します。
// server/server.ts
import { createApp, server, analytics } from "@databricks/appkit";
await createApp({
plugins: [server(), analytics()],
});次に config/queries/ を作成し、.sql ファイルを追加します。