AppBridge with CDN: host must be provided

Thomas47
Shopify Partner
53 0 10

Has anyone succesfully run the CDN-version of the AppBridge? I'm following the examples, but getting the error

APP::ERROR::INVALID_CONFIG: host must be provided

on the createApp(..) call. The problem is, host is not mentioned in the documentation (which is really fragmented / confusing IMHO) - adding it just fails with another exception.

0 Likes
LWalsh
New Member
1 0 0

Have the same issue. 

 

        var AppBridge = window['app-bridge'];
        var createApp = AppBridge.createApp;
        const app = createApp({
            apiKey: '{{api}}',
            shopOrigin: '{{host}}'
        });

 

APP::ERROR::INVALID_CONFIG: host must be provided

 

0 Likes
Thomas47
Shopify Partner
53 0 10

It is like those who wrote the docs forgot to verify that the examples actually work. 

I've created an issue on the shopify-app-bridge tracker on github.

FlorianP
Tourist
4 0 2

Hello,

I managed to solve this issue with the code below.

          function getP(n, url = window.location.href) {
              n = n.replace(/[\[\]]/g, '\\$&');
              var regex = new RegExp('[?&]' + n + '(=([^&#]*)|&|#|$)'),
                  res = regex.exec(url);
              if (!res) return null;
              if (!res[2]) return '';
              return decodeURIComponent(res[2].replace(/\+/g, ' '));
          }

          var AppBridge = window['app-bridge'];
          var createApp = AppBridge.default;
          var shopOrigin = getP('shopOrigin');
          var host = getP('host');

          var app = createApp({
              apiKey: '{{you api key}}',
              shopOrigin: shopOrigin,
              host: host,
              forceRedirect: true
          });

 

Hope it can help.

Regards

Thomas47
Shopify Partner
53 0 10

Looks promising, so that is the "host" value really - the myshopify domain, the shop custom domain, or the domain of the app itself?

0 Likes
FlorianP
Tourist
4 0 2

Hello,

Not sure that it is your question, but host seems to be the base64-encoded myshopify domain (example.myshopify.com => encodebase64(example.myshopify.com/admin)). 

As emphasized in my code, you can directly get it from the query string.

Regards

0 Likes
Thomas47
Shopify Partner
53 0 10

Thanks! So an example for others, the above resolves to

 

{
apiKey: "cead3d0dff76339abadd933378aa3bbc11a",
shopOrigin: "skjolbergs-nfc-shop.myshopify.com",
host: "c2tqb2xiZXJncy1uZmMtc2hvcC5teXNob3BpZnkuY29tL2FkbWlu"
}

 

where 'c2tqb2xiZXJncy1uZmMtc2hvcC5teXNob3BpZnkuY29tL2FkbWlu' is base64-encoded byte value of the String 'skjolbergs-nfc-shop.myshopify.com/admin'.

0 Likes