I have a question regarding how to set up or go about having different environments for one checkout UI application, the application is already completed and is working for our internal company that is already using it in one of our stores. I personally have created the appropriate .toml files to target dev, staging, and production environments but we run into issues when another team mate is trying to work on the checkout ui extension where the .toml files are missing, thankfully I have my local .toml file where I push force to the checkout ui extension.
Is there a guide or any asssitance on how to setup a team working flow for checkout ui extensions that multiple developers are able to work on? Additionally let’s say someone who isn’t a dev will want to re-deploy this application on another shopify plus store without the need of an assistance of a developer, is it possible for them to install without having to run the Shopify CLI?
Good question - so the way we’ve handled it is using a remote development environment or docker-compose for example, so that way the setup for a given environment is scripted.
Then what you can do is create .toml files per developer and staging and production.
In development, you can pass a flag to shopify dev to use a specific .toml file for the active person using the app.
Here’s an example snippet:
// link the current user's Shopify app public key to the current toml
npx shopify app config link --client-id=$SHOPIFY_API_PUBLIC_KEY --config shopify.app.toml
// then open the developer's specific store
npx shopify app dev --client-id $SHOPIFY_API_PUBLIC_KEY --store $SHOPIFY_EXTENSION_UI_STORE_URL
We make heavy use of ENV variables to change the context of the environment based off of the person running the environment.
So we have a separate Shopify App per developer, and staging vs production. Then we have a separate development store per developer, staging and production.