Build Shopify apps. Everything you need to know before starting

This post is not about how to create a Shopify app step by step, which is explained very well in the dev doc, but it’s a handy list of useful information that isn’t in the documentation or isn’t very clear.

In This Article:

Shopify toolbox

Shopify comes with a ready-made development environment to work on its apps. It includes a local development server, the Shopify CLI, and a set of work tools. Let’s see them one by one:

  • Shopify CLI. It is a command line tool that allows you to perform many tasks within the Shopify app. It’s especially useful for generating the application boilerplate and basic configurations.
  • Cloudflare. Used to create the tunnel that allows the application to expose a https url. (See more about Cloudflare tunnels)
  • Remix. It’s a full stack React/Typescript framework, very young but with impressive potential. It’s not mandatory, any technology can be used to create an app on Shopify, but by using it you will have a lot of work for free.
  • Prisma. It’s a speed and performant ORM for Node.
  • Polaris. To build the UI and all the necessary components.

Cloudflare Error: “Unauthorized: Failed to get tunnel”

Is the development environment stable? Basically yes, but Cloudflare downtime may occur. In case of errors not attributable to the code, I recommend consulting the Cloudflare System Status. While working with Shopify we should always remember that not everything is under our control.

Webhooks not subscribed

This is very frustrating, even if the code is correct the webhooks are not registered. What should we do? Just restart the application with the reset parameter:

npm run shopify app dev -- --reset

When the CLI asks “Create this project as a new app on Shopify?", answer “No, connect it to an existing app” and select the app you was working on. Magically the webhooks will work.

To test the webhooks you can use the command:

npm run shopify webhook trigger

App permissions

As explained in the documentation, permissions must be configured in the file shopify.app.[NAME].toml. But they won’t work until you deploy a new version of the app

npm run deploy

Transfer the application to another partner account

It may happen that the app is created under the developer’s partner account but then needs to be transferred to the customer. In this case you must first log out of your account and then log in with the customer’s.

npm run shopify auth logout 

Authentication

No, that’s too long. We’ll talk about it in a future post. For now, you’re ready to go to Washington and make your mark.

mr-smith.jpg “Mr. Smith Goes to Washington”, Frank Capra 1939

Irene Iaccio

Freelance web developer

Subscribe to the monthly digest!

I'll use your email only to send you the latest posts once a month.