Как развиваться с App Bridge от Shopify на локальном хосте? - PullRequest
Новая
       43

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

1 голос
/ 16 марта 2020

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

Не удалось выполнить 'postMessage' в 'DOMWindow': указан целевой источник ('https://example-test-app.myshopify.com ') не соответствует источнику окна получателя (' http://localhost: 3000 ')

Ничто, связанное с AppBridge, не работает в этом состоянии.

Я обнаружил, что единственный способ устранить эту ошибку - создать сборку js и использовать ее в качестве ресурсов c через мой сервер node, а затем получить доступ к приложению через администратора Shopify. Таким образом, указанный целевой источник будет соответствовать источнику окна получателя, но я бы хотел избежать создания сборки после каждого изменения внешнего интерфейса. Есть ли другой способ настроить AppBridge или обойти его так, чтобы я мог продолжить работу на своем веб-интерфейсе на локальном хосте, где я могу использовать перезагрузку горячих модулей с помощью веб-пакета? 

// 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 связанная тема:

Как использовать новый @ Shopify / app-bridge с @ Shopify / polaris-реаги *

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

...