This tutorial will walk you through the process of building an embedded Shopify app using Node.js, React, and GraphQL. You’ll use Next.js to simplify the setup and routing of your app, and Apollo components to read and write data using the GraphQL Admin API. Finally, you’ll use Polaris, Shopify’s design system, to build a user interface that integrates seamlessly into the Shopify admin.
You’ll use several frameworks, tools, and libraries to build your app. You should need only a general knowledge and understanding of them to complete this tutorial. We use many of these tools at Shopify to build our own apps, and we believe this technology stack will help you get up and running fast.
Next.js is a framework for quickly setting up React-based apps. It provides a helpful baseline configuration, so you don’t have to manually set up features like URL routing or server-side rendering.
GraphQL is a query language for interacting with an API. It streamlines the way your app talks to Shopify’s platform, and provides only the data you ask for, reducing bandwidth and overhead. Most of Shopify already runs on GraphQL and we believe the learning curve will be worth the investment for developers.
Polaris is Shopify’s React component library and design system. It includes guidelines for design, content, and accessibility. It also includes a full-featured library of ready-to-use React components. Using Polaris components helps your app look and feel native to Shopify, so it’s easier to use for merchants.