Build a Shopify App with Node and React
Table of Contents
- Introduction
- Building a Shopify App with Node and React using the Shopify App CLI
- What is the Shopify App CLI?
- Requirements
- Installing the Shopify App CLI
- Customizing the Page Component
- Using the Resource Picker
- Handling Selections
- Conclusion
Building a Shopify App with Node and React using the Shopify App CLI
In this tutorial, we will learn how to build a Shopify app using Node and React with the help of the Shopify App CLI. The Shopify App CLI is a command line interface tool that simplifies and automates common development tasks in Shopify app development. By the end of this tutorial, you will have a basic Shopify app that runs in your local development environment and the knowledge to build and customize your own app for the Shopify platform. So let's get started!
Introduction
Hi, everyone! My name is Jennifer Gray, and I'm a UX developer here at Shopify. In this tutorial, we're going to learn how to build a Shopify app using Node and React with the help of the Shopify App CLI. The Shopify App CLI is a command line interface tool built for Shopify app developers. It allows us to quickly scaffold a Node.js app and automate many common development tasks that we encounter throughout the Shopify app development process.
What is the Shopify App CLI?
The Shopify App CLI is a command line interface tool that simplifies and automates common development tasks in Shopify app development. It integrates with your Shopify partner account, handles authentication when installing your app to a development store, and can automate tasks like populating example data in a development store. It also generates boilerplate code for features like billing and webhooks. Overall, it's a helpful tool that speeds up and simplifies the app development process.
Requirements
Before we can start building our Shopify app, there are a few requirements that need to be in place. First, you will need a text editor like VS Code to write your code. You will also need a command line interface tool, such as iTerm. Additionally, you will need a recent version of Ruby installed and a Shopify partner account. Finally, you will need a Shopify development store, which is a free Shopify account that you can create. If you are on Windows, there are a couple more tools you'll need to install, such as the Linux subsystem for Windows and Ubuntu for Windows.
Installing the Shopify App CLI
The Shopify App CLI can be installed using a few different package managers. If you are using Mac OS and Homebrew, you can run two commands to install it. If you are on a Linux-based system, the installation instructions will vary depending on the package manager you're using. You can find the specific instructions in the Shopify App CLI documentation. Finally, you can also install the Shopify App CLI as a Ruby gem. Once installed, you can check that it has been installed correctly by running the command "Shopify version".
Customizing the Page Component
Now that we have the Shopify App CLI installed, let's start building our app. We'll begin by customizing the Page component, which is the main page of our app. The Page component is part of the Polaris component library, which is a design system built for Shopify app developers. By customizing the Page component, we can add a heading and a button to our app. When the button is clicked, it will open a modal that allows us to select products from our development store.
Using the Resource Picker
To implement the product selection functionality in our Shopify app, we'll use the Shopify App Bridge library and its Resource Picker component. The Resource Picker component renders a modal that provides a list of resources to choose from. In our case, we want to select products from our development store. We'll configure the Resource Picker component to open when the button is clicked and handle the selected products.
Handling Selections
When a product is selected using the Resource Picker component, we need to handle the selection and retrieve the selected product IDs. We'll use the onSelection prop of the Resource Picker component to define a callback function that receives the selected products as a payload. We'll update the state of our app to store the selected product IDs and log them to the console for now. In a real-world scenario, you would likely use these product IDs to perform actions like querying the Shopify GraphQL Admin API.
Conclusion
In this tutorial, we learned how to build a Shopify app using Node and React with the help of the Shopify App CLI. We customized the Page component to add a heading and a button to our app and used the Resource Picker component to enable product selection from our development store. We also handled the selected products and retrieved their IDs. This is just the beginning of building a Shopify app, and there are many other features and functionalities you can explore. Feel free to check out the Shopify App CLI documentation and other resources to continue your app development journey. Happy coding!
