Skip to main content

创建 TSRPC 应用

创建项目#

使用 create-tsrpc-app 工具,可以快速创建 TSRPC 项目。

npx create-tsrpc-app@latest

创建过程是交互式的,在菜单上选择相应的配置,即可轻松创建包含前后端的 TSRPC 全栈应用项目。

note

需要 NodeJS 12 以上,可通过 npx create-tsrpc-app@latest --help 查看更多帮助信息。

tip

记得不要忘记命令末尾的 @latest,这使你总是能从最新版本的项目模板创建。

全栈项目结构#

服务端项目被命名为 backend,客户端项目被命名为 frontend,常见的目录结构如下:

|- backend --------------------------- 后端项目
|- src
|- shared -------------------- 前后端共享代码
|- protocols ------------- 协议定义
|- api ----------------------- API 实现
index.ts
|- tsrpc.config.ts --------------- TSRPC 项目配置文件
|- frontend -------------------------- 前端项目
|- src
|- shared -------------------- 前后端共享代码(Symlink)
|- protocols
|- index.ts

TSRPC 会在前后端项目中共享一些跨项目复用的代码,例如协议定义、公共类型和业务逻辑等。共享代码统一存放于前后端项目的 src/shared 目录下,shared 目录下的内容会在前后端项目间自动同步。

backend/tsrpc.config.ts 为项目配置文件,可修改相关项目配置。

运行#

在前端和后端项目下运行 npm run dev 即可启动本地服务。

cd backend
npm run dev
cd frontend
npm run dev

项目模板里已经自带了小例子,启动看看效果吧~

该命令会持续监听项目文件,当发生变化时,自动更新和重启服务。随便改几行代码保存,试试看有什么变化吧。

tip

建议总是先启动后端,再启动前端。

构建#

在前端和后端项目下运行 npm run build 即可执行构建。

cd backend
npm run build
cd frontend
npm run build

构建完成后的制品将输出到 dist 目录下,可直接用于部署。

  • frontend/dist 可以直接复制到 CDN 或文件服务器
  • backend/dist 可复制到线上 NodeJS 环境,npm install 后执行 node index.js 即可启动