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

除非適用法律要求或以書面形式同意，否則根據許可證分配的軟件是按照“原樣”分發的，沒有任何明示或暗示的任何形式的保證或條件。請參閱許可證，以獲取執行許可條款和限制的特定語言。