DEV Community

Harshdeep 'Kinngh' Hura 🍥
Harshdeep 'Kinngh' Hura 🍥

Posted on

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,
 forceRedirect: true,

MyApp.getInitialProps = async ({ ctx }) => {
  return { shopOrigin:, host: };
Enter fullscreen mode Exit fullscreen mode

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.url}`);
  return baseUrl.searchParams.get("host");  
 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 );
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)