Better Admin LogoBetter Admin
开始

快速开始

从零把五个应用跑起来:装依赖、配环境变量、初始化数据库、启动。

快速开始四步:安装依赖、配置环境变量、初始化数据库、启动1安装依赖pnpm install进入各应用目录执行2配置环境变量.env.example → .env.local密钥不入仓库3初始化数据库pnpm db:migratepnpm db:seed(Nest 端)4启动pnpm dev5173 / 5174 / 3000 …

前置要求

依赖说明
Node.js各应用均未锁 engines,以实际构建通过的版本为准(React / Next 端为 React 19 + Next 16)
pnpm全部应用统一用 pnpm。每个应用各持一份 pnpm-lock.yaml,在各自目录内独立安装
PostgreSQL统一使用 Supabase 托管的 PostgreSQL,连接端口 6543(transaction pooler)

每个应用都是独立工程

仓库不引入 workspace 依赖提升pnpm install 必须在具体应用目录里执行,不要奢望在仓库根目录一次装好全部依赖。

启动各应用

cd apps/react
pnpm install
pnpm dev        # Vite 开发服务器 → http://localhost:5173
命令作用
pnpm dev启动 Vite(端口 5173,strictPort 占用即报错)
pnpm buildtsc 类型检查 + vite build
pnpm preview预览生产构建
pnpm lintESLint(带 --fix
pnpm testVitest

端口一览

应用端口说明
NestJS3000PORT 环境变量控制
Nuxt3001nuxt dev --port 3001
Next.js3100next dev -p 3100
React5173vite.config.tsstrictPort: true
Vue5174与 React 错开,便于并排对照

跨域白名单

NestJS 默认放行 5173 / 5174 / 4173 / 3000 / 3001 / 3100 以及线上域名。需要额外放行时用 CORS_ORIGINS 覆盖,不要直接改代码里的白名单数组。

配置环境变量

每个应用目录下都有 .env.example 作为模板,复制成 .env.env.local 后填写真实值。真实密钥严禁提交到仓库。

前端可见的变量必须带公开前缀:React / Vue 用 VITE_,Next.js 用 NEXT_PUBLIC_,Nuxt 用 NUXT_PUBLIC_

# 仅这三项,全部是浏览器可见变量
VITE_APP_NAME=
VITE_APP_DESC=
VITE_API_BASE_URL=   # 本地 NestJS 形如 http://localhost:3000/api

纯前端应用没有任何服务端密钥 —— 它们只能通过 NestJS API 取数,拿不到数据库连接串。

连接串里不要写 sslmode

SSL 已在代码层统一处理(rejectUnauthorized: false)。URL 上再带 sslmode 参数会与代码设置冲突。

初始化数据库

迁移的唯一真源在 NestJS 端,其余应用共用同一个数据库,因此只需要跑一次。

cd apps/nest

pnpm db:generate   # drizzle-kit generate,由 schema 生成迁移 SQL
pnpm db:migrate    # 执行 migrationsFolder: ./drizzle 下的迁移
pnpm db:seed       # 写入种子数据(含管理员账号)
pnpm storage:init  # 初始化 Supabase Storage bucket(首次部署时执行)

迁移产物在 apps/nest/drizzle/drizzle.config.ts 指向 src/db/schema/index.ts

Next.js 端只做内省,不产迁移

apps/nextdb:pulldrizzle-kit pull 从现有数据库反向同步 schema 类型,不生成、也不执行迁移;Nuxt 端则完全没有 db: 脚本。迁移只能从 NestJS 端发起。

仓库级命令

仓库根的 package.json 只维护一个脚本:

pnpm sync-versions   # 把根 version 分发到 apps/react|vue|next|nuxt|nest

package.jsonversion 是产品级版本的唯一真源。

本页目录