Wasp 项目创建入门：用 wasp new 与 wasp start 搭建你的第一个全栈应用

Wasp 项目创建入门用 wasp new 与 wasp start 搭建你的第一个全栈应用【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp导读本篇是 Wasp 官方教程系列Tutorial: Creating a New Project的开篇指南面向第一次接触 Wasp 的开发者讲解如何从零创建一个 Todo 应用项目并启动完整的全栈开发环境。读完本篇你将掌握wasp new与wasp start两个核心命令的用法与底层行为理解 minimal 模板生成的项目结构声明式main.wasp.ts配置、src客户端代码、Prisma schema 三者的分工并为后续教程中学习 Pages、Entities、Queries、Actions、Auth 等 Wasp 核心特性打下基础。文中所有示例均可对照本仓库中的完整实现 examples/tutorials/TodoApp 与 examples/tutorials/TodoAppTs 进行验证。开始前的准备本教程假设你已经在本地安装好了最新版本的 Wasp。如果你还没有安装请先阅读仓库中的 QuickStart 指南完成安装。Wasp 同时开箱即用地支持JavaScript 与 TypeScript两种语言你可以在项目中自由选择也可以混合使用两者。本教程会同时给出 JavaScript 与 TypeScript 两种代码代码块带有语言切换功能站点会记住你的偏好——这正体现了 Wasp 以声明式配置驱动全栈代码生成 的核心思想无论你偏好哪种语言main.wasp.ts中声明的 app、page、query、action 都会为你生成对应的客户端与服务端代码。第一步创建新项目在终端中运行以下命令创建一个新的 Wasp 项目wasp new TodoApp -t minimal这里我们特意使用了minimal模板因为我们打算从零开始一步步实现这个应用而不是直接使用功能更完整的默认basic模板。这也是本仓库 waspc/data/Cli/starters 中内置的三类 starter 模板之一basic、minimal与skeleton。wasp new做了什么从 CLI 源码结构看见 waspc/cli/src/Wasp/Cli/Command/CreateNewProject.hswasp new命令的核心逻辑是根据你指定的模板Template从 内置模板目录Bundled或 GitHub Release 归档GhReleaseArchive中取得 starter 模板再将其复制到目标目录并完成应用名、版本号等占位符的替换。模板中形如__waspAppName__、__waspVersion__的占位符会被替换成实际的项目名与 Wasp 版本见 minimal/main.wasp.ts这正是一条命令生成完整前后端代码的机制来源。以 minimal 模板为例它生成的项目包含main.wasp.ts—— 声明式配置主文件定义应用名、标题与路由src/MainPage.tsx—— 唯一的页面组件渲染欢迎占位页package.json、tsconfig.json、vite.config.ts—— 前端构建与依赖配置schema.prisma—— 数据库模型定义minimal 模板中为空待后续教程添加 Entity。模板生成的main.wasp.ts内容大致如下import { app, page, route } from wasp.sh/spec; import { MainPage } from ./src/MainPage with { type: ref }; export default app({ name: TodoApp, // 应用名由命令行参数注入 wasp: { version: 0.17.0 }, title: TodoApp, head: [link relicon href/favicon.ico /], spec: [ route(RootRoute, /, page(MainPage)), ], });可见一个最小的 Wasp 应用只需要一个页面组件与一条根路由声明其余繁琐的全栈脚手架Vite 开发服务器、Express 服务端、Prisma 数据库层全部由 Wasp 在构建时自动生成。第二步进入项目并启动开发服务器创建完成后进入新目录并启动开发服务器cd TodoApp wasp startwasp start在新项目上第一次运行时需要一段时间因为它需要完成依赖安装与代码生成。随后你会在终端看到三组日志消息分别来自client客户端、server服务端与 database数据库三者正在协同初始化databaseWasp 会启动 Prisma 管理的数据库默认 SQLite可通过 schema.prisma 切换为 PostgreSQL并等待迁移就绪server基于 Node.js/Express 的服务端进程加载生成的路由与后续教程将添加的 Queries、Actionsclient基于 Vite 的 React 前端开发服务器提供热更新。当一切就绪后浏览器会自动打开新标签页访问http://localhost:3000你会看到 minimal 模板生成的简单占位页面——这正是模板中MainPage.tsx渲染的结果一个 Wasp Logo、Welcome to Wasp! 标题以及指向本教程与 Discord 社区的两个按钮。至此Wasp 已经为你生成了应用完整的前端与后端代码。接下来教程将带你仔细审视项目的结构。项目结构一览生成的 TodoApp 项目对照本仓库 examples/tutorials/TodoApp 的最终形态包含以下关键部分TodoApp/ ├── main.wasp.ts # 声明式配置主文件应用、路由、Auth、Queries、Actions 的声明都集中在这里 ├── schema.prisma # Prisma 数据库模型 ├── package.json # 依赖与脚本 ├── tsconfig.json # TypeScript 配置 ├── vite.config.ts # Vite 配置 └── src/ # 你的客户端与服务端代码页面、查询、动作 ├── MainPage.tsx ├── LoginPage.tsx ├── SignupPage.tsx ├── actions.ts └── queries.ts教程最终完成的 TodoApp 在main.wasp.ts中声明了三个路由根路由、登录、注册、一个查询getTasks与两个动作createTask、updateTask并启用了基于用户名/密码的认证见 main.wasp.tsexport default app({ name: TodoApp, wasp: { version: 0.26.0 }, title: TodoApp, head: [link relicon href/favicon.ico /], auth: { userEntity: User, methods: { usernameAndPassword: {} }, onAuthFailedRedirectTo: /login, }, spec: [ route(RootRoute, /, page(MainPage, { authRequired: true })), route(SignupRoute, /signup, page(SignupPage)), route(LoginRoute, /login, page(LoginPage)), query(getTasks, { entities: [Task] }), action(createTask, { entities: [Task] }), action(updateTask, { entities: [Task] }), ], });需要注意的是当前仓库中的示例应用使用的是更新版本的 Wasp0.26.0而本文对应的教程文档基于Wasp 0.17两者在main.wasp.ts的写法上有细微差异0.17 使用声明式app {}语法而 0.26 起迁移到了wasp.sh/spec的编程式 API。阅读本教程时请以你本机安装的 Wasp 版本实际生成的模板为准。这一演进也印证了 Wasp 团队持续将配置向 TypeScript 规范迁移的方向相关内容可参考 web/docs/general/spec.md。运行 TodoApp 示例的完整流程如果你想直接运行本仓库中已完成的教程示例而非从零跟随教程可以按照 examples/tutorials/TodoApp/README.md 的说明操作# 1. 安装 Wasp CLI若尚未安装 npm i -g wasp.sh/wasp-clilatest # 2. 进入项目目录安装依赖并迁移数据库 wasp install wasp db migrate-dev # 3. 启动应用 wasp start其中wasp db migrate-dev会执行 migrations 目录下的数据库迁移脚本initial、auth、task_users三份迁移分别对应建表、认证实体与任务/用户关联三个阶段将 Prisma schema 同步到数据库。这一流程与本教程一步步用wasp db migrate-dev添加表结构的思路完全一致也说明示例应用正是教程每一步操作累积后的最终成果。小结与下一步本章你完成了三件事用wasp new TodoApp -t minimal从 minimal 模板创建项目用wasp start一键启动了包含 client、server、database 三端的全栈开发环境并在浏览器http://localhost:3000确认了生成的应用可以正常运行。你还了解了 minimal 模板生成的项目结构以及main.wasp.ts作为应用蓝图的声明式地位。接下来的教程将逐一深入 Wasp 最核心、最有用的特性Pages页面与路由、Entities数据库实体、Queries查询、Actions动作与 Auth认证——届时你将在main.wasp.ts中写下第一个 entity、query 和 action真正开始编写属于自己的 Todo 应用业务逻辑。如果中途卡住欢迎随时查阅仓库中完整的示例实现 examples/tutorials/TodoApp 与 TypeScript 版本 examples/tutorials/TodoAppTs。【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考