Build a Shopify App with Node.js and React

Screenshots of your finished Shopify app, showing how it will look on desktop, tablet, and mobile viewports.

This tutorial will walk you through the process of building an embedded Shopify app using Node.js, React, and GraphQL. It’s designed to teach you many of the key concepts about developing apps for Shopify by creating a working demo app. At the end of this process you’ll have built a functional Shopify app that runs in your local development environment. Your example app will be installed on a development store with the ability to read and write data. (Note: since it’s just for demonstration purposes, this tutorial doesn’t cover setting up a database to store app data for the long term.) You’ll set up a basic billing scheme to charge for your app. Finally, you’ll add webhooks, which will listen for relevant events that happen on your development store. Your final app will be quite simple, but you’ll learn where to find resources to build more complex features on your own. If you get stuck, you can checkout the completed code on Github.

Requirements

Before you begin, make sure you have the background knowledge and skills to complete this tutorial:

  • You should be comfortable using your computer’s command line and text editor
  • You’ll need to be able to read and write HTML, CSS, and Javascript
  • You should be familiar with installing software using the npm package manager
  • If you don’t already have one, you’ll need to create a Shopify Partner account

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

Node.js 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