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