We have a relatively complex app. Consisting of a Theme App Extension, a Function, and a back end using Remix, with additional React components. We have got to the stage that we would like to deploy, but foresee that there will be many more changes to be made in the future.
Shopify says:
If you’re planning on deploying your app for use in production, then consider creating a separate app. The app might use the same repository and code base that you use for development and testing, but has its own record and configuration in the Partner Dashboard.
If you use a separate app for production, then you can use your original app to test different app elements. You’ll also avoid changing your production app settings, such as app URLs, during the development and testing process.
But there does not appear to be any clear documentation on how to do a copy of an app for deployment. Could you direct me to some documentation, or let us know how we would do this.
You want to have at minimum a staging and production app. You can create a staging app by copying your shopify.app.toml file to a file like “shopify.app.staging.toml”, creating an app manually in the dev dashboard, and swapping out the client_id
Run shopify app config use in your project directory to select the staging app and then shopify app deploy to deploy it. Then you’re all set to run shopify app dev and you’ll be connected to the new staging app locally.
The reason this is the recommended approach is that the app cli is going to change the the host urls of your app when you spin up the dev server to a new cloudflare tunnel. So you really don’t want to run local dev server on your production app install once it’s live, since your live server’s host urls will get swapped and no one will be able to connect to your app.
A lot of teams will have production, staging, and then one-app-per-dev instances in the partner account. So there’s always a product/staging that exist on your actual cloud infra, and then a bunch of apps that devs use to connect locally.
There’s nothing technically speaking that makes a production app different from a staging app, except that public distribution apps have different access requirements for things like customer data.
Note: the workflow described here pertains to older-generation Partner Dashboard apps.
I am assuming this all happens within one local folder? To switch back to the production app, would you use “shopify app config use” and select the production toml?
All your app.toml files should be in your project root directory, no need to duplicate any source code.
And yes, use shopify app config use to switch back to production .toml!
Also. I need to correct something I said earlier - the tunnel url issue I mentioned no longer applies once you are migrated to the Next-Gen dev platform. Once you are on the Next-Gen dev platform, running shopify app dev creates an app preview locally in your connected dev store, but will not update the deployed urls. There’s some more information about the changes to the dev platform here