How to debug Shopify react app?

Retired Boards Appdev Tools
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!