Styjun

Can a US President, after impeachment and removal, be re-elected or re-appointed?

Who said "one can be a powerful king with a very small sceptre"?

Why were contact sensors put on three of the Lunar Module's four legs? Did they ever bend and stick out sideways?

Complaints from (junior) developers against solution architects: how can we show the benefits of our work and improve relationships?

Why is it "on the inside" and not "in the inside"?

Nuclear breeder/reactor plant controlled by two A.I. makes too much power

8086 stack segment and avoiding overflow in interrupts

Problem with Eigenvectors

Is SecureRandom.ints() secure?

What are the cons of stateless password generators?

What clothes would flying-people wear?

Assuring luggage isn't lost with short layover

Scam? Checks via Email

How can chaotic entities be prevented from spreading beyond their domain?

Why does the Rust compiler not optimize code assuming that two mutable references cannot alias?

Exploiting the delay when a festival ticket is scanned

Did Vladimir Lenin have a cat?

How did the SysRq key get onto modern keyboards if it's rarely used?

Would people understand me speaking German all over Europe?

Why does aggregate initialization not work anymore since C++20 if a constructor is explicitly defaulted or deleted?

Why did some Apollo missions carry a grenade launcher?

Wrapping IMemoryCache with SemaphoreSlim

Surviving a planet collision?

My employer is refusing to give me the pay that was advertised after an internal job move

How to use the new @Shopify/app-bridge with @Shopify/polaris-react

How to use shopify polaris css components?Shopify Polaris + React + RailsConnect Polaris with Shopify AppHMAC Validation Failed - Shopify Polaris - Shopify-node-apppolaris shopify import css issueshopify polaris hamburger menuHow to open and close Shopify Polaris Modal using App-BridgeHow do I import Polaris React components?What is the use of OAuth example in Polaris React App Bridge documentation?Error: The following params are required: Client ID, Client Secret on clarifai api on React

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

Shopify recently released their new @shopify/app-bridge, but it is unclear to me how it should be used alongside @shopify/polaris.

For example, I have tried to make a React component that will use the app-bridge and polaris to display a toast.

import React, Component from "react";
import * as PropTypes from "prop-types";
import Toast from "@shopify/app-bridge/actions";
import Page from "@shopify/polaris";

class Start extends Component 
 static contextTypes = 
 polaris: PropTypes.object
 ;

 showToast() 
 console.log("SHOW TOAST");
 console.log(this.context.polaris.appBridge);
 const toastNotice = Toast.create(this.context.polaris.appBridge, 
 message: "Test Toast",
 duration: 5000
 );
 toastNotice.dispatch(Toast.Action.SHOW);
 

 render() 
 this.showToast();
 return (
 <Page title="Do you see toast?">
 <p>I do not see toast.</p>
 </Page>
 );
 


export default Start;

But it does not seem to dispatch the action. Any ideas on why not? Note that my app is wrapped in the AppProvider and app-bridge is initialized.

ReactDOM.render(
 <AppProvider
 apiKey=process.env.REACT_APP_SHOPIFY_API_KEY
 shopOrigin=queryString.parse(window.location.search).shop
 >
 <Start />
 </AppProvider>,
 document.getElementById("root")
);

Any suggestions?

reactjs shopify polaris

share|improve this question

asked Mar 26 at 20:34

chadhamrechadhamre

13611 silver badge88 bronze badges

add a comment | 

2

Shopify recently released their new @shopify/app-bridge, but it is unclear to me how it should be used alongside @shopify/polaris.

For example, I have tried to make a React component that will use the app-bridge and polaris to display a toast.

import React, Component from "react";
import * as PropTypes from "prop-types";
import Toast from "@shopify/app-bridge/actions";
import Page from "@shopify/polaris";

class Start extends Component 
 static contextTypes = 
 polaris: PropTypes.object
 ;

 showToast() 
 console.log("SHOW TOAST");
 console.log(this.context.polaris.appBridge);
 const toastNotice = Toast.create(this.context.polaris.appBridge, 
 message: "Test Toast",
 duration: 5000
 );
 toastNotice.dispatch(Toast.Action.SHOW);
 

 render() 
 this.showToast();
 return (
 <Page title="Do you see toast?">
 <p>I do not see toast.</p>
 </Page>
 );
 


export default Start;

But it does not seem to dispatch the action. Any ideas on why not? Note that my app is wrapped in the AppProvider and app-bridge is initialized.

ReactDOM.render(
 <AppProvider
 apiKey=process.env.REACT_APP_SHOPIFY_API_KEY
 shopOrigin=queryString.parse(window.location.search).shop
 >
 <Start />
 </AppProvider>,
 document.getElementById("root")
);

Any suggestions?

reactjs shopify polaris

share|improve this question

asked Mar 26 at 20:34

chadhamrechadhamre

13611 silver badge88 bronze badges

add a comment | 

Shopify recently released their new @shopify/app-bridge, but it is unclear to me how it should be used alongside @shopify/polaris.

For example, I have tried to make a React component that will use the app-bridge and polaris to display a toast.

import React, Component from "react";
import * as PropTypes from "prop-types";
import Toast from "@shopify/app-bridge/actions";
import Page from "@shopify/polaris";

class Start extends Component 
 static contextTypes = 
 polaris: PropTypes.object
 ;

 showToast() 
 console.log("SHOW TOAST");
 console.log(this.context.polaris.appBridge);
 const toastNotice = Toast.create(this.context.polaris.appBridge, 
 message: "Test Toast",
 duration: 5000
 );
 toastNotice.dispatch(Toast.Action.SHOW);
 

 render() 
 this.showToast();
 return (
 <Page title="Do you see toast?">
 <p>I do not see toast.</p>
 </Page>
 );
 


export default Start;

But it does not seem to dispatch the action. Any ideas on why not? Note that my app is wrapped in the AppProvider and app-bridge is initialized.

ReactDOM.render(
 <AppProvider
 apiKey=process.env.REACT_APP_SHOPIFY_API_KEY
 shopOrigin=queryString.parse(window.location.search).shop
 >
 <Start />
 </AppProvider>,
 document.getElementById("root")
);

Any suggestions?

reactjs shopify polaris

share|improve this question

asked Mar 26 at 20:34

chadhamrechadhamre

13611 silver badge88 bronze badges

import React, Component from "react";
import * as PropTypes from "prop-types";
import Toast from "@shopify/app-bridge/actions";
import Page from "@shopify/polaris";

class Start extends Component 
 static contextTypes = 
 polaris: PropTypes.object
 ;

 showToast() 
 console.log("SHOW TOAST");
 console.log(this.context.polaris.appBridge);
 const toastNotice = Toast.create(this.context.polaris.appBridge, 
 message: "Test Toast",
 duration: 5000
 );
 toastNotice.dispatch(Toast.Action.SHOW);
 

 render() 
 this.showToast();
 return (
 <Page title="Do you see toast?">
 <p>I do not see toast.</p>
 </Page>
 );
 


export default Start;

ReactDOM.render(
 <AppProvider
 apiKey=process.env.REACT_APP_SHOPIFY_API_KEY
 shopOrigin=queryString.parse(window.location.search).shop
 >
 <Start />
 </AppProvider>,
 document.getElementById("root")
);

share|improve this question

asked Mar 26 at 20:34

chadhamrechadhamre

13611 silver badge88 bronze badges

share|improve this question

asked Mar 26 at 20:34

chadhamrechadhamre

13611 silver badge88 bronze badges

asked Mar 26 at 20:34

chadhamrechadhamre

13611 silver badge88 bronze badges

asked Mar 26 at 20:34

chadhamrechadhamre

13611 silver badge88 bronze badges

1 Answer
1

active

oldest

votes

0

So after a lot of debugging, I found out from Shopify that inside App Bridge, before taking any action, they check that the localOrigin matches the appURL (one that's entered in the partners dashboard). In my case, I have a backend (node.js on heroku used for authentication) and a frontend (react bundle on firebase) my app starts by hitting the backend, and then if authentication checks out, it redirects to the front end. And hence the localOrigin does not match... hmmm, I'm very glad to have figured this out since I lost a lot of sleep over it. Now the question is what to do about it... maybe this is something that could be updated with AppBridge? Or is there a better design I should be considering?

share|improve this answer

answered Apr 13 at 20:20

chadhamrechadhamre

13611 silver badge88 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55365784%2fhow-to-use-the-new-shopify-app-bridge-with-shopify-polaris-react%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

So after a lot of debugging, I found out from Shopify that inside App Bridge, before taking any action, they check that the localOrigin matches the appURL (one that's entered in the partners dashboard). In my case, I have a backend (node.js on heroku used for authentication) and a frontend (react bundle on firebase) my app starts by hitting the backend, and then if authentication checks out, it redirects to the front end. And hence the localOrigin does not match... hmmm, I'm very glad to have figured this out since I lost a lot of sleep over it. Now the question is what to do about it... maybe this is something that could be updated with AppBridge? Or is there a better design I should be considering?

share|improve this answer

answered Apr 13 at 20:20

chadhamrechadhamre

13611 silver badge88 bronze badges

add a comment | 

0

So after a lot of debugging, I found out from Shopify that inside App Bridge, before taking any action, they check that the localOrigin matches the appURL (one that's entered in the partners dashboard). In my case, I have a backend (node.js on heroku used for authentication) and a frontend (react bundle on firebase) my app starts by hitting the backend, and then if authentication checks out, it redirects to the front end. And hence the localOrigin does not match... hmmm, I'm very glad to have figured this out since I lost a lot of sleep over it. Now the question is what to do about it... maybe this is something that could be updated with AppBridge? Or is there a better design I should be considering?

share|improve this answer

answered Apr 13 at 20:20

chadhamrechadhamre

13611 silver badge88 bronze badges

add a comment | 

So after a lot of debugging, I found out from Shopify that inside App Bridge, before taking any action, they check that the localOrigin matches the appURL (one that's entered in the partners dashboard). In my case, I have a backend (node.js on heroku used for authentication) and a frontend (react bundle on firebase) my app starts by hitting the backend, and then if authentication checks out, it redirects to the front end. And hence the localOrigin does not match... hmmm, I'm very glad to have figured this out since I lost a lot of sleep over it. Now the question is what to do about it... maybe this is something that could be updated with AppBridge? Or is there a better design I should be considering?

share|improve this answer

answered Apr 13 at 20:20

chadhamrechadhamre

13611 silver badge88 bronze badges

share|improve this answer

answered Apr 13 at 20:20

chadhamrechadhamre

13611 silver badge88 bronze badges

answered Apr 13 at 20:20

chadhamrechadhamre

13611 silver badge88 bronze badges

answered Apr 13 at 20:20

chadhamrechadhamre

13611 silver badge88 bronze badges