氫演示店

氫模板：演示商店

Hydrogen 是 Shopify 的無頭商務堆疊。 Hydrogen 設計用於與 Shopify 的全端 Web 框架 Remix 相配合。此範本包含用於開始使用 Hydrogen 的功能齊全的組件、查詢和工具設定。它部署在 Hydro.shop

查看 Hydrogen 文件 熟悉 Remix

包含什麼

• 混音
• 氫
• 氧
• Shopify CLI
• ESLint
• 更漂亮
• GraphQL 生成器
• TypeScript 和 JavaScript 風格
• Tailwind CSS（透過 PostCSS）
• 組件和路線的全功能設置

入門

要求：

• Node.js 版本 18.0.0 或更高版本

npm create @shopify/hydrogen@latest -- --template demo-store

請記住使用您商店的網域和 Storefront API 令牌更新.env ！

生產建築

npm run build

當地發展

npm run dev

使用客戶帳戶 API 的設定（ /account部分）

使用 ngrok 設定公共域

1. 設定 ngrok 帳戶並新增永久網域（即https://.app ）。
2. 安裝 ngrok CLI 以在終端機中使用
3. 使用ngrok http --domain=.app 3000啟動 ngrok

在客戶帳戶 API 設定中包含公共網域

1. 前往您的 Shopify 後台 => Hydrogen或Headless應用程式/頻道 => 客戶帳戶 API => 應用程式設定
2. 編輯Callback URI(s)以包含https://.app/account/authorize
3. 編輯Javascript origin(s)以包含您的公共域https://.app或將其保留為空
4. 編輯Logout URI以包含您的公共域https://.app或將其保留為空