mcpField
S
start-dev-server

start-dev-server

github.com/wasp-lang開発14319 回インストール2 週間前に更新
リポジトリ

start-dev-server について

Wasp アプリの開発サーバー起動をエージェントに案内するスキルです。依存関係、環境ファイル、データベース、マイグレーション、稼働確認に加え、ブラウザーのコンソール出力を共有する方法も扱います。

主な機能

  1. 01サーバーの起動方法を確認
  2. 02依存関係の導入と環境ファイルの準備
  3. 03データベース起動とマイグレーション
  4. 04Wasp 開発サーバーの起動と確認
  5. 05ブラウザーコンソールへのアクセス設定

活用シーン

  1. 01Wasp プロジェクトのローカル開発開始
  2. 02PostgreSQL 開発データベースの準備
  3. 03保留中のデータベースマイグレーション実行
  4. 04ブラウザー側のエラー調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/wasp-lang/wasp-agent-plugins --skill start-dev-server

インストール後、Claude Code で/start-dev-serverを入力して読み込まれたか確認します。

詳細

ステップ 0：ユーザーの希望を確認する

  • 現在のセッションでバックグラウンドタスクとして開発サーバーを起動するか、別のターミナルで自分で起動するか、ユーザーに確認します。
    • バックグラウンドタスクとして起動する場合
      • メリット：エージェントの自律性が高まり、開発サーバーのログ（警告、エラー）に直接対応できます。
      • デメリット：処理によっては時間がかかり、ユーザーが直接制御しにくくなります。サーバーのログは、background tasks タブからのみユーザーが確認できます。
    • 外部で起動する場合（ユーザー）
      • メリット：ユーザーがアプリの開発や Wasp CLI コマンドをより直接制御できます。上級ユーザーにはこちらが適している場合があります。
      • デメリット：エージェントが開発サーバーのログ（警告、エラー）や Wasp CLI コマンドを直接確認できないため、デバッグや機能の確認に時間がかかる場合があります。
  • ユーザーの選択に応じて、以下の手順に従い、バックグラウンドタスクとしてコマンドを実行するか、別のターミナルで手動実行できるように案内します。
ステップ 1：チェックアウトを準備する

node_modules がない場合は、プロジェクトの依存関係をインストールします。

wasp install

.env.server または .env.client がなく、.env.server.example または .env.client.example がある場合は、サンプルファイルから不足しているファイルを作成します。適切な値を設定するため、ファイルを編集するようユーザーに依頼します。

ステップ 2：開発用データベースが起動していることを確認する

.env.server ファイルから DATABASE_URL を検索します。DATABASE_URL で始まる行がない場合は、この手順を続けます。 ユーザーが独自の DATABASE_URL 環境変数を設定している場合は、ステップ 3 に進みます。

プロジェクトのルートにある schema.prisma ファイルで datasource ブロックを確認し、使用されているデータベースを調べます。

SQLite

ステップ 3 に進みます： SQLite はローカルファイルにデータを保存するため、データベースサーバーは不要です。

PostgreSQL

管理対象データベースのコンテナーをバックグラウンドタスクとして起動します。

wasp start db

管理対象の Postgres データベースコンテナー（wasp start db）を使用するには、Docker がインストールされ、起動している必要があります。

現在のセッションでバックグラウンドタスクとして実行します。 データベースの準備ができるまで 5～15 秒待ちます。

ステップ 3：データベースのマイグレーションを実行する

アプリを初めて起動する場合、または保留中のマイグレーションがある場合は、次のコマンドを実行します。

wasp db migrate-dev --name <migration-name>

一部のアプリでは、正しく動作させるためにシードデータが必要です。データベースにシードデータを投入するには、次のコマンドを実行します。

wasp db seed <name>
ステップ 4：開発サーバーを起動する

Wasp の開発サーバーをバックグラウンドタスクとして起動します。

wasp start
ステップ 5：サーバーが起動していることを確認する

wasp start の出力からクライアントとサーバーの URL を確認し、クライアントが読み込まれることを検証します。

Wasp 0.26 以降では、/up でサーバーが HTTP 200 を返すことを確認します。使用中のポートは自動的に置き換えられます。ポートを選択するには --client-port と --server-port を、外部からアクセスできる URL を指定するには --client-url と --server-url を使用します。URL の上書きでは、リッスンするポートは選択されません。開発用のポートと URL は Wasp が管理するため、.env.server から PORT、WASP_SERVER_URL、WASP_WEB_CLIENT_URL を、.env.client から REACT_APP_API_URL を、Vite の設定から server.port と server.strictPort を削除してください。デプロイ用の環境変数は変更しないでください。

Wasp 0.26 以降では、管理対象データベースも空いているポートを選択します。Wasp が自動的に検出します。データベースのポートを固定する必要がある場合は、wasp start db --db-port <port> を使用します。

現在のセッションでバックグラウンドタスクとして起動した場合： 開発やデバッグに関する情報がないか、出力を確認します。 外部で起動した場合： 外部ターミナルの出力を確認し、その内容を共有するようユーザーに案内します。

ステップ 6：ブラウザーコンソールへのアクセスを接続する（重要！）

このステップは、効果的な開発とデバッグに欠かせません。 ブラウザーコンソールにアクセスできない場合、エージェントはブラウザーで発生するクライアント側のエラー、警告、React の問題を確認できません。

エージェントがブラウザーコンソールを確認できるようにする方法として、どれを使いたいかユーザーに尋ねてください（AskUserQuestion ツールを使用します）。

オプション説明
Chrome DevTools MCP（推奨）インストールが必要です
組み込みの ChromeClaude Code の組み込みブラウザー接続を使用します（/chrome コマンドで状態を確認してください）
手動必要に応じて、ユーザーがコンソール出力を手動でコピーして貼り付けます
その他ユーザーに別の希望があります

Chrome DevTools MCP を選択した場合、まだインストールされていなければ、次の設定を MCP クライアントに追加してください。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

コメント

Markdown 対応