example storefront

示例店面

MailChimp Open Commerce是使用Node.js，React和GraphQL构建的API-Inleds，无头商务平台。它可以与NPM，Docker和Kubernetes一起表现出色。

此示例店面将作为如何使用Reaction Commerce GraphQL API实现基于Web的店面的参考。您可以将此项目作为跳跃点分配，也可以使用自己喜欢的客户端技术创建自己的自定义体验。虽然我们认为我们的示例店面足够全功能可以在生产中使用，但您的商店目前可能缺少它的功能。

特征

MailChimp Open Commerce提供了一套强大的核心商务能力。而且，由于我们的代码库中的任何内容都可以扩展，覆盖或作为包装安装，因此您也可以自定义我们平台上的任何内容。

此示例店面是由Next.js，React，GraphQl和Apollo客户端构建的

• 无头电子商务示例店面构建了Next.js，React，GraphQl，Apollo Client
• 反应GraphQl API集成
• 服务器端渲染
• 带有强大客户身份验证的条纹付款。
• 通过细分市场或任何其他提供商的分析
• 可重复使用的，可自定义的，可自定义的电子商务对带有样式组件的示例店面组件库中的React组件
• 用ES6编写，配置为ES6
• 用Docker容器

入门

遵循快速启动指南安装并运行运行店面所需的所有服务：

目录：服务	URL
reaction ：GraphQl API	Localhost：3000/GraphQl
reaction-admin ：反应admin	Localhost：4080
reaction ：mongodb	Localhost：27017
example-storefront ：店面	Localhost：4000

注意：店面的重定向，因此，如果您打开http：// localhost：4000/graphql，您将被重定向到GraphQl Playground。

配置

设置条纹

首次运行店面和反应时，您将需要配置Stripe支付处理和运输选项，以测试完整的订单结帐流。注册条纹API键后，请按照以下步骤：

1. 将公共条纹API键（ STRIPE_PUBLIC_API_KEY ）添加到.env中。
2. 在http://localhost:4080打开反应管理应用程序。作为管理用户登录。
3. 开放付款：通过检查盒子启用条纹。添加条纹秘密密钥和公共密钥。
4. 打开运输：通过检查盒子启用扁平利率运输。通过单击表中的选项并选中框，启用至少一种扁平率运输。

设置分析事件跟踪

阅读用于设置细分市场或自定义分析跟踪器的文档

文档

• 示例店面完整文档
• 示例店面组件库存储库，文档
• 反应文档：开玩笑的测试

发展

反应平台可以使用Docker运行店面，因此您必须使用Docker命令来查看日志，在容器内运行命令等等。要专门为店面运行命令，请确保将目录更改为reaction-platform存储库中的example-storefront目录：

 cd example-storefront

使用日志以开发模式构建和运行

创建一个符号链接以使用开发Docker映像：

 ln -s docker-compose.dev.yml docker-compose.override.yml

如果在.env.example中首次运行或环境变量已更改以下命令以更新环境变量。

 ./bin/setup

通过执行开始店面：

docker-compose up -d && docker-compose logs -f

与生产API进行开发

将.env中的INTERNAL_GRAPHQL_URL更改为生产API URL。 URL应以/graphql结尾，例如： https://my-website.com/graphql 。保存.env文件，并使用以下方式重新启动应用程序

docker-compose run --rm --service-ports web yarn start

在容器中运行命令

docker-compose run --rm web [command]

在Docker容器内运行任何命令，然后卸下容器。用它来运行任何工具操作。请记住，您的项目目录将被安装，并且情况通常会正常工作。有关更多示例，请参见下面的纱线部分。

在容器中运行测试

本地运行测试

docker-compose run --rm web yarn test

在没有缓存的情况下在本地运行测试（如果不显示更改，这可能会有所帮助）

docker-compose run --rm web yarn test --no-cache

要运行SNYK安全测试（这将以与CI相同的方式运行测试）

docker-compose run --rm web sh -c " cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test "

运行Eslint

docker-compose run --rm web eslint src

用Chrome DevTools调试服务器

您可以使用Google Chrome DevTools在Docker内部运行时在Node.js应用程序服务器中调试代码。

• 运行docker-compose run --rm --publish 9229:9229 --publish 4000:4000 -e NODE_ENV=development web node --inspect=0.0.0.0:9229 ./src/server.js
• 打开Chrome并浏览到chrome://inspect 。在远程目标下找到该过程，然后单击“检查” 。

纱线命令

Yarn＆NPM应在Docker容器内运行。我们已经采取了步骤，以确保将node_modules放置在可缓存的位置。如果您在本地运行纱线，则Node_Modules将直接写入项目目录，并优先于Docker Build。纱

 docker-compose run --rm web yarn add --dev [package]

纱线安装

配x在修改Yarn.lock或Dockerfile之后，始终重建图像并启动新容器！

 docker-compose run --rm web yarn install
docker-compose down --rmi local
docker-compose up -d --build

店面的测试组件库

有时，我们需要在店面的上下文中测试示例店面组件库组件。不幸的是，在我们的Docker容器中没有一个容易的事，因此我们需要在Docker外面运行storefront 。

1. cd与您的局部reaction-component-library库。
2. git检查您要链接的适当分支
3. cd进入此存储库的package文件夹，然后运行命令yarn install然后进行yarn build
4. 构建完成后， cd进入新的dist文件夹，它刚刚构建并运行yarn link ，以允许将库安装到店面中。这将链接@reactioncommerce/components
5. 在example-storefront回购中，将您的.yarnrc文件暂时重命名为其他任何内容（即.yarnrc-temp ）
6. 运行yarn install ，然后运行命令yarn link "@reactioncommerce/components" ，以将本地版本设置为已发布的NPM版本的覆盖
7. 在.env文件中，将INTERNAL_GRAPHQL_URL更改为等于http://localhost:3000/graphql ，与EXTERNAL_GRAPHQL_URL相同
8. 通过运行命令export $(cat .env | xargs) && yarn dev在本地启动店面
9. 您的店面现在应该在localhost:4000
   • 如果您看到无法找到同行依赖软件包的错误，那似乎是纱线链接的问题。您可以将每个软件包中的每个软件包均暂时yarn add组件库package/dist文件夹中。 （无论如何，此文件夹都被刻有。）
10. 测试更改后，通过运行命令CTRL+C关闭店面
11. 在店面回购文件夹中运行yarn unlink "@reactioncommerce/components"
12. cd到reaction-component-library存储库的package/dist文件夹。运行命令yarn unlink以取消链接组件库的本地版本
13. 撤消您的.yarnrc文件的重命名
14. 删除.env文件内的URL更改

清理容器

停止并保留容器：

docker-compose stop

停止并卸下容器：

docker-compose down

停止并删除容器，卷和建造的图像：

docker-compose down -v --rmi local 

在本地构建和运行生产应用程序

有时在开发过程中有助于制造应用程序的生产并在本地运行。

运行此命令以构建docker映像，并在其中制造该应用程序的生产构建：

docker build --network=host -t  reactioncommerce/example-storefront:X.X.X .

xxx指示您要使用的标签版本，即3.1.0

然后，要在计算机上启动应用程序，请确保反应API容器已经在运行并输入：

docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X

注意：您可以用您希望在4000:4000中的结肠前替换数字，并希望使用该应用程序运行的其他Localhost端口。

注意：这不是在实际生产部署中运行应用程序的方法。这仅用于在本地运行生产，以进行开发，演示或试用目的。

要在使用上述命令启动后停止Docker容器，请使用：

docker stop reaction-storefront

贡献

查找错误，错别字或没有很好记录的东西？我们希望您能打开一个问题，告诉我们我们可以改善什么！该项目使用语义释放，请使用他们的提交消息格式。

想请求功能吗？使用我们的反应功能请求存储库来提交请求。

我们喜欢您的拉力要求！查看我们的Good First Issue ，并Help Wanted标签是否有良好的问题要解决。

拉请求指南

拉请求应通过所有自动测试，样式和安全检查。

自动测试

您的代码应通过所有接受测试和单位测试。跑步

docker-compose run --rm web yarn test

在本地运行测试套件。如果您在反应中添加功能，则应为添加功能添加测试。您可以通过传递--no-cache标志时在本地运行本地测试，而无需缓存。如果不显示更改，这可能会有所帮助。

docker-compose run --rm web yarn test --no-cache

要更新失败的快照（如果您对组件进行了更改）

docker-compose run --rm web yarn test -u

eslint

我们要求遵循反应的ESLINT规则，所有反应造成反应的代码。你可以运行

 docker-compose run --rm web eslint src

在本地与您的代码运行ESLINT。

开发人员原籍证书

我们使用开发人员的原籍证书（DCO）代替对反应商务开源项目的所有贡献的贡献者许可协议。我们要求贡献者同意DCO的条款，并通过签署对反应商务项目的所有提交来表示协议，通过在每个GIT提交消息中添加带有您的姓名和电子邮件地址的界限：

 Signed-off-by: Jane Doe <[email protected]>

如果您的user.name和user.email设置为GIT配置的一部分，则可以通过使用git commit -s自动签署提交提交。

我们要求您使用自己的真实姓名（请不要匿名贡献或假名）。通过签署您的承诺，您可以证明您有权根据该特定反应商务项目使用的开源许可提交该提交。您必须使用真实名称（不允许使用假名或匿名贡献。）

我们使用Probot DCO GitHub应用程序检查每个提交的DCO签名。

如果您忘记签署提交，DCO机器人将提醒您，并为您提供详细说明，以修改您的承诺以添加签名。

执照

版权2019反应贸易

根据Apache许可证（版本2.0（“许可”）获得许可；除了符合许可外，您不得使用此文件。您可以在

   http://www.apache.org/licenses/LICENSE-2.0

除非适用法律要求或以书面形式同意，否则根据许可证分配的软件是按照“原样”分发的，没有任何明示或暗示的任何形式的保证或条件。请参阅许可证，以获取执行许可条款和限制的特定语言。