【2024年版】Shopifyアプリ開発方法を初心者向けに丁寧に解説！

[2024 Edition] A detailed explanation of how to develop a Shopify app for beginners!

チュートリアル 初心者

Table of Contents

  1. Overview of Shopify
  2. Role of Shopify Apps
  3. Setting up a Shopify App Development Environment
  4. Register for a Shopify Partner Dashboard AccountStep 1: Create a new app Step 2: Start a local development serverNoteStep 3: Install your app on your development store
  5. Explanation of the app's main files and folders
  6. Deploy your Shopify appStep 1: Set up hostingSetting up hosting with Fly.ioStep 2: Retrieve your environment variablesStep 3: Set your environment variables
  7. Configure Fly.ioUpdate your fly.toml fileSet secret keysStep 4: Deploy your appStep 5: Update your URLs in the Partner Dashboard
  8. Summary

Overview of Shopify

Shopify is an e-commerce platform that allows users to easily create and operate online stores. It is designed to meet the needs of all businesses, from beginners to experienced enterprises.
Its key features include product management, customer management, order processing, inventory management, payment processing, shipping settings, SEO functions, and marketing tools. Through these features, users can build professional online stores without needing coding knowledge.
Additionally, a wide array of apps and themes are available for customization, enabling businesses to tailor their stores to their specific needs.

Role of Shopify Apps

Shopify apps are essential tools for extending the basic functionalities to meet specific business needs. For example, they are used in a wide range of scenarios, such as streamlining inventory management, enhancing customer support, automating marketing, and fulfilling unique design requirements.
There are three types of Shopify apps: free apps, paid apps, and custom apps developed for specific business requirements. Free apps provide basic functionalities, while paid apps offer more advanced features and support.
Custom apps are developed independently to meet specific business needs, providing fully customized solutions.

Setting up a Shopify App Development Environment

To develop Shopify apps, you need to install the following tools:

  1. Node.js: Node.js is a JavaScript runtime environment essential for Shopify app development. Download and install it from the official Node.js website (https://nodejs.org/).
  2. Ruby: Ruby 3.x or higher is required to use Shopify CLI. You can install it using the following methods: Download from the official website: Download and install from https://www.ruby-lang.org/. For Mac (using Homebrew): brew install ruby For Windows (using apt-get): sudo apt-get install ruby
  3. Shopify CLI: Shopify CLI is a tool that simplifies Shopify app development, deployment, and management. Install it using the following command: npm install -g @shopify/cli Basic commands are as follows: shopify login: Logs you into Shopify. npm init @shopify/app@latest: Creates a new Shopify app.

Register for a Shopify Partner Dashboard Account

To develop and sell Shopify apps, you need to register for the Shopify Partner Program. Follow these steps to register:

  1. Register for the Shopify Partner Program: Go to https://partners.shopify.com/ and create an account. By registering for the Partner Program, developers can access various features, such as creating new apps, setting up test stores, and viewing earnings.
  2. Create a new app: After logging into the Partner Dashboard, you can create a new app from the "App Management" section. Here, you'll name your app, get API keys, and more. You can also create new apps using CLI commands.

Step 1: Create a new app

You can create a new Shopify app using Shopify CLI

  1. Navigate to the directory where you want to create your app. The app is created in a new subdirectory.
  2. To create a new app, run the following command. Terminal copy $shopify app init
  3. When prompted, enter your app's name, and select Start with Remix to use the Remix template. Tip If you want to create an extension-only app, then select Start by adding your first extension. Learn more about extension-only apps. In most other cases, using the Remix template is recommended, however, you can also use other templates, or provide your own. Learn more about using other app templates. Your new app is created, and Shopify CLI installs all the dependencies that are required to build Shopify apps.

Step 2: Start a local development server

Anchor link to section titled "Step 2: Start a local development server"

After your app is created, you can work with a local development server and the Shopify CLI.

Shopify CLI uses Cloudflare to create a tunnel that makes your app accessible using an HTTPS URL.

  1. Navigate to your newly created app directory. Terminal copy $cd my-new-app
  2. Run the following command to start your app's local server. Terminal copy $shopify app dev


Shopify CLI performs the following tasks:

  • Walks you through logging in to your Partner account and selecting a Partner organization.
  • Creates an app in your Partner Dashboard and connects your local code to the app
  • Creates a Prisma SQLite database
  • Creates a tunnel between your local machine and your development store

For more information about the process that runs when you run dev, refer to the Shopify CLI command reference.

Step 3: Install your app on your development store

You can install your app on a development store and automatically add products to your development store to use for testing your app.

  1. With the server running, press p to open your app's preview URL in your browser. When you open the URL, you're prompted to install your app on your development store.
  2. To install your app on your development store, click Install app. You should now have a development store running with your new app installed.
  3. From your new app's home page, click Generate products to create products for your development store.

Explanation of the app's main files and folders

To understand the structure of an app built with Shopify's Remix template, we'll explain the roles of the main files and folders. The template's source code can be found here.

  1. Project Root: package.json: This file manages project dependencies and scripts. New packages are listed here upon installation..env: This file defines environment variables. It contains sensitive information such as API keys and secret keys.remix.config.js: The Remix configuration file, which manages build and deployment settings. tsconfig.json: The TypeScript configuration file, which defines compilation options when using TypeScript.
  2. app folder: entry.server.jsx: The entry point for server-side rendering. It handles initial rendering on the server. entry.client.jsx: The entry point for client-side rendering. It handles rendering in the browser. root.jsx: The root component for the entire application. It manages global layouts and common settings. routes: This directory stores view files. It uses file-based routing where filenames correspond to endpoints. auth.$.jsx: A component that manages authentication. It handles app installation and scope updates.app._index.jsx: A component displayed within the embedded app. It renders views after being authenticated as a Shopify app.qrcodes.jsx: A public component. This component is displayed without going through Shopify app authentication. components: Contains reusable UI components. It manages small parts that are used multiple times within the app. styles: Contains CSS files and style settings. It manages the overall design and layout of the app.
  3. public folder: favicon.ico: The application's favicon. It sets the icon displayed in the browser tab.

Understanding the structure of an app using Shopify's Remix template is fundamental for efficient development. By grasping the roles of the main files and folders and how each functions, you can develop apps more effectively. 

Deploy your Shopify app

You can use Shopify CLI to run your app using a local environment during development. However, you can also deploy your web app to test its functionality in another environment, or deploy your app to production to prepare for distribution.

Step 1: Set up hosting

To make your app available to Shopify and app users, you need to host it. For example, if you embed your app in the Shopify admin or Shopify POS using App Bridge, then you need to host your app's pages so that Shopify can display your app in an iframe or mobile web view.

All Shopify app templates include a Dockerfile with instructions for deploying your web app to a Docker container. To simplify the deployment process, we recommend choosing a hosting provider that supports Docker-based deployments.

You can host your app using any service or platform you prefer. Here, we'll use Fly.io as an example.

Setting up hosting with Fly.io

Set up hosting for your app with Fly.io.

  1. Install flyctl and sign up for Fly.io. For detailed instructions, refer to the Fly.io documentation.
  2. Navigate to your app directory: Terminal copy $cd my-app
  3. Run the following command to create a new app on Fly.io and create a fly.toml file: Terminal copy $flyctl launch

Step 2: Retrieve your environment variables

Apps created using Shopify CLI use environment variables for configuration. During local development, Shopify CLI provides environment variables directly to your environment. However, to deploy your app, you need to retrieve these variables for your app so that you can set them in a later step.

  1. Navigate to your app directory: Terminal copy $cd my-app
  2. To retrieve the values that need to be set as environment variables, run the following command using your preferred package manager:
    $shopify app env show
  3. Note the values for SCOPES, SHOPIFY_API_KEY, and SHOPIFY_API_SECRET. These values need to be set as environment variables for your hosted app.

Step 3: Set your environment variables

After you've created your hosted app, you need to set and configure its environment variables. You'll need to set the environment variables that you retrieved, as well as additional variables that are specific to your app and hosting environment.

You need to provide the following environment variables for all apps:

Variable Description
PORT The port to run your app on. For apps built using the Node app template, this variable should be set to the same value as the EXPOSE value in your Dockerfile. The default value is 8081.
SHOPIFY_APP_URL (or HOST for non-Remix apps) The Fully Qualified Domain Name (FQDN) that your app will be accessed at when it's deployed. Must include HTTPS.
APP_ENV The environment for the app. This variable is for PHP apps only and should be set to production.
SCOPES The access scopes for your app, retrieved using Shopify CLI.
SHOPIFY_API_KEY The client ID for your app, retrieved using Shopify CLI.
SHOPIFY_API_SECRET The client secret for your app, retrieved using Shopify CLI. This value should be stored securely.

Configure Fly.io

Anchor link to section titled "Configure Fly.io"

Configure your Fly.io app to run your app code and communicate with Shopify.

Update your fly.toml file

  1. Open fly.toml from your project root.
  2. In the [env] section, add your environment variables using the following format. Your config file will look like this:
...
[env]
  PORT = "8081"
  SHOPIFY_APP_URL = "https://my-app.fly.dev"
  SHOPIFY_API_KEY = ""
  SCOPES = "write_products"
...
[http_service]
  ...
  internal_port = 8081
  ...

Set the secret key

$flyctl secrets set SHOPIFY_API_SECRET=

Step 4: Deploy your app

Once you’ve added environment variables to your app, you can deploy your app by following your hosting solution's deployment process. You can also push updates to your app using this process.

The following section provides an example of the Fly.io deployment process.

Deploy to Fly.io

Run the following command to deploy your app to Fly.io:

$flyctl deploy --remote-only

Step 5: Update the URLs in the Partner Dashboard

After deploying your app, you need to update the URLs in your app's settings so that you can test and use it. You need to update the following settings to point to your hosted app:

  • App URL: The base URL of your app. This URL should match the HOST/SHOPIFY_APP_URL environment variable.
  • Allowed redirect URL(s): The callback URL for your app. This is typically the same as your app URL with /auth/callback appended.
  1. From the Partner Dashboard, go to [Apps].
  2. Select the app that you deployed to your hosting provider.
  3. On the [Configuration] page, in the URLs section, update the [App URL] and [Allowed redirect URL(s)] settings.

Below is an example of URLs you can set for Fly.io:

Hosting Provider App URL Allowed redirect URL(s)
Fly.io https://my-app.fly.dev https://my-app.fly.dev/auth/callback (Remix)
https://my-app.fly.dev/api/auth/callback (Non-Remix)

Summary

Understanding the basic steps of Shopify app development is the first step toward success. Through this article, we aimed to help even beginners confidently start app development. Let's leverage the powerful features of Shopify, develop unique apps, and evolve your business to the next level.
Shopify app development may seem difficult at first, but with the right tools and resources, anyone can create professional apps. By following basic steps such as installing Node.js and Ruby, using the Shopify CLI, registering for the Partner Program, and creating and deploying apps, you can efficiently and effectively proceed with app development.
Additionally, by using Shopify's Remix template, you can quickly set up your development environment and efficiently advance your project. Understanding the roles of key files and folders will help you grasp the app's structure more deeply and streamline the development process.
Finally, by mastering how to set environment variables when deploying apps and how to use hosting services like Fly.io, you can operate your app securely and reliably. Utilize this knowledge and technology to further develop your business.
We hope this article serves as a helpful first step into the world of Shopify app development. Continue to enjoy the challenges and learning, and develop amazing apps that provide value to many people.

Ryuji Morimoto, Representative Director, Forest Book Inc.

 

Ryuji Morimoto, Representative Director, Forest Book Inc.

As a Shopify app developer, I have worked on published apps such as SmartPick - AI Chatbot and RemPro: Product History View App, as well as many custom apps for specific merchants.
Furthermore, I am an expert in Shopify app development, operating "Tech Geek," an online school where you can learn Shopify app development.

Ryu @ Tech Geek

Leave a Comment

Comments are reviewed before being published.