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:
- Install the latest stable version of Node.js.
- Install npm packages (run:
- Expose your dev environment.
- Get a Shopify API key and Shopify API secret key.
- Add the Shopify API key and Shopify API secret key.
- Start your app (run:
npm run dev).
- Authenticate and test your app.
- Set up your app navigation.
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.
React is a component-based library for declaratively
building user interfaces. Components are expressed either as functions of their
(props) or as subclasses of
React.Component. Shopify uses React for
its flexibility and performance. You can learn more about React in the official
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: