Как развиваться с помощью Shopify App Bridge на локальном хосте?

Question

Для инициализации AppBridge Shopify в React требуется apiKey а также shopOrigin. Я получаю данные и загружаю свой dev-сервер, но сталкиваюсь с ошибками:

Не удалось выполнить 'postMessage' в 'DOMWindow': предоставленное целевое происхождение (' 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-bridge с @Shopify/polaris-react

я могу получить AppBridge работать с Polaris, но теперь у меня та же проблема, что и у этого человека.

Answer 1

Если вы работаете в Windows, вы можете указать имя домена как локальное в C:\Windows\System32\drivers\etc\hosts

Вот так в конце файла:

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

Я думаю, что другие операционные системы могут предоставить вам аналогичные функции.