GraphCommerce是一个React前端框架，允许开发者创建与Magento相连的电子商务店面。
通过结合Magento的电子商务功能和React的便利性，开发人员可以获得许多功能，如：
- Next.js静态网站生成（又称SSG）能力
- 由于Next-pwa的存在，支持PWA
- Magento的电子商务功能，如购物车和结账
- 从GraphCMS存储和获取内容的能力
在本教程中，你将学习如何用GraphCommerce创建一个电子商务商店。你将发现PWA的配置和支付方式的设置。最后，你将创建你自己的GraphCMS项目，并将其与GraphCommerce项目连接。你可以跳到这些步骤中的任何一个。
第1步：创建一个GraphCommerce项目
GraphCommerce的启动项目在GraphCommerce的GitHub资源库中的examples文件夹下。
要获得这个仓库，首先要克隆它：
git clone https://github.com/graphcommerce-org/graphcommerce.git
一旦完成，你应该有一个名为graphcommerce 的文件夹。为了获得演示项目，你应该在你的 GraphCommerce 项目旁边创建一个项目（不是在它里面，因为你将删除graphcommerce 文件夹）。
为了创建这个文件夹，运行以下命令：
mkdir pwa-graphcommerce
然后，将graphcommerce/examples/magento-graphcms/ 中的启动项目复制到你之前创建的文件夹中。你也可以删除graphcommerce 文件夹，因为你不再需要它了：
cp -R graphcommerce/examples/magento-graphcms/. pwa-graphcommerce && rm -rf graphcommerce
当你的新文件夹装满了所有必要的文件后，你可以在里面移动：
cd pwa-graphcommerce
在你的pwa-graphcommerce 文件夹中，你可以创建运行你的应用程序所需的.env 。你可以直接从提供给你的.env.example文件中复制它：
cp -R .env.example .env
你还应该删除你的项目中一些不必要的文件和文件夹。
rm CHANGELOG.md
rm -rf node_modules && rm -rf .next
第2步：启动你的GraphCommerce项目
一旦你完成了第1步，你就可以启动该应用程序了。要做到这一点，你应该安装所有的依赖项：
yarn
一旦安装了依赖项，你还需要根据你的GraphQL模式和查询文档来生成你的客户端代码。你可以通过运行命令来完成这个任务：
yarn codegen
最后，你可以启动你的开发服务器：
yarn dev
如果你访问http://localhost:3000，你应该看到这个。
下面是你启动GraphCommerce项目时需要注意的一些事情。
PWA支持
PWA的功能是通过库Next-pwa提供的。当你启动你的开发服务器时，你应该在服务器日志中看到这个。
[next] > [PWA] PWA support is disabled
你可以在你的next.config.js 中看到这个配置。在里面你应该看到。
const nextConfig = {
...
pwa: {
dest: 'public',
disable: process.env.NODE_ENV === 'development',
},
...
}
删除disable 行以在你的本地服务器上启用PWA支持。
支付方式
GraphCommerce 项目提供了两种支付方式供你使用：
- Mollie
- Braintree
如果你想删除其中一种，你需要先从你的package.json 中删除。
最后，前往你的pages/checkout/payment.tsx ，在这个文件中删除它们的引用。
(可选）创建一个GraphCMS项目
你的项目目前正在使用一个演示的Magento和GraphCMS。你可以通过在.env 文件中配置API密钥来改变这一点。在本节中，你将发现如何创建你自己的GraphCMS并将其与你的项目相连接。
首先，注册Hygraph并克隆默认的启动项目。要做到这一点，请到这个地址去克隆项目：https://app.hygraph.com/clone/caddaa93cfa9436a9e76ae9c0F34d257
一旦创建，你可以从你的项目设置（左侧导航中的齿轮），然后在API访问中获得必要的API端点。在这个页面，你会看到端点部分。从那里，你可以复制内容API端点。
然后，前往你的.env 文件，用你的新网址替换GRAPHCMS_URL 演示网址。
你将不得不关闭你的服务器，并使用yarn codegen 重新生成文件。
一旦设置好了，你就可以改变你的内容并看到变化的反映。例如，进入内容>博客帖子。将你的一篇文章的标题改为Test 。
一旦你回到你的应用程序，你应该看到变化的反映。
总结
GraphCommerce是一个用React构建的前端框架。它的目的是为Magento 2开发者提供一个PWA。有了GraphCommerce，开发者可以快速而轻松地创建和定制他们的店面。
在本教程中，你学会了如何使用演示数据设置和启动GraphCommerce应用。然后，你发现了如何创建你自己的GraphCMS实例，并将其与你的GraphCommerce应用相连接。享受测试你的新应用吧。
