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.

Using ngrok means every request in your app jumps from an iFrame to ngrok to 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.

With lightproxy the 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 TLD?

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 http://localhost:3000 --loglevel-level=debug

CloudFlare will add the subdomain my-app to awesomedomain.com which will resolve to http://localhost:3000, this is still faster than ngrok.

That’s it! Go and get some time of your life back.