How to debug Shopify react app?

Retired Boards Appdev Tools

AI-generated summary

Debugging a Shopify app generated with Shopify CLI in VS Code was the main issue. The app runs locally on localhost:8081 and is exposed through an ngrok URL, but trying to attach the Chrome debugger directly to localhost or the ngrok root caused a 400 Bad Request on /auth, because the app flow expects a valid Shopify store context.

Key clarification and workaround:

  • The debugger can be attached using the URL https://<ngrok-url>/auth/inline?shop=<test-shop-url>.
  • ngrok is the tunneling service that exposes the local app publicly.
  • The app also needs Embedded app disabled in the Shopify app settings, so it can be opened outside the Shopify admin iframe while debugging.

The screenshots were relevant because they showed the attempted VS Code Chrome attach configuration. The discussion reached a partial resolution: the missing embedded-app setting was identified, but there was still an open question about why the app continued redirecting into Shopify after disabling it, possibly due to a delay in settings propagation.

1

I used the shopify-cli tool to generate a React app. When I run Shopify serve the server starts on http://localhost:8081 and it gets exposed on https://xxxxxxxx.ngrok.io.

How can I debug the app code?

I tried with VS code with the debugger for chrome, but either url provided (localhost or ngrok)

Failed to load resource: the server responded with a status of 400 (Bad Request) [https://xxxxxxxx.ngrok.io/auth]

This makes sense to me since the debugger is not a dev store, but how can I debug the app?

2

Hey @PhilippW ,

When you run shopify create project , a new folder will be created in the current directory.

For example:

$ shopify create project my-app *(creates and changes into the my-app directory)*
$ code . *(opens the current directory in VS code)*
3

Hi @SBD ,

Thanks for your reply. I know how to open the project in VScode, but how can I attach the debugger successfully?

I am trying to do it just like a react app, since it is a react app:

First start the server
First start the server1830×942 41.2 KB

Then try and attach the debugger
Then try and attach the debugger3360×1900 602 KB

Please let me know if you know how to debug this generated app.

4

Hey @PhilippW ,

Apologies, I misunderstood. I was able to attach the debugger by setting the URL to https:///auth/inline?shop= and disabling ‘embedded app’ from the App settings.

5

Hey @SBD ,

Thanks! I was missing the ‘embedded’ app part

I disabled “Embedded app” in Shopify App Bridge in App settings, the app still redirects and loads in Shopify for some reason. I’m guessing it might take some time to update? I will update how it goes. Thank you so much!