Build a Shopify app with Node and React

This tutorial will walk you through the process of building an embedded Shopify app using Node, React, Polaris, and GraphQL. You’ll use Next.js to simplify the setup and routing of your app, and Apollo components to read and write data with the GraphQL Admin API.

Sample embedded app

This tutorial refers to a sample embedded app to help conceptualize the process of building an app from start to finish. You can view the mockups for the sample embedded app in desktop and mobile views on Invision.

Using starter files

Each section of this tutorial contains a download that includes all of the files and code up to that point. You can use these starter files to skip ahead and learn a certain section or fix an app in a broken state.

If you plan to skip ahead, then make sure that you first complete these setup instructions:

  1. Install the latest stable version of Node.js.
  2. Install npm packages (run: npm install).
  3. Expose your dev environment.
  4. Get a Shopify API key and Shopify API secret key.
  5. Add the Shopify API key and Shopify API secret key.
  6. Start your app (run: npm run dev).
  7. Authenticate and test your app.
  8. Set up your app navigation.

Tools

You’ll use a number of frameworks, tools, and libraries to build your app. You should need only a general knowledge and understanding of them to complete this tutorial. To learn more, see the links below.

Node

Node.js is an open-source, cross-platform run-time environment. You’ll use it to write a server using JavaScript.

React

React is a component-based library for declaratively building user interfaces. Components are expressed either as functions of their input (props) or as subclasses of React.Component. Shopify uses React for its flexibility and performance. You can learn more about React in the official React documentation.

Polaris

Polaris is Shopify’s React component library and design system. It’s a great way to build an app that’s accessible, responsive, and performs well. Using Polaris components can make your app look and feel native to Shopify. It also makes it easier for merchants that are already familiar with Shopify’s user interface. In this tutorial, you’re going to be building an embedded app with Polaris, which means that it will work inside the Shopify mobile app. This increases the adoption of your app since a growing number of merchants are using the mobile app regularly, and some use it exclusively.

This tutorial also makes use of the following:

Next steps

Sign up for a Partner account to get started.

Sign up