How to connect React App with Shopify App?

Question

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.

Answer 1

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.