AI Agent MCP Exp

全栈React + Express模板

一个用于使用React和Express构建全栈应用程序的现成模板。

功能

• 使用Create React App的React前端
• 使用ES6模块的Express后端
• 带连接池的PostgreSQL数据库
• 使用bcrypt密码哈希的JWT认证
• Zustand用于状态管理（替代React Context）
• ESLint和Prettier已配置
• Jest和Supertest用于测试
• 并发开发服务器
• API调用的代理配置
• 带受保护路由的用户认证系统

先决条件

在设置此项目之前，请确保您已具备：

• Node.js（v16或更高版本）
• PostgreSQL数据库
• Git

快速入门

1. 克隆此存储库

   git clone 
   cd my-fullstack-template

1. 安装依赖项

   npm run install-all

1. 设置环境变量

创建一个 .env 文件在 server 包含以下变量的目录：

   PG_USER=your_postgres_username
   PG_HOST=localhost
   PG_DATABASE=your_database_name
   PG_PASSWORD=your_postgres_password
   PG_PORT=5432
   JWT_SECRET=your_jwt_secret_key

1. 设置数据库

   cd server
   npm run setup-db

1. 启动开发服务器

   # From the root directory
   npm run dev

这将同时启动React前端（端口3000）和Express后端（端口5000）。

可用脚本

根级别

• npm run dev 以开发模式启动前端和后端
• npm run install-all 为所有项目安装依赖项
• npm run test 为前端和后端运行测试
• npm run lint 为两个项目运行代码检查
• npm run format 为两个项目编写格式代码

客户端（前端）

• npm run client 启动 React 开发服务器
• npm run build 为生产环境构建
• npm test 运行React测试
• npm run lint - 验证React代码
• npm run format 格式化 React 代码

服务器（后端）

• npm run server 启动Express服务器
• npm run start:watch 使用 nodemon 启动服务器进行开发
• npm test 运行服务器测试
• npm run setup-db 设置数据库表
• npm run lint - 服务器代码的静态检查
• npm run format 格式化服务器代码

项目结构

├── client/                 # React frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── stores/         # Zustand stores
│   │   ├── hooks/          # Custom hooks
│   │   └── services/        # API services
│   └── public/             # Static assets
├── server/                 # Express backend
│   ├── lib/
│   │   ├── controllers/    # Route controllers
│   │   ├── middleware/     # Express middleware
│   │   ├── models/         # Data models
│   │   ├── services/       # Business logic
│   │   └── utils/           # Utility functions
│   ├── sql/                # Database setup files
│   └── __tests__/          # Server tests
└── package.json            # Root package configuration

数据库设置

该项目使用PostgreSQL。请确保已安装并运行PostgreSQL：

1. 为你的项目创建一个数据库
2. 更新环境变量中的内容 server/.env
3. 跑 npm run setup-db 从服务器目录中创建表

认证

模板包含一个完整的认证系统：

• 用户注册和登录
• 基于JWT令牌的身份验证
• 使用bcrypt进行密码哈希
• 前端的受保护路由
• 后端的身份验证中间件

开发提示

• React应用运行在 http://localhost:3000
• Express API运行在 http://localhost:5000
• 来自React的API调用会自动代理到后端
• 使用 npm run dev 同时启动两个服务器
• 检查浏览器控制台和终端中的任何错误

生产部署

1. 构建React应用： cd client && npm run build
2. 设置生产环境变量
3. 启动服务器： cd server && npm start

故障排除

• 数据库连接问题在中验证您的PostgreSQL凭据 .env
• 端口冲突确保端口3000和5000可用
• 模块错误跑 npm run install-all 确保所有依赖项都已安装
• 认证问题请检查你的环境变量中是否设置了JWT_SECRET