Enabling HMR for an embedded Shopify App that's running on Rails with shopify_app gem and webpacker

[dimanyc]

I am building an embedded Shopify app with Rails / Webpacker and shopify_app gem, which uses React on the front end. I am able to render components and enjoy all the React goodies except for one -- hot module reloading (HMR).

I know that Node / Next.js / Koa apps are able to utilize HMR and I am trying to figure out how to do this with my poor old Rails app.

I noticed that HMR polling pings are getting denied with:

ShopifyApp client received [object Object] from unknown origin [my_ngrok_instance]. Expected https://[my_store_name].myshopify.com.

Seemingly, there is no way to pass multiple origins in ShopfyApp initializer, but maybe there is a way to let Shopify know that my local dev domain is allowed. 

Here is an SO question from someone who is having the same exact issue: https://stackoverflow.com/q/56573231/3284936

[hassain]

Hey @dimanyc ,

For your React front-end, have you tried using Polaris-React? This is Shopify’s own component library used to developers create the best experience for merchants who use Shopify. You may have less issues dealing with Hot Module Reloading using this library 

Also from this GH issue I found online (https://github.com/Shopify/shopify-node-app/issues/53) this might be able to help:

"""

Resolved the hot reloading not working by changing client/index.js from

if (module.hot) {
  module.hot.accept('./index.js');
  module.hot.accept('./', renderApp);
}

to

if (module.hot) {
  module.hot.accept();
}

"""