I'm Ogasawara, CTO of Tsun Inc.!
Recently, I have been developing Shopify apps and themes.
In this blog, I will share information that is useful for Shopify development.
I hope it will be helpful for Shopify engineers!
Introduction
Tsun started developing Shopify apps in October!
We released one simple app in November and developed a second app, an app that automatically creates a table of contents.
In December 2022, we released a Shopify app that can automatically generate a table of contents.
It makes blog posts easier to read for free. Please give it a try.
We have gradually built up app development knowledge, so I would like to share app development best practices as of December 2022.
We will continue updating this article whenever best practices are added or changed.
Target audience
People who have experience developing Shopify apps, or people who want to try developing one from now on.
Shopify app development best practices
Use Shopify CLI v3
Because v2 will no longer be available after April 2023.
https://shopify.dev/changelog/cli-2-0-to-be-sunset-on-may-31-2023
Some features are only available in v2, but let's use v3.
Lint with eslint
This is not limited to Shopify app development, but you should use eslint.
Shopify also provides rules for Polaris, Shopify's official UI library.
https://github.com/Shopify/web-configs/tree/main/packages/eslint-plugin
Use GraphQL rules and any other rules according to your preference.
https://github.com/B2o5T/graphql-eslint
Use Polaris as the UI library
It includes all the basic UI components, so you can build an app that is easy enough to use with Polaris.
The Figma file is also publicly available, although it is a little old, so it is easy to create and share a simple mockup.
https://polaris.shopify.com/getting-started
Create a development-only app
Shopify CLI automatically changes the app URL and redirect URL to the URL generated by ngrok, but if you make an operation mistake, you may accidentally overwrite the production app settings with local settings.
Therefore, prepare a development-only app to prevent mistakes such as breaking the production environment settings.
If multiple people are developing the app, it is best to create a development-only app for each person.
Create a development-only store
To make it easier to isolate issues during app development, we recommend developing in a store that does not have unnecessary apps installed.
Also, if multiple people are developing, prepare a dedicated store so that you are not affected when someone else changes settings or changes the theme.
Prepare a staging environment
Again, this is not limited to Shopify app development, but instead of immediately reflecting changes from development to production, test them in a staging environment before reflecting them in production.
Of course, you also need a CI/CD environment for that.
Prepare a page for displaying Subscriptions
Prepare a dedicated page so that billing and cancellation can be tested easily.
At Tsun, as shown below, we prepare a page that retrieves active Subscriptions, displays them in an Index Table, and lets you easily cancel subscriptions with a Cancel button.
We recommend controlling it with Vite's import.meta.ENV or similar so that it is displayed only during development.
Prepare a page for displaying Webhooks
The same as Subscriptions.
Create a Subscription API endpoint for each plan
If you design it so that the plan amount and name are passed as parameters, a malicious user could change the amount and call the subscription endpoint.
Therefore, for example, if it is the Light plan endpoint, prepare a dedicated endpoint such as /api/subscriptions/light-plan.
Use Vite builds for extension development as well
To reduce asset file size and for obfuscation.
For developing rich UI theme extensions, I would also like to consider using Svelte in the future.
Deploy extensions on CI
If you switch apps and deploy each time with Shopify CLI, mistakes such as selecting the wrong app are likely to occur.
As shown at https://shopify.dev/apps/tools/cli/ci-cd, you can issue a token for CI and deploy extensions from CI.
Include a demo video URL in the listing review instructions
To reduce rework during the review, it is a good idea to submit a video that summarizes how to use the app when submitting it for review.
I recommend Loom because it is free and makes it easy to create demo videos.
Summary
This time, we introduced Shopify app development best practices as of December 2022.
It is hard enough just to keep Shopify app development information in your head, and with frequent updates, it is difficult to keep up.
We will continue updating this article whenever best practices are added or changed, so please check back!
Tsun Inc. develops Shopify apps.
If you are interested in Shopify app development, please contact Tsun Inc.
