Shopifyでアプリを作る場合、CLIからだとRuby on RailsまたはNode.jsから選択できます。Node.jsでNext.jsやTypeScriptを使ったローカルでの開発を準備するまでの手順を覚え書きとしてまとめました。

shopify create node

アプリを作成する場合のコマンドは、shopify createです。コマンド詳細はshopify help createで確認できます。

$ shopify help create
 Create a new project.
   Usage: shopify create [ node | rails ]
 shopify create node: Creates an embedded nodejs app.
   Usage: shopify create node
   Options:
     --name=NAME App name. Any string.
     --app_url=APPURL App URL. Must be a valid URL.
     --organization_id=ID Partner organization ID. Must be an existing organization.
     --shop_domain=MYSHOPIFYDOMAIN  Development store URL. Must be an existing development store.

コマンドは対話式で進みます。

% shopify create node --name=example-nodejs

// 公開アプリか、特定のサイト向けのカスタムアプリか
 ? What type of app are you building?
      Public: An app built for a wide merchant audience.
   Custom: An app custom built for a single client.   

// Shopify CLIのOAuth認証。URLをブラウザで開き、ログインすればOK。
// ログインに成功すると続きにすすむ
 Authentication required. Login to the URL below with your Shopify Partners account credentials to continue.        
 Please open this URL in your browser:                                                                                
 https://accounts.shopify.com/oauth/authorize?cli 

// [パートナー & customの場合？]どのサイト向けかを指定する
Partner organization wpkyoto (1806496)
 ? Select a development store
      test-xxxxxx.myshopify.com

// アプリのセットアップ
 node v12.14.1                                                                                                      
  npm 6.13.4                                                                                                         
┏━━ Cloning https://github.com/Shopify/shopify-app-node.git into example-nodejs… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ┃                                                                                                                100%
 ┗━━  Cloned into example-nodejs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (4.09s) ━━
 ┏━━ Installing dependencies with npm… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ┃  Dependencies installed
 ┗━━ Dependencies installed ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (43.29s) ━━
 .env saved to project root

// 作成したアプリをPartner管理画面から確認できるURLなど
 example-nodejs was created in the organization's Partner Dashboard https://partners.shopify.com/9999/apps/0000
 Change directories to your new project folder example-nodejs and run shopify serve to start a local server
 Then, visit https://partners.shopify.com/9999/apps/0000/test to install example-nodejs on your Dev Store

作成完了後、URLにアクセスするとこのようなページが表示されました。

余談: shopify create nodeでセットアップするアプリ

表示されたメッセージの中に、「Cloning htttps://github.com/~」という記述がありました。

Node.jsなので、Express + Reactとかなのかなと思っていたのですが、思いっきりNext.js + Apolloが使われています。モダン。

TypeScript化する

実態がNext.jsにいろいろフレーバーついたものに近いので、Next.jsのサイトに紹介されてる方法でいきましょう。

$ touch tsconfig.json
$ yarn add -D  typescript @types/react @types/node
$ yarn dev

一度next devを実行すると、必要なファイルをいろいろ作ってくれます。

% git status
 On branch master
 Changes not staged for commit:
   (use "git add …" to update what will be committed)
   (use "git restore …" to discard changes in working directory)
         modified:   package.json
 Untracked files:
   (use "git add …" to include in what will be committed)
         next-env.d.ts
         tsconfig.json
         yarn.lock

なお、yarn devは実行した後すぐに止めましょう。yarn devやnext startなどでアプリをローカル起動させても、認証エラーが出るだけです。

shopify serveでローカル環境を立ち上げる

Shopify CLIのserveコマンドを使うことで、ngrokを利用したURL経由でアプリにアクセスできます。

Shopifyの認証情報を使ってアクセスする必要がありますので、ローカル開発時はshopify serveでアプリを起動させましょう。

% shopify serve
 ? Do you want to convert test-xxxxxx.myshopify.com to a development store?
 Doing this will allow you to install your app, but the store will become transfer-disabled.
 Learn more: https://shopify.dev/tutorials/transfer-a-development-store-to-a-merchant#transfer-disabled-stores
 ? Do you want to convert test-xxxxx.myshopify.com to a development store?
 Doing this will allow you to install your app, but the store will become transfer-disabled.                          
 Learn more: https://shopify.dev/tutorials/transfer-a-development-store-to-a-merchant#transfer-disabled-stores        
  (You chose: yes)
 ✓ Transfer has been disabled on test-xxxxx.myshopify.com.
 ✓ curl @ /usr/bin/curl
 ✓ tar @ /usr/bin/tar
 ✓ Installing ngrok…
 ✓ ngrok tunnel running at https://xxxxxx.ngrok.io
 ⭑ This tunnel will timeout in 1 hours 59 minutes
 ⭑ To avoid tunnels that timeout, it is recommended to signup for a free ngrok
 account at https://ngrok.com/signup. After you signup, install your
 personalized authorization token using shopify tunnel auth .
 ✓ .env saved to project root
 ? Do you want to update your application url? (You chose: yes)
 ✓ Whitelist URLS updated in Partners Dashboard                                                                       
 ⭑ To install and start using your app, open this URL in your browser:
 https://xxxxxf.ngrok.io/auth?shop=test-xxxxxx.myshopify.com
 ┏━━ Running server… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ┃ 
 ┃ > [email protected] dev /Users/sandbox/shopify/example-nodejs
 ┃ > cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js

最後に表示されたngrok.ioのURLにアクセスすれば、ローカルで立ち上げたアプリが表示されます。（要Shopifyアカウントへのログイン）