What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

App installation issue: react as a frontend and node as a backend hosted on 2 different URLs

App installation issue: react as a frontend and node as a backend hosted on 2 different URLs

purdydev
Visitor
1 0 2

Hi. Instead of using the react-node boilerplate I am trying to develop an embedded app from scratch. 

I don't want to have frontend and backend nested each other because of that I am trying this way.

My app setup is like that:

Screen Shot 2022-07-12 at 21.42.22.png

 

The problem is, when I try to install app to my development store I see some errors on the console.

 

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>'). 
after seeing this error I find myself on this page:

Screen Shot 2022-07-12 at 21.48.00.png

I don't have any redirection to backend yet. Just a simple frontend. 

 

My App.jsx:

Screen Shot 2022-07-12 at 21.46.51.png

 

Questions:

1. How to fix the above error?
2. My app url is my frontend url. How to check incoming request should be redirected to backend's installation endpoint on frontend? 

3. How to do redirection for installation from frontend to backend? On which component, where should I put the redirection logic? Do I have to have a proxy setup? 

 

Thanks!

Reply 1 (1)

mcohen
Shopify Partner
8 0 0

How were you able to structure the app in 2 components? How did you authenticate the requests from the server side.