shopifyshopify-apppolaris

Shopify - Get shop domain inside a app


I'm new to Shopify app developing and I'm using Node,Express for the back-end and react with polaris libaray.

My question is how to get the shop's domain the request is initiating throug h the app. When I searched I could only found one used in Ruby ShopifyAPI::Shop.current and I'm looking for the similar thing to use in node?


Solution

  • For examples check out https://github.com/BKnights/kotn-shopify-utils Yes it uses a session. The code is pretty idiosyncratic. I published it mostly as an easy way to share between my own projects but it's worked pretty well for those.

    If you use this where you may scale your servers you'd need to replace the session engine with something more distributed. Cookie sessions work.

    This expects to route the setup page of the app to /preferences. Look at that route with the validSession, session, middleware

    For passing the domain to Polaris I put the shop info into a plain JS object on the containing page (it's a dustjs template):

          <script type="text/javascript">
        var KotN = {
            shop:'{shop}',
            apiKey: '{apiKey}',
            shopOrigin: 'https://{shop}.myshopify.com',
            locale:'{locale}' || (navigator.languages ? (navigator.language || navigator.languages[0]) : (navigator.userLanguage || navigator.browerLanguage))
        };
      </script>
    

    and then the Polaris component looks like:

    import * as React from 'react';
    import {EmbeddedApp} from '@shopify/polaris/embedded';
    import ShopProvider from './stores/ShopProvider';
    import  Status from './views/status';
    
    
    const shop = KotN.shop;
    const shopOrigin = KotN.shopOrigin;
    const apiKey = KotN.apiKey;
    
    console.log('shop: '+ shop +' and origin: '+ shopOrigin);
    
    
    export default class MyApp extends React.Component {
      render() {
        return (
          <EmbeddedApp
            apiKey={apiKey}
            shopOrigin={shopOrigin}
            forceRedirect={true}
            debug={true}
          >
            <ShopProvider>
              <Status />
            </ShopProvider>
          </EmbeddedApp>
        );
      }
    }