How to develop with Shopify's App Bridge while on localhost?

Question

Initializing Shopify's AppBridge in React requires an apiKey and shopOrigin. I fetch the data and load my dev-server up but am met with errors:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://example-test-app.myshopify.com') does not match the recipient window's origin ('http://localhost:3000')

Nothing related to the AppBridge works in this state.

I've found the only way to satisfy this error is to create a js build and have it served as static assets through my node server, and then accessing the app through Shopify admin. This way the target origin specified will match the recipient window's origin, but I'd like to avoid creating a build after every frontend change. Is there any other way I can configure AppBridge or work around it such that I can continue working on my frontend on localhost where I can utilize hot-module reloading with webpack?

// app.component.tsx

import { AppProvider } from '@shopify/polaris';
import { Provider } from '@shopify/app-bridge-react';

const AppComponent: React.SFC<AppProps> = ({
}) => {
  const appBridgeConfig = {
    apiKey: process.env.API_KEY,
    shopOrigin: shopDomainName,
  };


  return (
    <AppProvider i18n={{}}>
      <Provider config={appBridgeConfig}>
        <Dashboard />
      </Provider>
    </AppProvider>
  );
};

// Dashboard.component.tsx

import { Context, Loading } from '@shopify/app-bridge-react';

export const Dashboard: React.SFC<DashboardProps> = () => {
  return (
    <Context.Consumer>
      {app => {
        console.log('app: ', app);
        console.log(
          'appstate: ',
          app?.getState().then(res => {
            console.log('res: ', res);
          }),
        );
        return (
          <div>
            <Loading />
            <div>Testing</div>
          </div>
        );
      }}
    </Context.Consumer>
  );
};

A related thread:

How to use the new @Shopify/app-bridge with @Shopify/polaris-react

I can get AppBridge working with Polaris, but I'm now having the same problem that that person concluded with.

Answer 1

If you are on windows, you could point domain name to local at C:\Windows\System32\drivers\etc\hosts

Like this in the end of file:

127.0.0.1   https://example-test-app.myshopify.com

I think other operating systems can provide you with similar functionality.