How can I retrieve the URL of a shop using my Node app?

[magnussinger]

Hi everyone,

I'm sorry if I ask a trivial question, but 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!

Best

Magnus

[magnussinger · Accepted solution]

Okay, so I came up with a solution by myself, I post my code here in case anyone has the same problem in the future:

import {useAppBridge} from "@shopify/app-bridge-react";

function DemoPage() {
    const bridge = useAppBridge();
    const shopUrl = bridge.hostOrigin.replace('https://', '').replace('www.', '');
    console.log(shopUrl);
}

[salihozk]

This doesn't work when the admin URL is like "https://admin.shopify.com/store/{STORE_NAME}".

[FaizaBashir]

How to get shop url in backend? I want to get shop url in index.js and middleware.

[Fabien_Sebban]

Unfortunately, since Shopify changed the URL from https://my-store.myshopify.com to https://admin.shopify.com this code always returns https://admin.shopify.com as the shop URL.

I am looking for another way to get the URL from the app's front end. I'll post the solution if I find it.

[Fabien_Sebban]

This is a way to get the shop URL from the back office:

const shopUrl = `https://${atob(new URLSearchParams(location.search).get("host"))}`;

I don't know if it is the best way but it works.

[Fabien_Sebban]

For a reason I don¡t know, this way works only in a dev environment. In a production environment you need to use this:

const shopUrl = `https://${atob(window.__SHOPIFY_DEV_HOST).split('/').slice(-1)}.myshopify.com`;

The AppBridgeProvider of the React app fills the variable window.__SHOPIFY_DEV_HOST.

[assafl]

Based on this forum thread I understand that the app's iframe url contains the store myshopify domain. Based on that, this line of code works for me

let host = ((new URL(document.location)).searchParams).get("shop");

[yash100ni]

  // The host may be present initially, but later removed by navigation.

  // By caching this in state, we ensure that the host is never lost.

    const host = ((new URL(document.location)).searchParams).get("shop") || window.__SHOPIFY_DEV_HOST;

[Fabien_Sebban]

I don't know if the goal is to redirect to a Shopify resource but I leave another approach below in case it helps.

With AppBridge 4.0 there is no need to know the Shopify URL to redirect to Shopify resources.

You just need to use the Navigation API:

open('shopify://admin/products/1234', '_top');

 It works also if you want to redirect to the theme editor.