Reaction Commerce 示例商城前端搭建指南

Reaction Commerce 示例商城前端搭建指南

example-storefront Example Storefront is Reaction Commerce’s headless ecommerce storefront - Next.js, GraphQL, React. Built using Apollo Client and the commerce-focused React UI components provided in the Storefront Component Library (reactioncommerce/reaction-component-library). It connects with Reaction backend with the GraphQL API. 项目地址: https://gitcode.com/gh_mirrors/ex/example-storefront

本指南旨在帮助您了解并快速启动 Reaction Commerce 的示例商城前端项目。此项目采用现代化技术栈，包括 Next.js、GraphQL、React 及 Apollo Client，提供了一个与 Reaction 商城后台对接的头less电商解决方案。

1. 项目目录结构及介绍

项目遵循清晰的结构设计，以支持高效的开发工作流程：

• components: 包含可复用的 React 组件。
• containers: 集成多个组件且具有特定业务逻辑的容器组件。
• hocs: 高阶组件(Higher-Order Components)，用于增强其他组件的功能。
• hooks: 自定义的 React Hooks，提高代码复用性。
• lib: 公共函数库和实用工具集。
• pages: Next.js 页面文件，定义了应用的路由和视图。
• public: 静态资源，如图片和非动态HTML文件。
• staticUtils: 静态实用程序方法。
• translation: 国际化翻译文件。
• types: 类型定义文件，用于TypeScript项目增强类型安全。
• 配置相关：
  • babelrc: Babel配置。
  • docker-compose.yml(及dev.yml): Docker编排文件。
  • editorconfig: 编辑器配置。
  • env.example 和 env.prod: 环境变量模板。
  • graphqlrc: GraphQL客户端配置。
  • package.json: 项目依赖及脚本命令。
  • tsconfig.json: TypeScript编译配置。

2. 项目的启动文件介绍

核心启动逻辑不直接体现在单个“启动文件”中，而是通过 Docker Compose 进行管理。主要入口点是通过 Docker 容器运行的应用程序。您可以通过以下步骤启动项目：

• 开发模式: 使用 docker-compose.dev.yml 文件，执行 docker-compose up -d 命令在开发环境下启动服务。
• 生产环境配置: 修改对应的环境变量后，使用 docker-compose.yml 启动生产环境配置。

3. 项目的配置文件介绍

• .env.* 文件: 项目的核心配置位于环境变量中。比如 .env.example 提供了配置项的模板，实际运行时应将敏感信息放入 .env.prod 或相应环境的配置文件中。
• package.json: 除了列出项目依赖，还定义了一系列npm脚本，例如构建、启动、测试等操作的快捷方式。
• docker-compose.yml 与 docker-compose.dev.yml: 定义了开发和部署环境的容器服务，包括数据库、API服务器与前端应用的配置。
• 内部配置: 在源码中的某些.js配置文件，例如可能存在的API连接配置或Next.js的自定义配置，这些都是基于项目需求进行定制的地方。

快速启动步骤概览

1. 克隆项目: git clone https://github.com/reactioncommerce/example-storefront.git
2. 环境准备: 根据需要调整.env文件。
3. 安装依赖: 进入项目目录，初次运行前需执行 docker-compose run --rm web yarn install。
4. 开发模式启动: cd example-storefront 后执行 docker-compose up -d 并通过 docker-compose logs -f 跟踪日志。
5. 访问: 应用通常监听于 http://localhost:4000，API交互则通过 http://localhost:4000/graphql（开发环境下可能自动跳转到GraphQL Playground）。

通过上述指南，您能够顺利设置并开始探索 Reaction Commerce 的示例商城前端项目。

example-storefront Example Storefront is Reaction Commerce’s headless ecommerce storefront - Next.js, GraphQL, React. Built using Apollo Client and the commerce-focused React UI components provided in the Storefront Component Library (reactioncommerce/reaction-component-library). It connects with Reaction backend with the GraphQL API. 项目地址: https://gitcode.com/gh_mirrors/ex/example-storefront