【Shopify CLI】VScodeからShopify開発できるようにする
あらすじ
下記を参照して行う。
前提環境
- WSL (Ubuntu)
- Windows 11
- VScode (cursor)
- Homebrew
あとは適当でお願いします。
インストール
いつものをしておきましょう。
sudo apt update
sudo apt upgrade
brew tap shopify/shopify
brew install shopify-cli
インストールしたら version を叩いて動作確認。
shopify version
テーマをいじる
基本的に下記を見れば解決すると思います。
- インポート
- いじる
- ショップに反映 (push)
- ショップでいじったものを逆に反映 (pull)
テーマのインポート
shopify theme pull
で行けるんですが、 --store= オプションを付けないと怒られるので設定しましょう。
また、環境変数で SHOPIFY_FLAG_STORE を指定することで回避することができます。
環境変数に固定する場合、開発時に切り替えるのがめんどくさくなるかもなので個人的には非推奨です。
╭─ error ──────────────────────────────────────────────────────────────────────╮
│ │
│ A store is required │
│ │
│ Specify the store passing `--store={your_store_url}` or set the │
│ `SHOPIFY_FLAG_STORE` environment variable. │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
コマンドを実行すると、ログインを求められるのでログインします。
そうしたらテーマを選択します。
╭─ warning ────────────────────────────────────────────────────────────────────╮
│ │
│ It doesn't seem like you're running this command in a theme directory. │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
なんか言われますが無視して続行します。
続行するとテーマが pull されます。
テーマをいじる
単純にいじって push して確認、もいいんですが、
ローカルでストアをカスタマイズしてテストする方法があるのでこれで弄りましょう。
shopify theme dev
を実行します。
パスワードでストアを保護している場合、ストアにかけているパスワードを求められるのでこれを入力します。
そうしたらローカルで開発する環境ができるので表示に従います。
╭─ success ────────────────────────────────────────────────────────────────────╮
│ │
│ Preview your theme │
│ • http://127.0.0.1:9292 [1] │
│ │
│ Next steps │
│ • Preview your gift cards [2] │
│ • Customize your theme at the theme editor [3] │
│ • Share your theme preview [4] │
毎回 shopify theme dev をタイプするのが大変だと思うので、vscode で launch.json を書いておくと便利だと思います。
今回 brew で入れましたが、 which shopify で場所を確認して json を記述しておきます。
{
"version": "0.2.0",
"configurations": [
{
"name": "Shopify Theme Dev",
"type": "node",
"request": "launch",
"program": "{which shopifyで出たパス}",
"args": [
"theme",
"dev"
],
"cwd": "${workspaceFolder}",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
これで F5 を押せばデバッグできるようになりました。
好きなようにテーマをいじってください。
Push
テーマをいじったら、shopify 側にテーマを反映させます。
pull の反対は push なので push します。
shopify theme push
個人的な使い方
dev で自動生成されるテーマだけで開発するのもいいんですが、
僕のやり方が悪いのか反映されないことが多々あり何度かやり直しを喰らいました。
ので、開発用のテーマを明示的に作っておいて
それを push したり pull したりするのが確実かなと思います。