How to get URL of shop in Shopify embeded app?

Question

I'm building a Shopify App using this template: https://github.com/Shopify/shopify-app-template-node/tree/cli_three and I was wondering how I'm able to get the URL of the shop that is using my app (means the URL of the document outside the iFrame). I had a working approach using location.ancestorOrigins (https://developer.mozilla.org/en-US/docs/Web/API/Location/ancestorOrigins), but since this is not compatible with Firefox, I was wondering if there is another approach. Thanks in advance for your help!

Answer 1

My solution is to create an API endpoint to fetch the shop details, query it in the front-end and utilise it. My example uses node.js and React in front-end.

backend/index.js

app.get("/api/shop", async (_req, res) => {
// Refer to docs: https://shopify.dev/docs/api/admin-rest/2023-01/resources/shop#resource-object
  const shopData = await shopify.api.rest.Shop.all({
    session: res.locals.shopify.session,
  });
  res.status(200).send(shopData);
});

frontend/index.js

// Utilize app query hook provided by node.js/react template from shopify
import { useAppQuery } from "../hooks";

export default function HomePage() {
  const {
    data,
    isLoading,
  } = useAppQuery({
    url: "/api/shop"
  });
 // Do something while data is loading
...
 // Else return page
 console.log("DATA", data);
 return (
    <Page>
      <Text variant="headingLg" as="h3">
         Welcome to {data.data[0].name} App
       </Text>
    </Page>
  )
}