Shopify Hydrogen 触ってみた
category
date
Nov 20, 2022
slug
shopify-hydrogen
status
Published
summary
Shopify Hydrogen 触ってみた
type
Post
mkdir test && cd test
yarn create @shopify/hydrogen
- 色々聞かれるので答える
yarn dev # shopify hydrogen dev
サンプルのディレクトリ構成
├── public
└── .gitkeep
├── src
└── assets
│ └── favicon.svg // ファビコン
├── routes
│ ├── index.server.jsx // ホームページを表示するためのファイル
├── App.server.jsx // トップレベルコンポーネンt
├── index.css // スタイル
├── hydrogen.config.js // ここで認証情報を設定
├── index.html // HTMLルートファイル
├── vite.config.js // Vite 設定ファイル
...
最初の素朴な疑問
- Hydrogenで使う認証情報はどの情報?
- Admin API トークンとStorefront トークン両方使うことがある
- テンプレートではconfigで両方を指定している
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fb91656aa-6c67-46dc-bdc5-db684d87f82c%2F3cab3a96-6771-4fd6-af54-37ab27e0dcd9%2F%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588_2022-11-20_13.45.41.png%3Fid%3De7cedbca-2acf-45a3-8b9b-a9b9a0e79096%26table%3Dblock%26spaceId%3Db91656aa-6c67-46dc-bdc5-db684d87f82c%26expirationTimestamp%3D1722146400000%26signature%3DFKcYSig6QZPM9LpRxtizrdEyQApI4WEPlBRCYhCJA7I?table=block&id=e7cedbca-2acf-45a3-8b9b-a9b9a0e79096&cache=v2)
- 無料でテストショップを作れる?
- ストア情報(名前、currenyなど)はAPIで取ってこれる。
- storefront同様、チェックアウトページはshopifyに移行する。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fb91656aa-6c67-46dc-bdc5-db684d87f82c%2Fcab2fdd0-706c-41d5-9d21-a77db7004db5%2F%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588_2022-11-21_8.50.44.png%3Fid%3D3b402fb8-24f6-4085-a2f1-6df308dff40d%26table%3Dblock%26spaceId%3Db91656aa-6c67-46dc-bdc5-db684d87f82c%26expirationTimestamp%3D1722146400000%26signature%3DlQsl6zt0hD3i3-JHYIB6VvRvUesr3shhMJbqZbtfHQI?table=block&id=3b402fb8-24f6-4085-a2f1-6df308dff40d&cache=v2)