Shopifyの開発環境をVSCodeで構築
前提
OS：Windows11
Gitはインストール済
Gitインストールまだの場合は以下参照。
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をインストールする
から
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管理画面で
オンラインストア＞各種設定
コメント