How to fix App Bridge error: host must be provided

I was following the Build a Shopify App with Node and React from Shopify. However, I came across the following error:

Unhandled Runtime Error:
AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided

Screenshot of unhandled runtime error: AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided

It seems the tutorial is either old or is just missing the host information. You can find information on the host parameter here: https://shopify.dev/tutorials/get-and-store-the-shop-origin.

How to fix APP Bridge “host must be provided” error

To fix this error, you need to include a base64 encoded version of your shopOrigin appended with ‘/admin’ (i.e., “uhded-course-app.myshopify.com/admin”) in the same place you are also passing in your API key and shopOrigin.

For example, if your Shopify App URL is “uhded-course-app.myshopify.com”, then in the config in your _app.js file, you need to pass in

const config = { apiKey: API_KEY, shopOrigin, forceRedirect: true,host: Buffer.from("uhded-course-app.myshopify.com/admin").toString('base64') };

If you are following the tutorial from Shopify, this would be a base64 encoded version of the shopOrigin with “/admin” appended. Your app.js file would look like so:

const shopHost = shopOrigin + '/admin';
const config = { apiKey: API_KEY, shopOrigin, forceRedirect: true, host: Buffer.from(shopHost).toString('base64') };

Otherwise, as I mentioned before, if you are not following the Shopify tutorial, then you just need to pass a base64 encoded version of “uhded-course-app.myshopify.com/admin” (replacing uhded-course-app with your shop name).

Important thing to note

Please note that after doing this, I was still getting the following error while trying to use Shopify App Bridge:

“There’s no page at this address”.

Screenshot of There's no page at this address shopify app bridge error

To fix this error, I just had to visit this URL: “https://YOUR_NGROK_ADDRESS.io/auth?shop=YOUR_SHOPIFY_STORE.myshopify.com” (i.e, for me: ‘https://9b81d064c57a.ngrok.io/auth?shop=uhded-course-app.myshopify.com’).

After visiting the above URL, everything worked as expected.

This is explained in the Shopify tutorial here:

Screenshot of shopOrigin-cookie.png caution from Shopify

Looking to learn how to code and make money online? Check out CodingPhase (referral link)