如何在本地主机上使用 Shopify's App Bridge 进行开发？

Question

在React中初始化Shopify的AppBridge需要apiKey和shopOrigin。我获取数据并加载我的开发服务器，但遇到了错误：

无法在"DOMWindow"上执行"postMessage"：提供的目标源("https://example-test-app.myshopify.com'(与收件人窗口的来源('http://localhost:3000'(

与AppBridge相关的任何东西都不能在此状态下工作。

我发现解决这个错误的唯一方法是创建一个js构建，并通过我的node服务器将其作为静态资产，然后通过Shopify管理员访问该应用程序。这样，指定的目标原点将与收件人窗口的原点匹配，但我希望避免在每次前端更改后创建构建。有没有其他方法可以配置AppBridge或绕过它，这样我就可以继续在本地主机上的前端工作，在那里我可以利用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>
);
};

一个相关的线程：

如何使用新的@Shopify/app桥与@Shopife/polaris反应

我可以让AppBridge与Polaris一起工作，但我现在遇到的问题与那个人得出的结论相同。

Answer 1

如果您在windows上，您可以在C:\windows\System32\drivers\etc\hosts中将域名指向本地

像这样在文件末尾：

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

我认为其他操作系统可以为您提供类似的功能。