既存のNode.jsプロジェクトをShopifyアプリに接続する

shopify node createを使わずに、それでもShopify App CLIで操作できるようにする方法を調べていたので覚書。

背景

• TypeScriptで開発したい
• shopify node createで作成されるNext.jsプロジェクトだと、毎回TS化する必要がある
• yarn create next-appで自前のTS化したテンプレートを使ってセットアップしたい
• とはいえshopify node connectやshopify node serveなどは使いたい

やりたいこと

後付けでshopify node connectしたい

セットアップ

Next.jsのアプリを立ち上げます。「つなぐこと」が目的なので、今回中身は問いません。

$ yarn create next-app --typescript

.shopify-cli.ymlを自前で配置する

ルートディレクトリに自前で.shopify-cli.ymlを配置します。

---
project_type: node
organization_id: 9999999

organization_idは自身のパートナーIDを入れましょう。

shopify node connectでShopifyパートナーアカウントと連携する

.shopify-cli.ymlがあれば、あとはshopify node connectでパートナーアカウントに作成済みのアプリと接続するだけです。

% shopify node connect
 ? To which app does this project belong? (Choose with ↑ ↓ ⏎, filter with 'f')
      Testing API app
   test2
   example-nodejs
   experimental nextjs
   experimental-nextjs    

shopify node connectを実行すると、.envファイルが生成され、APIキーやShopのURL、OAuthのスコープなどが環境変数で読み込めるようになります。

おわりに

わかってしまえば簡単ですが、たぶんすぐ忘れると思うのでまとめました。

ちなみに、パートナーアカウントにアプリを作成するところまでやりたい場合は、shopify node createでアプリを作るだけ作り、.envと.shopify-cli.ymlだけを本命プロジェクトに移植するのが手取り早いです。