Shopify embedded app dev workflow: live preview vs admin refresh?

Dev Platform
1

Hi all,

Quick workflow question from someone new to Shopify app dev :waving_hand:

When developing an embedded Shopify admin app, what is the expected way to preview UI changes?

Right now, my workflow looks like this:

  • Run shopify app dev

  • Open the app inside Shopify Admin (Apps → my app)

  • Refresh the entire admin page to see UI changes

I noticed:

  • The dev preview / tunnel URL seems to change

  • There’s a “Dev Console” panel with a preview link

  • There’s also a “Clean dev preview” option

  • When I use the preview URL (from bash or the dev panel), the web page asks to Login to a site.

My question
Is everyone really:

  • refreshing the full Shopify admin UI each time, or

  • is there a specific preview URL meant for rapid iteration (like localhost for normal React apps)?

I want to make sure I’m not fighting the platform unnecessarily or missing a recommended workflow.

Any clarity on how experienced Shopify devs handle live previewing would help a lot :folded_hands:

Thanks!

2

Hi @manojk

  1. You can either refresh the entire page or switch the menu of the embedded app. It will normally refresh automatically, with no need for a manual refresh.
  2. The URL will change each time the app is restarted. You can also specify a custom URL via a command. Here is the official documentation for reference: https://shopify.dev/docs/apps/build/cli-for-apps/networking-options
  3. We haven’t encountered the issue where a new store is logged into upon each preview yet. Could you specify which store it is exactly?
3

Hey! Thank you for your comment!

(1)- How exactly do you do this? At the moment, I have to manually update the entire dev admin dashboard each time.

(2) Will read this doc and see if it will help.

(3) When I use the https: URL (from terminal) when I run the app, I get the below on the webpage:

Log in
Shop domain
[             ]
example.myshopify.com

Sorry, I can’t find where to load the screenshot in this message box. Hope the above helps.

4

Modify the package.json file as shown in the image below. After updating the URL, you need to run the shopify app deploy command, and then you won’t have to update the dashboard manually.

图片
图片1338×604 62 KB

You can let me know which step you’ve gotten to, and I’ll guide you through the rest.

First, sign up for an ngrok account and install it on your computer. You can refer to its official documentation for this part: https://dashboard.ngrok.com/get-started/setup/windows

5

Thank you! I will give that a try and report back. Is the ngrok installation a part of the setup you just explained?

6

Yes, the --tunnel-url I configured uses ngrok. Of course, you can also use other alternatives, which are also explained in the official documentation mentioned earlier.