Updating Shopify App to App Bridge 2.0

Upgrading to App Bridge 2.0 requires some small changes to the boilerplate code by passing host as a query.

Update your pages/_app.js to include host in getInitialProps and then call it in your config from this.props along side shopOrigin

const { Component, pageProps, shopOrigin, host } = this.props;

const config = {
 apiKey: API_KEY,
 shopOrigin,
 host,
 forceRedirect: true,
};
...
...
...

MyApp.getInitialProps = async ({ ctx }) => {
  return { shopOrigin: ctx.query.shop, host: ctx.query.host };
};

And if you're using subscriptions, you'll need to get host from the URL and pass it in your return URL

const getHost = (ctx) => {
 const baseUrl = new URL(`https://${ctx.request.header.host}${ctx.request.url}`);
  return baseUrl.searchParams.get("host");  
 };
server.use(
 createShopifyAuth({ async afterAuth(ctx) {
  const { shop, scope, accessToken } = ctx.state.shopify;
  const host = getHost(ctx);
  ACTIVE_SHOPIFY_SHOPS[shop] = scope;
  const returnUrl = `https://${Shopify.Context.HOST_NAME}?host=${host}&shop=${shop}`;
  const subscriptionUrl = await getSubscriptionUrl(accessToken, shop, returnUrl );
  ctx.redirect(subscriptionUrl);
  },
 })
);

I also have a repository where I am building boilerplate code with Node, Next, MongoDB and GraphQL