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 , 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 ( ). After that, whenever you initiate the development server by running the 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. Shopify app npm init @shopify/app@latest npm run dev 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 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: npm run dev 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 and . ruby php The Solution An app can have two parts - The application itself, which includes the frontend and backend and is hosted by you. 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 and to build the app in production. Let's explore this further. Client ID Client Secret 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 and the . Client ID 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 file. fly.toml Now, when you initiate 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 in fly.io), the app will be constructed and connected to the new app in your partner dashboard. npm run dev flyctl deploy --build-arg B. Theme App Extension The process for pushing the theme app extension to production is straightforward - instead of using , you should use npm run deploy 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 flag, Shopify CLI will prompt you to choose the app to which you want to deploy the theme app extension. --reset Note that this step does not affect the saved configuration for the command, which means that running that command will still deploy the theme app extension to the test (older) app. npm run dev Conclusion By following these steps, the desired outcome is achieved: running deploys both the app and the theme app extension to the test app, while running deploys only the theme app extension to production. Finally, running the deployment script (such as ) deploys the app to production. npm run dev npm run deploy -- --reset flyctl deploy --build-arg 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. Lead image source: Firmbee from Pixabay Hit me up if you need more help in setting this up. I would be happy to help. here

This story contains new, firsthand information uncovered by the writer.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

My Blog

Read My Stories

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

Design a Separate Production App in Shopify

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Top Industries To Be Transformed By Artificial Intelligence, Soon

10 Essential Mobile App UI Design Principles for Building Outstanding Apps

11 AI & ML App Ideas For Startups and SME’s In 2019

11 Best Low-Code And No-Code Platforms in 2021

11 Tips to Save Time on App Development & Launch Processes

10 Top Industries To Be Transformed By Artificial Intelligence, Soon

10 Essential Mobile App UI Design Principles for Building Outstanding Apps

11 AI & ML App Ideas For Startups and SME’s In 2019

11 Best Low-Code And No-Code Platforms in 2021

11 Tips to Save Time on App Development & Launch Processes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps