CODEWITHSUNDEEP
shopify-appshopify-api-node
Bilal Nasir
Bilal Nasir

Reputation: 250

AppBridgeError INVALID_CONFIG: host must be provided

I am facing an error while trying to complete the official shopify tutorial about developing shopify app.

I have been following the tutorial step by step but even then ran in to problem where the error is thrown that my config file is invalid as it does not contain the host.

My _app.js file code is as follow:

import React from "react";
import App from "next/app";
import Head from "next/head";
import { AppProvider, Frame } from "@shopify/polaris";
import "@shopify/polaris/dist/styles.css";
import translations from "@shopify/polaris/locales/en.json";
import { Provider } from "@shopify/app-bridge-react";
import ClientRouter from "../components/ClientRouter";

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    const config = {
      apiKey: API_KEY,
      shopOrigin,
      forceRedirect: true,
    };
    console.log(config);
    return (
      <React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <Provider config={config}>
          <ClientRouter />
          <AppProvider i18n={translations}>
            <Frame>
              <Component {...pageProps} />
            </Frame>
          </AppProvider>
        </Provider>
      </React.Fragment>
    );
  }
}
MyApp.getInitialProps = async ({ ctx }) => {
  return {
    shopOrigin: ctx.query.shop,
  };
};
export default MyApp;

the console for the config file gives the right shopOrigin. Ill be thankful if anyone helps

Upvotes: 6

Views: 5622

Answers (1)

hnakao11
hnakao11

Reputation: 855

At the moment use the App Bridge version 2 is required like App review team points out:

Ensure that your app is on Shopify App Bridge version 2.0 to embed your app within merchants' admin...

So, what I did was persist the shop name (Ex: toys.myshopify.com) in my database, encode to base64 and send like "host" query param when is required.

const host = Buffer.from(`${shop}/admin`).toString('base64');
ctx.redirect(`${process.env.HOST}?shop=${shop}&host=${host}`);

Note how i added "/admin" after the shop values, this is an important step, otherwise you get a 404 error (Page not found).

Upvotes: 3

Related Questions