AI导哈

全栈React+Express模板

一个用于构建React和Express全栈应用的即用型模板，包含前后端开发、数据库连接、用户认证和测试等功能。

  • by kevinnail
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 kevinnail/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 <repository-url>
cd my-fullstack-template

  2. 安装依赖项

    npm run install-all

  3. 设置环境变量

    创建一个 .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

  4. 设置数据库

    cd server
npm run setup-db

  5. 启动开发服务器

    # 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

相关 MCP