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, 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.

Tools

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.

Node

Node is an open-source, cross-platform JavaScript run-time environment. You’ll use it to create a server to host your app.

React

React is a JavaScript library for building component-based user interfaces. Building with components makes it faster for you to build and makes interfaces more consistent for users. Shopify uses React for its flexibility and performance.

Next.js

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

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.

Apollo

Apollo is a family of JavaScript libraries that makes it easier to work with GraphQL. You’ll use Apollo Client to create a React component that conveniently handles all your operations with Shopify’s API.

Polaris

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.

Continue to Set up your app