Design a Separate Production App in Shopify

Having distinct Shopify apps for various environments such as development and production is a crucial aspect of Shopify App Development. Unfortunately, even though it is a straightforward concept, developers, particularly those who are new to Shopify Development, often struggle to grasp it because of Shopify's inadequate documentation. This results in developers spending hours trying to comprehend the concept.

The Problem

To test a Shopify app, it is necessary to establish a connection between the app on your local machine and an app in the Shopify Partner Dashboard. A new app in partner dashboard and connection to it is automatically created when you create a new app using the Shopify CLI (npm init @shopify/app@latest). After that, whenever you initiate the development server by running the npm run dev command, the Shopify CLI updates the "App URL" in app setup to point to a new ngrok URL that tunnels requests to your local development server. Feels a bit complex? Well, that's Shopify for you. Don't worry, you get the hang of it once you get your hands dirty.

Moving on, when deploying the app to production, you have to manually update the "App URL" with the URLs where your application is hosted. Therefore, it is not advisable to use the same app for further development, as running npm run dev would update the URLs to point to your local development server, resulting in a broken app in production. This is an important consideration that must be taken into account while developing Shopify apps, and all that Shopify has mentioned about this in it's documentation is this:

I have seen some people maintaining multiple identical codebases for different versions of the same app, which is not an ideal solution. This approach presents numerous challenges in keeping the codebases in sync.

Instead, I will demonstrate a simple yet elegant solution that involves creating and maintaining different apps for various environments using a SINGLE codebase. Although I will use the node template as an example, this solution should work equally well for ruby and php.

The Solution

An app can have two parts -

1. The application itself, which includes the frontend and backend and is hosted by you.
2. Theme app extensions, which are hosted by Shopify.

Since both of these components require separate hosting, they must be managed individually.

A. The application

Create a new app from the partner dashboard and utilize the app's newly generated Client ID and Client Secret to build the app in production. Let's explore this further.

1. Create a new app

Create a new app manually in the Shopify Partner Dashboard. See screenshots below for precise steps.

2. Use the new app's credentials while building app in production

Now, the precise steps will vary depending on the hosting provider you are using, but the underlying principle remains same. The environment variables must include the new app's credentials, which consist of the Client ID and the Client Secret.

For instance, if you are deploying an app using fly.io, you will need to include the new app's credentials in the fly.toml file.

Now, when you initiate npm run dev on your local machine, your app will be built and linked to the older app in your partner dashboard. However, once you push the app to production (e.g., by using flyctl deploy --build-arg in fly.io), the app will be constructed and connected to the new app in your partner dashboard.

B. Theme App Extension

The process for pushing the theme app extension to production is straightforward - instead of using npm run deploy, you should use

npm run deploy -- --reset

This clears the saved configuration for the deploy command, which is necessary because the extension was generated in an older app. When you use the --reset flag, Shopify CLI will prompt you to choose the app to which you want to deploy the theme app extension.

Note that this step does not affect the saved configuration for the npm run dev command, which means that running that command will still deploy the theme app extension to the test (older) app.

Conclusion

By following these steps, the desired outcome is achieved: running npm run dev deploys both the app and the theme app extension to the test app, while running npm run deploy -- --reset deploys only the theme app extension to production. Finally, running the deployment script (such as flyctl deploy --build-arg) deploys the app to production.

The key advantage of this approach is that you can maintain multiple apps for multiple environments using just one code repository but different configuration settings.