Rails Shopify App Bridge Error: s {name: "AppBridgeError", message: "APP::ERROR::INVALID_CONFIG: ...

[Arhum]

Hi,

I am creating a Shopify app using Ruby on Rails. Actually, I want to use Shopify Toasts for my App. For this purpose, I am following this guide https://shopify.dev/apps/tools/app-bridge/getting-started#embed-your-app-in-the-shopify-admin . 

But Unable to make it work when I check in the console everything looks fine then this error comes up.

s {name: "AppBridgeError", message: "APP::ERROR::INVALID_CONFIG: host must be provided", action: undefined, type: "APP::ERROR::INVALID_CONFIG", stack: "AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided"}

If anyone had this issue please help me resolve this. I am creating a Ruby on Rails Shopify app not React. 

Host, shopOrigin everything I am providing like this:

<script src="https://unpkg.com/@shopify/app-bridge@2"></script>

var AppBridge = window['app-bridge'];

var actions = window['app-bridge'].actions;

var createApp = AppBridge.default;

var app = createApp({

apiKey: 'f558d070d3f8e1b0ba4c25cd633e3d6c',

shopOrigin: 'https://<%= Shop.last.shopify_domain%>',

});

var TitleBar = actions.TitleBar;

var Button = actions.Button;

var Redirect = actions.Redirect;

var breadcrumb = Button.create(app, { label: 'My breadcrumb' });

breadcrumb.subscribe(Button.Action.CLICK, function() {

app.dispatch(Redirect.toApp({ path: '/breadcrumb-link' }));

});

var titleBarOptions = {

title: 'My page title',

breadcrumbs: breadcrumb

};

var myTitleBar = TitleBar.create(app, titleBarOptions);

P.S: The above code is for creating buttons in the navigation menu and this is also not working. 

I Will be waiting for support, Thanks

[Arhum]

Hi,

I am creating a Shopify app using Ruby on Rails. Actually, I want to use Shopify Toasts for my App. For this purpose, I am following this guide https://shopify.dev/apps/tools/app-bridge/getting-started#embed-your-app-in-the-shopify-admin . 

But Unable to make it work when I check in the console everything looks fine then this error comes up.

s {name: "AppBridgeError", message: "APP::ERROR::INVALID_CONFIG: host must be provided", action: undefined, type: "APP::ERROR::INVALID_CONFIG", stack: "AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided"}

If anyone had this issue please help me resolve this. I am creating a Ruby on Rails Shopify app not React. 

Host, shopOrigin everything I am providing like this:

<script src="https://unpkg.com/@shopify/app-bridge@2"></script>

var AppBridge = window['app-bridge'];

var actions = window['app-bridge'].actions;

var createApp = AppBridge.default;

var app = createApp({

apiKey: 'f558d070d3f8e1b0ba4c25cd633e3d6c',

shopOrigin: 'https://<%= Shop.last.shopify_domain%>',

});

var TitleBar = actions.TitleBar;

var Button = actions.Button;

var Redirect = actions.Redirect;

var breadcrumb = Button.create(app, { label: 'My breadcrumb' });

breadcrumb.subscribe(Button.Action.CLICK, function() {

app.dispatch(Redirect.toApp({ path: '/breadcrumb-link' }));

});

var titleBarOptions = {

title: 'My page title',

breadcrumbs: breadcrumb

};

var myTitleBar = TitleBar.create(app, titleBarOptions);

P.S: The above code is for creating buttons in the navigation menu and this is also not working. 

I Will be waiting for support, Thanks

[ElanaK]

Hi @Arhum ,

Sorry you're running into this! With App Bridge 2.0 we require the a host key rather than the shopOrigin in the initialization config. We've updated the docs here.

var app = createApp({
    apiKey: <api_key>,
    host: <host>,
});

You can retrieve the host from the application URL query params. 

Hopefully, this helps!