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
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".
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:
