0

I'm new to shopify-App developmet and came across Polaris, react library provided by Shopify for consistent user-interface development. My ideas is to build a Node.js Express App to authenticate and install the app and to process data and have a react app for the User Interface for the shop-admin.

I searched through the web, but couldn't find a standard or recommended way of connecting react app to the shopify app.

What I could figure out was to redirect to the React app from the Node app when a shop admin select app from Apps section and is authenticated successfully as follow.

app.get('/shopify/callback', (req, res) => {
  const { shop, hmac, code, state } = req.query;
  const stateCookie = cookie.parse(req.headers.cookie).state;

  if (state !== stateCookie) {
    return res.status(403).send('Request origin cannot be verified');
  }

  if (shop && hmac && code) {
    const map = Object.assign({}, req.query);
    delete map['signature'];
    delete map['hmac'];
    const message = querystring.stringify(map);
    const generatedHash = crypto
      .createHmac('sha256', apiSecret)
      .update(message)
      .digest('hex');

    if (generatedHash !== hmac) {
      return res.status(400).send('HMAC validation failed');
    }

    const accessTokenRequestUrl = 'https://' + shop + '/admin/oauth/access_token';
    const accessTokenPayload = {
      client_id: apiKey,
      client_secret: apiSecret,
      code,
    };

    request.post(accessTokenRequestUrl, { json: accessTokenPayload })
      .then((accessTokenResponse) => {
        const accessToken = accessTokenResponse.access_token;

        const shopRequestUrl = 'https://' + shop + '/admin/shop.json';
        const shopRequestHeaders = {
          'X-Shopify-Access-Token': accessToken,
        };
        res.redirect([URL to the react app built with Polaris]);
      })
      .catch((error) => {
        res.status(error.statusCode).send(error.error.error_description);
      });

  } else {
    res.status(400).send('Required parameters missing');
  }
});

I got this working, but I'm not sure whether this is the recommended way to do it.

Achala Dissanayake
  • 810
  • 3
  • 16
  • 33

1 Answers1

0

They are 3 different things: Node.JS, React, and Polaris and you can choose any of them. Polaris is a library and if you want to use it just run yarn add @shopify-polaris and read its documentation. That's all.

With or without Polaris, you could still create a Shopify app, with various stacks.

Tien Do
  • 10,319
  • 6
  • 41
  • 42
  • Yeah, but what I want is to have shopify plugins back-end in node for access the shops admin api and process data and all, React with Polaris library for UI at the admin App pages. Now, I'm redirecting to the react app from the node server when shop admin select my app. I'm asking whether it's a good practice or what's the standard way shopify recommends to have a separate react app for UI and node for backend of the app? – Achala Dissanayake Nov 03 '17 at 10:44
  • 1
    I consider React/Polaris and NodeJS is the best way to build a Shopify app (a single app) if you're a JS developer. Actually I liked Polaris very much since I don't need to care about mimicking Shopify UI myself. I created a simple Shopify app here when I learned to build a Shopify app https://github.com/tiendq/hello-shopify – Tien Do Apr 02 '19 at 19:51
  • I went on with the way I have posted in the question. Thanks for the suggestions and the answer. I'll accept this as answer – Achala Dissanayake Mar 20 '21 at 15:41