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.
