Zenn
💻

Shopify Node.js アプリ開発の環境をつくる

2020/12/26に公開
Shopify
tech

前提

新しい Node.js アプリプロジェクトを作成する

新しいNode.jsプロジェクトを作成するには、shopify create nodeと入力します。
次にアプリ名を入力します。アプリ名がプロジェクトのディレクトリ名となります。この記事では、appDev とします。

$ shopify create node
? App Name
> appDev

次に、開発するアプリのタイプ(公開またはカスタム)を聞かれます。

? What type of app are you building? (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Public: An app built for a wide merchant audience.
  2. Custom: An app custom built for a single client.

開発するアプリのタイプを選ぶと、Shopify Partnersアカウントの認証が必要になるので、表示されているURLにアクセスします。(すでにログイン済みの場合は表示されません)

𝒾 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?client_id=(略)

認証に成功すると、以下のように表示されるので、そのページは閉じます。

Authenticated successfully. You may now close this page.

Shopify パートナーアカウントを選択します。

? Select partner organization
>

アカウントを選択すると、アプリ名でディレクトリが作られ、アプリ開発のベースとなるファイル群がダウンロードされます。

✓ .env saved to project root
✓ appDev was created in the organization's Partner Dashboard https://partners.shopify.com/XXXXXXXX/apps/XXXXXXXX
⭑ Change directories to your new project folder appdev and run shopify serve to start a local server
⭑ Then, visit https://partners.shopify.com/XXXXXXXX/apps/XXXXXXXX/test to install appDev on your Dev Store

.env ファイルには、SHOPIFY_API_KEY, SHOPIFY_API_SECRET, SHOP, SCOPES が記載されています。

プロジェクトのディレクトリに移動します。

$ cd appDev

次に、ローカル開発サーバを起動します。

$ shopify serve

✓ ngrok tunnel running at https://xxxxxxxxxxxx.ngrok.io
⭑ This tunnel will timeout in 7 hours 33 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 <token>.
✓ .env saved to project root
? Do you want to update your application url? (Choose with ↑ ↓ ⏎)
> 1. yes
  2. no

アプリケーションURLをアップデートしますか?と聞かれるので、1. yesを選択します。
次に以下のように表示されるので、表示されているURLにアクセスします。

⭑ To install and start using your app, open this URL in your browser:
https://xxxxxxxxxxxx.ngrok.io/auth?shop=[開発ストア].myshopify.com

すると、開発ストアにリダイレクトされ、アプリのインストール画面が表示されます。

「未掲載アプリをインストールする」をクリックして、インストールします。
以下のように表示されれば、インストール完了です!

表示を変えてみる

試しに、pages/index.jsを開き、Shopify app with Node and React 🎉を任意のテキストに書き換えてみましょう。

pages/index.js
import { Heading, Page } from "@shopify/polaris";

const Index = () => (
  <Page>
    <Heading>アプリ開発を始めてみよう!</Heading>
  </Page>
);

export default Index;

ブラウザのリロードしなくても、表示が変わっていればOKです。

Shopifyアプリ開発をスタートさせよう

ここまでで、アプリ開発チュートリアルの 3 まで終わっていることになります。

下準備はできたので、ここからアプリの実装を始めることができます。

それでは、快適な Shopifyアプリ開発ライフを🥳

Discussion