水素デモストア

水素テンプレート: デモストア

Hydrogen は、Shopify のヘッドレス コマース用スタックです。 Hydrogen は、Shopify のフルスタック Web フレームワークである Remix と連携するように設計されています。このテンプレートには、Hydrogen を使い始めるためのコンポーネント、クエリ、ツールのフル機能のセットアップが含まれています。水素.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

Customer Account 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を含めるか、空白のままにします。