How to debug Shopify react app?

[PhilippW]

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?

[SBD_]

Hey @PhilippW,

When you run shopify create project <some-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)

[PhilippW]

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 serverThen try and attach the debugger

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

[SBD_ · Accepted solution]

Hey @PhilippW,

Apologies, I misunderstood. I was able to attach the debugger by setting the URL to https://<ngrok url>/auth/inline?shop=<test shop url> and disabling 'embedded app' from the App settings.

[PhilippW]

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!