title: How to develop with Shopify's App Bridge while on localhost?
body: <p>Initializing Shopify's AppBridge in React requires an <code>apiKey</code> and <code>shopOrigin</code>. I fetch the data and load my dev-server up but am met with errors:</p>
  
  <blockquote>
    <p>Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<a href="https://example-test-app.myshopify.com" rel="nofollow noreferrer">https://example-test-app.myshopify.com</a>') does not match the recipient window's origin ('<a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>')</p>
  </blockquote>
  
  <p>Nothing related to the <code>AppBridge</code> works in this state.</p>
  
  <p>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 <code>node</code> 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 <code>AppBridge</code> or work around it such that I can continue working on my frontend on localhost where I can utilize hot-module reloading with webpack?</p>
  
  <pre><code>// app.component.tsx
  
  import { AppProvider } from '@shopify/polaris';
  import { Provider } from '@shopify/app-bridge-react';
  
  const AppComponent: React.SFC&lt;AppProps&gt; = ({
  }) =&gt; {
    const appBridgeConfig = {
      apiKey: process.env.API_KEY,
      shopOrigin: shopDomainName,
    };
  
  
    return (
      &lt;AppProvider i18n={{}}&gt;
        &lt;Provider config={appBridgeConfig}&gt;
          &lt;Dashboard /&gt;
        &lt;/Provider&gt;
      &lt;/AppProvider&gt;
    );
  };
  </code></pre>
  
  <pre><code>// Dashboard.component.tsx
  
  import { Context, Loading } from '@shopify/app-bridge-react';
  
  export const Dashboard: React.SFC&lt;DashboardProps&gt; = () =&gt; {
    return (
      &lt;Context.Consumer&gt;
        {app =&gt; {
          console.log('app: ', app);
          console.log(
            'appstate: ',
            app?.getState().then(res =&gt; {
              console.log('res: ', res);
            }),
          );
          return (
            &lt;div&gt;
              &lt;Loading /&gt;
              &lt;div&gt;Testing&lt;/div&gt;
            &lt;/div&gt;
          );
        }}
      &lt;/Context.Consumer&gt;
    );
  };
  </code></pre>
  
  <p>A related thread:</p>
  
  <p><a href="https://stackoverflow.com/questions/55365784/how-to-use-the-new-shopify-app-bridge-with-shopify-polaris-react">How to use the new @Shopify/app-bridge with @Shopify/polaris-react</a></p>
  
  <p>I can get <code>AppBridge</code> working with <code>Polaris</code>, but I'm now having the same problem that that person concluded with.</p>