shopOrigin must be provided- Error, Step 3 Build shopify add with Node and React Tutorial

Solved
Highlighted
New Member
1 0 0

Hello.
Thanks for the tutorial it worked as expected until step 3 add Shopify App Bridge. I have copied the code as instructed to test my configuration. When viewing the test app on the  "Unhandled Runtime Error AppBridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin must be provided"Capture.JPG

this is the server js

Capture2.JPG

 

I have been reading and studying the text for the last two days. I have not added any custom code. Please provide some guidance.

Thanks

 

 

0 Likes
Highlighted
Tourist
9 1 4

This is an accepted solution.

Hi, 

I had the same problem as I made this tutorial yesterday and in my case in .env the HOST property was missing.

It needs to be set to something like:

 

HOST='https://6431e05c.ngrok.io.{devshopname}.myshopify.com'

Of course changed to your actual ngrok forward url.

Maybe this is also your case.

3 Likes
Highlighted
New Member
1 0 1

How to set this? Thank you!

1 Like
Highlighted
New Member
1 0 1

I have tried this solution, and added the missing HOST property in the .env file,

but unfortunately the error still exist

Here is the error message:

Annotation 2020-07-16 183133.png

 

and here is the snippet from the server.js:

Annotation 2020-07-16 182953.png

1 Like
Highlighted
New Member
1 0 0

You set fixed url into .env file.

By the way, when I try to make public app..?

 

0 Likes
Highlighted
Excursionist
38 1 8

Hi there

I cannot see any relation between the HOST property and the shopOrigin cookie.

The reason why you get this error is because in _app.js the config object for the app-bridge-react Provider has undefined value for shopOrigin. In the demo app the value is set from the cookie named shopOrigin. Which, on the other hand, is set on afterAuth by koa-auth-shopify. Check those to track if shopOrigin is set properly. 

https://apps.shopify.com/picamaze
Animated watermarks for product images and ads
0 Likes