Shopifyの開発環境をVSCodeで構築

前提

OS：Windows11

Gitはインストール済

Gitインストールまだの場合は以下参照。

https://qiita.com/T-H9703EnAc/items/4fbe6593d42f9a844b1c#%E6%89%8B%E9%A0%861%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%A9%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89

Rubyをインストールする

https://rubyinstaller.org/downloads

から

rubyinstaller-devkit-3.2.3-1-x64.exe（2024/4/14時点）

ダウンロード＆実行

コマンドプロンプトが表示されるため

「1-MSYS2 bas installation」

を選択

完了したら、新たにコマンドプロンプトを出して

ruby -v

バージョンが表示されるのでRubyが導入されていることを確認

Node.jsをインストールする

https://nodejs.org/en

から

node-v20.12.2-x64.msi（2024/4/14時点）

ダウンロード＆実行

その際、ネイティブモジュールツールのインストールをチェックしとく

完了したら、新たにWindows PowerShellを出して

node -v
npm -v

バージョンが表示されるので確認

※セキュリティ設定によってはWindows PowerShellで以下のコマンド必要

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process 

参考

https://qiita.com/ponsuke0531/items/4629626a3e84bcd9398f

ローカルのVSCodeに開発環境

※セキュリティ設定によってVSCodeターミナルで以下のコマンド必要

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process 

VSCodeを起動したらターミナルを開いて

cdコマンドで作業するディレクトリへ移動

cd D:\Develop\Shopify\CHIHARA_COFFEE（例）

Shopifyストアを接続

shopify theme list --store ストア名

ログイン情報入力後、ログイン成功画面がブラウザ出でたら成功

ストア名とはshopify管理画面で
設定＞ドメイン
の「xn-aaaaaaaa.myshopify.com」（例）の「xn-aaaaaaaa」の部分

既存のテーマをローカル環境に取り込む

shopify theme pull --store ストア名

ローカルの作業ディレクトリにテーマがダンロードされる。

ローカルで起動する

VSCodeを起動したらターミナルを開いて

cdコマンドで作業するディレクトリへ移動

shopify theme dev --store ストア名

ローカルで動くURLが発行される。

[1] のURLリンクをクリックするとブラウザに出る。

※パスワードはshopify管理画面で
オンラインストア＞各種設定