start-dev-server

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Step 0: Get User Preferences

步骤0：获取用户偏好

Ask the user if they want Claude to start the dev server(s) as a background task in the current session, or on their own in a separate terminal:
- Starting as a background task (Claude)
  - Pros: Claude has more autonomy, can respond directly to dev server logs (warnings, errors).
  - Cons: Certain actions can be slower, and the user has less direct control. Server logs are only visibile to the user from within the
```
background tasks
```
    tab.
- Starting externally (User)
  - Pros: The user has more direct control over app development and the Wasp CLI commands. Can be advantageous for more advanced users.
  - Cons: Debugging and feature discovery can be slower, as Claude doesn't have direct access to dev server logs (warnings, errors) or Wasp CLI commands.
Depending on the user's choice, follow the steps below and run the commands for the user as background tasks, or guide them through running them manually in a separate terminal.

询问用户是否希望Claude在当前会话中以后台任务形式启动开发服务器，还是让用户在单独终端中自行启动：
- 作为后台任务启动（Claude执行）
  - 优点：Claude拥有更多自主权，可以直接响应开发服务器日志（警告、错误）。
  - 缺点：某些操作可能更慢，用户的直接控制权较少。服务器日志仅能通过“后台任务”标签页供用户查看。
- 外部启动（用户执行）
  - 优点：用户对应用开发和Wasp CLI命令拥有更多直接控制权。对高级用户更有利。
  - 缺点：调试和功能探索可能更慢，因为Claude无法直接访问开发服务器日志（警告、错误）或Wasp CLI命令。
根据用户的选择，按照以下步骤操作：要么为用户以后台任务形式运行命令，要么指导用户在单独终端中手动运行。

Step 1: Ensure the Development Database is Running

步骤1：确保开发数据库正在运行

Grep the

.env.server

file for

DATABASE_URL

. If no line starts with

DATABASE_URL

, continue following this step. If the user does have their own DATABASE_URL env var set, move on to Step 2.

Check the

schema.prisma

file in the project root for the

datasource

block to see which database is being used.

在

.env.server

文件中查找

DATABASE_URL

。如果没有以

DATABASE_URL

开头的行，继续执行此步骤。如果用户已设置自己的DATABASE_URL环境变量，请跳至步骤2。

检查项目根目录下的

schema.prisma

文件中的

datasource

块，查看使用的数据库类型。

SQLite

Skip to Step 2: SQLite stores data in a local file, no database server needed.

跳至步骤2：SQLite将数据存储在本地文件中，无需数据库服务器。

PostgreSQL

Start the managed database container as a background task:

bash

wasp start db

Docker needs to be installed and running for the managed Postgres database container (

wasp start db

) to work.

Run this as a background task in the current claude code session. Wait 5-15 seconds for the database to be ready.

以后台任务形式启动托管数据库容器：

bash

wasp start db

需要安装并运行Docker才能让托管Postgres数据库容器（

wasp start db

）正常工作。

在当前Claude代码会话中以后台任务形式运行此命令。等待5-15秒，待数据库准备就绪。

Step 2: Start Dev Server

步骤2：启动开发服务器

Start the Wasp development server as a background task:

bash

wasp start

If this is the first time starting the app, or if there are pending migrations, run the following command:

bash

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

以后台任务形式启动Wasp开发服务器：

bash

wasp start

如果是首次启动应用，或者存在待处理的迁移，请运行以下命令：

bash

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

Step 3: Verify Server is Running

步骤3：验证服务器是否运行

Confirm client (

localhost:3000

) and server (

localhost:3001

) are running by checking the background task output.

If started as background task in current session: Listen to the output for development and debugging information. If started externally: Instruct the user to check the output of the external terminal and share its output with you.

通过检查后台任务输出来确认客户端（

localhost:3000

）和服务器（

localhost:3001

）是否正在运行。

如果在当前会话中以后台任务启动：监听输出以获取开发和调试信息。 如果是外部启动：指导用户检查外部终端的输出并与你分享。

Step 4: Connect Browser Console Access (Important!)

步骤4：连接浏览器控制台访问权限（重要！）

This step is critical for effective development and debugging. Without browser console access, Claude cannot see client-side errors, warnings, or React issues that occur in the browser.

Ask the user (via the AskUserQuestion tool) which method they'd like to use for giving Claude visibility into the browser console:

Option	Description
Chrome DevTools MCP (recommended)	Use the `mcp__plugin_wasp_chrome-devtools` tool (bundled with the plugin)
Built-in Chrome	Use Claude Code's built-in browser connection (check status with `/chrome` command)
Manual	User will manually copy/paste console output when needed
Other	User has another preference

此步骤对于高效开发和调试至关重要。 没有浏览器控制台访问权限，Claude无法查看浏览器中发生的客户端错误、警告或React问题。

通过AskUserQuestion工具询问用户希望使用哪种方法让Claude能够查看浏览器控制台：

选项	描述
Chrome DevTools MCP（推荐）	使用 `mcp__plugin_wasp_chrome-devtools` 工具（随插件捆绑提供）
内置Chrome	使用Claude Code的内置浏览器连接（使用 `/chrome` 命令检查状态）
手动方式	用户将在需要时手动复制粘贴控制台输出
其他	用户有其他偏好