Test apps locally

The app dev command lets you test your app changes in real-time on a dev store without deploying. This enables you to iterate quickly while developing extensions, modifying app configuration, and building app functionality.

Anchor to Overview of ,[object Object]Overview of app dev

To preview your app on a dev store, Shopify CLI prompts you to select a dev store to use for testing. If you have only one store, then it's selected automatically.

While running, app dev performs the following tasks:

• For apps with local app configuration and/or extensions, it creates an app preview on your chosen dev store, and a file watcher to sync local changes with that app preview.
• For apps with web files, such as those based on the React Router app template, it serves your self-hosted embedded app.
• For apps with extensions that support browser-based preview, such as UI extensions, it starts a local development server for hot module reloading.
• It serves a reverse proxy that routes to these local servers.
• It sets up external networking for that proxy server.
• If enabled in your app config, it updates your app URL to reflect the current tunnel or localhost URL.
  • This change is isolated to the chosen dev store and does not affect the app URL on other stores.
• It serves GraphiQL for the Admin API using your app's credentials and access scopes.

Anchor to When ,[object Object], stopsWhen app dev stops

When you stop the app dev command, the app preview remains on your store. Your app configuration and extensions will remain active there, unless you run app dev clean:

The app dev clean command restores the active released version of your app on your store. If any extensions or configuration are removed in this process, their related data is deleted as well. For example:

• A Discount function you added during app dev isn't in the active app version. Any discounts referencing it are deleted.
• A UI extension you placed and configured via the Checkout Editor isn't in the active app version. This placement and configuration are deleted.

Anchor to Reset ,[object Object], configurationReset app dev configuration

You can reset the active organization, app instance, and store used by app dev via the --reset flag:

Anchor to Develop and test apps as a teamDevelop and test apps as a team

Because changes are isolated to a single dev store, app development teams can safely share a single development instance of an app. The recommended approach for app development teams is:

Anchor to Step 1: Create a shared development app instanceStep 1: Create a shared development app instance

If necessary, create a development instance and configuration file for your app using app config link. This development instance will be shared by all team members.

Anchor to Step 2: Onboard individual team membersStep 2: Onboard individual team members

As a team member, you should:

1. Create your own dev store in the Dev Dashboard.

   Note

   The app dev command will push configuration and extension changes to your chosen dev store. It's important to have your own store, so that you can work in isolation from other team members.

2. If necessary, switch to the development configuration of your app with app config use.

3. Run app dev and choose your dev store:

   Terminal

   Copy

   $

   $

   shopify app dev

Anchor to Changes introduced in the Next-Gen Dev PlatformChanges introduced in the Next-Gen Dev Platform

With the Next-Gen Dev Platform, the app dev command significantly improves the experience, safety, and functionality of testing your app locally.