How to debug Shopify react app?

Solved
Excursionist
16 0 0

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?

0 Likes
Shopify Staff
Shopify Staff
268 36 38

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)

 

 

0 Likes
Excursionist
16 0 0

Hi @scottydont ,

 

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:

console1.pngFirst start the serverscreenshot2.jpgThen try and attach the debugger

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

0 Likes
Highlighted

Success.

Shopify Staff
Shopify Staff
268 36 38

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.

0 Likes
Excursionist
16 0 0

Hey @scottydont,

 

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!

0 Likes