Wern-Fullstack-模板项目指南

史艾岭

于 2024-08-31 09:52:36 发布

阅读量763

点赞数 15

本文链接：https://blog.csdn.net/gitblog_00732/article/details/141746705

版权

Wern-Fullstack-模板项目指南

Wern-Fullstack-TemplateReact, Next.js, MaterialUI, Styled-Components, TypeGraphQL, URQL, ApolloServer (express), TypeORM, PostgreSQL, Node.js, TypeScript 项目地址:https://gitcode.com/gh_mirrors/we/Wern-Fullstack-Template

1. 项目目录结构及介绍

此项目基于全栈开发的需求设计，以下是其详细的目录结构及其功能简介：

├── client                    # 客户端源代码
│   ├── src                   # 主要源码目录
│   │   ├── components        # 共享组件，包括基础元素（elements）和模块化组件(modules)
│   │   ├── config            # 应用配置文件
│   │   ├── generated         # 自动生成的代码，如TypeGraphQL的类型定义
│   │   ├── graphql           # GraphQL相关的查询、突变和片段定义
│   │   │   ├── fragments
│   │   │   ├── mutations
│   │   │   └── queries
│   │   ├── hooks             # React Hooks
│   │   ├── pages             # 页面组件，Next.js页面路由存放地
│   │   │   └── api            # API路由相关页面
│   │   ├── providers         # 钩子和服务提供者，例如Apollo客户端的设置
│   │   └── public            # 静态资源，如字体文件等
│   ├── .env                  # 客户端环境变量配置
│   └── next.config.js        # Next.js配置文件
│   
└── server                    # 后端服务源代码
    ├── env                   # 环境变量配置文件
    ├── src                   # 主服务器源码目录
    │   ├── index.ts          # 入口文件，包含数据库连接逻辑和Apollo服务器初始化
    │   ├── migrations        # 数据库迁移脚本，用于管理数据库结构变化
    │   └── ...               # 其他业务逻辑文件
    ├── package.json          # 包含后端依赖和scripts命令
    ├── ormconfig.ts          # TypeORM的数据库配置文件
    └── README.md             # 后端特定的说明文档

2. 项目的启动文件介绍

客户端启动

客户端的启动主要通过以下步骤进行：

npm install: 在客户端目录下安装所有依赖。
npm run dev: 这将启动Next.js的开发服务器，让你可以在本地查看和调试前端应用。

服务器启动

对于服务器部分，需要先确保PostgreSQL数据库正在运行，并正确配置DATABASE_URL环境变量。然后执行以下命令：

npm install: 安装服务器端的依赖。
更新DATABASE_URL: 根据实际情况在server/env中配置正确的数据库连接URL。
数据库迁移（可选，如果你需要数据库表结构）: 解注释server/src/index.ts中的await conn.runMigrations();以执行迁移。
npm run build && npm run start: 构建服务器端应用并启动它，或者直接使用npm run dev2进行开发模式下的启动。