如果你在使用 GitHub,可以点击仓库页面的 Use this template,基于本模板创建你自己的新仓库。
该仓库内置了一些基础示例,便于快速上手。如果你不需要这些示例,可执行:
yarn clean-up-example-code将仓库克隆到你的项目目录并启动开发:
git clone https://github.com/gilamran/fullstack-typescript.git <MyProjectName>
cd <MyProjectName>
yarn
yarn dev如果你希望把当前代码切换到你自己的远程仓库,可执行:
git remote remove origin
git remote add origin YOUR_REPO_URL
git push -u origin master- 上手简单,也因此 开发速度快。
- 客户端与服务端使用独立的
tsconfig.json。 - 客户端和服务端可共享代码与类型,例如 IUserDTO.d.ts。
- 客户端使用 Vite 打包(面向浏览器)。
- 服务端使用 TypeScript 编译输出(面向 Node.js 运行)。
Node.js 24.14.0+Chrome 79+或Firefox 72+
.
├── node_modules/ # 第三方依赖
├── dist/ # 构建输出目录(客户端和服务端产物)
├── src/ # 项目源码
│ ├── client/ # React 客户端
│ ├── server/ # Express 服务端
│ └── shared/ # 前后端共享代码/类型
├── assets/ # 静态资源(图片、图标等)
├── views/ # EJS 页面模板
├── eslint.config.mjs # ESLint 配置
├── .prettierrc.json # Prettier 配置
├── .gitignore # Git 忽略规则
├── .nvmrc # Node.js 版本约束
├── .env # 本地环境变量(默认不提交)
├── index.js # 服务端运行入口
├── package.json # 依赖与脚本配置
└── README.md # 项目说明文档- React v19
- React Router v7
- Material UI v7
- emotion
- Axios(用于客户端与服务端通信)
yarn dev:客户端与服务端同时启动开发模式(含 source map),默认打开 http://localhost:3000yarn lint:运行 ESLintyarn build:构建客户端与服务端产物到dist/yarn start:运行node index.jsyarn start:prod:设置NODE_ENV=production后运行node index.js(不经过 Vite 开发服务)
实际项目通常需要配置项(如 SLACK_API_TOKEN)。这些变量不应写入 Git 历史,并且在不同环境(开发/测试/生产)通常取值不同。
本模板通过 src/server/config.ts 统一读取配置,并支持在本地使用 .env 覆盖默认值。.env 文件默认被 Git 忽略。
- 服务端渲染(SSR)
- Redux / MobX / Zustand(状态管理库)
本项目按 MIT 协议提供。可免费用于商业或个人项目,不提供任何担保。