Solved

How to debug Shopify react app?

PhilippW
Excursionist
17 0 2

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?

Accepted Solution (1)
SBD_
Shopify Staff
1829 269 407

This is an 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.

Scott | Developer Advocate @ Shopify 

View solution in original post

Replies 4 (4)

SBD_
Shopify Staff
1829 269 407

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)

 

 

Scott | Developer Advocate @ Shopify 

PhilippW
Excursionist
17 0 2

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

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

SBD_
Shopify Staff
1829 269 407

This is an 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.

Scott | Developer Advocate @ Shopify 

PhilippW
Excursionist
17 0 2

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!