Build A Shopify App Tutorial

Rovani in C♯

Shopify has a really good tutorial on building a Shopify App using Node.js and React. It includes the initial node and npm set-up. The tutorial uses ngrok to handle allowing communication from Shopify to the local node server. Then it gives a quick GraphQL primer, uses Apollo to fetch data, goes through setting up Billing the Shopify store, and listening for webhooks. There is a pretty sizable leap from taking this information and getting a proof-of-concept app running. This series of steps adapts the tutorial from Shopify and add some more steps to get an app deployed on Azure.

Tutorial last updated .

Introduction to Node.js and React and Azure

Requirements

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

  • You should be comfortable using Visual Studio Code, WSL, Git.
  • 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 and create an Azure 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.

Set up your local app instance

Start by setting up the tools and dependencies that you’ll need to build and run your app. These commands are all done in the Visual Studio terminal using bash on WSL.

Install the latest stable version of Node.js

There are many, many ways to do this. For the purposes of this tutorial, we use Ubuntu 18.04 running in WSL. All terminal commands are run in bash (from inside Visual Studio Code).

node -v

If Node.js is already installed, then this will return the version on your computer. As of the writing of this tutorial, Azure Functions only supports Node.js version ~12. Using NVM (node version manager), you can have it install the latest version of Node.js 12.

nvm install 12
nvm alias default 12

This will install the latest version of Node.js 12 and set it as the default version anytime you open the terminal.

Create a new git repo

All projects start with a new Git repo (you’re starting all projects with a git repo, right?).

  1. Follow the tutorial on how to Create a new Git repo in your project
  2. Once created, clone the repository to VS Code.

Create a package.json file

Node.js includes a tool called npm (node package manager) that manages Node.js packages. Initializing an npm project creates a package.json file that contains all of the projects your project depends upon.

npm init -y

Open package.json and edit any of the default descriptor properties such as name, description, author, and version.

Build a React scaffold using Next.js

You’ll use a React framework called Next.js to build you app. Next.js takes care of some of the things that you’d normally have to do when building a React app, including:

  • webpack configuration
  • hot module replacement
  • server-side rendering
  • client-side routing
  • updating babel configuration
  • code splitting
npm install --save react react-dom next

This adds the three npm packages to your package.json file then downloads them from the npm repository.

Create a view

Views are the pages that hold the frontend components that display the data your app queries and mutates. Next.js automatically routes views that are stored in a pages directory using the file name. This makes it easier to build your app application later in the tutorial.

mkdir pages
touch pages/index.js

Open pages/index.js in the editor and add the following content.

const Index = () => (
    <div>
        <p>Sample app using Reach and Next.js</p>
    </div>
);

export default Index;

Add scripts to build and start your app

Edit package.json and add the dev, build, and start scripts to the file:

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Run your project

Just to prove that everything is working as expected, kick off a local webserver by running the npm script for dev.

npm run dev

The terminal output should indicate that the development server has started and that it is now ready on http://localhost:3000. Ctrl+click that link (or type it into a browser) and you should see the results of your hard work.

Commit to Azure DevOps Git repo

Now that everything is working, commit the code up to your Git repo. The next steps in this tutorial will guide you through enabling it as a

Deploy To Azure

coming soon

Embed your app in Shopify

coming soon

Build your user interface with Polaris

coming soon

Learn the GraphQL Admin API

coming soon

Fetch data with Apollo

coming soon

Charge a fee using the Billing API

coming soon

Listen for store events with webhooks

coming soon