Developing an embedded Shopify app using React can be a frustrating experience. Following their recommended approach using
ngrok means you’ll have a super long feedback loop, which will probably make you waste between 15 to 30 seconds to see every change.
I almost went crazy with it. If you are reading this, you probably felt the same way or even worse you’ve already gone mad.
ngrok means every request in your app jumps from an
localhost. On top of that, if you are using React chances are you are getting throttled.
To make your app development faster, get rid of
ngrok and use something like https://github.com/octavore/lightproxy which gives you a way to “securely” proxy request to any port in localhost.
iFrame will talk directly to
localhost. Explaining how it works is outside of the scope of this post, I encourage you to do your own research and think about the security implications behind it. For example, what happens if
wip becomes a supported
One downside of this approach is that if you are playing with webhooks, you won’t be able to receive those messages. In that situation, get rid of
ngrok and use a CloudFlare tunnel, which is free, faster, and lets you create your own domains for no extra cost.
If you do the following:
cloudflared tunnel --hostname my-app.awesomedomain.com --url
CloudFlare will add the subdomain
awesomedomain.com which will resolve to
this is still faster than
That’s it! Go and get some time of your life back.