Create an app
You're ready to create a new app. You want to set up your development environment so that you can start coding.
In this tutorial, you'll create a Node.js app that merchants can access in the Shopify admin. You'll use an app initialization command that generates starter code for building your app, and sets up your development environment so that you can work with your app using Shopify CLI.
You want to create an app with Node and React that displays in the Shopify admin. Using this approach, you'll deliver the best merchant experience because your app will be closely integrated with Shopify, and can use familiar user interface components and patterns.
What you'll learnAnchor link to section titled "What you'll learn"
After you've finished this tutorial, you'll have accomplished the following:
- Initialized your app in the command line
- Generated a new working directory that contains starter code
- Installed all of the dependencies for your app, including Shopify CLI
- Installed your app on a development store
RequirementsAnchor link to section titled "Requirements"
Step 1: Create a new appAnchor link to section titled "Step 1: Create a new app"
You can create a new Shopify app using an
Navigate to the directory where you want to create your app. Your app will be created in a new subdirectory.
Run one of the following commands to create a new app. For the purpose of this tutorial, use
--template nodeto install the Node template.
A new app is created, and Shopify CLI is installed along with all of the dependencies that you need to build Shopify apps. Shopify CLI is also added as a dependency in your app's
The following image shows an app being successfully created in the terminal:
Because you specified the Node template, the following template elements are included in
web/ subdirectory of the app:
- A React.js frontend that lets you populate your development store with products
- A Node.js backend that is ready to interact with the Shopify REST and GraphQL Admin APIs
Step 2: Start a local development serverAnchor link to section titled "Step 2: Start a local development server"
After your app is created, you can work with it by building the app and starting a local development server.
Shopify CLI uses ngrok to create a tunnel that allows your app to be accessed using a unique HTTPS URL.
Navigate to your newly-created app directory.
To start a local server for your app, run the following command:
Shopify CLI walks you through the following:
- Logging into your Shopify Partner account and, if needed, selecting a Partner organization
- Creating an app in the Partner Dashboard, and connecting your local app files to the app
- Storing your ngrok token
- Creating a tunnel between your local environment and the development store using ngrok
To learn more about the processes that are executed when you run
dev, refer to the Shopify CLI command reference.
The following image shows a development server being started using
Step 3: Install your app on your development storeAnchor link to section titled "Step 3: Install your app on your development store"
With the server running, open the URL in the App URL section of the terminal output in the previous step. When you open the URL, you're prompted to install the app on your development store.
Click Install app to install the app in the store.
You now have a development store running with your new app installed.
Step 4: Add and publish products to your development store for testingAnchor link to section titled "Step 4: Add and publish products to your development store for testing"
From the home page of the new app, you can automatically populate your development store with products that you can use for app testing. You'll also need to publish the products to the online store channel so that they're available for use.
- From the home page of the app you just created, click Populate 5 products to add products to your development store.
- From your Shopify admin, go to Products.
- Click the checkbox next to each product you want to publish.
- Click More actions, and then click Add available channel(s).
- If prompted, select Online Store and then click Make products available.
The products you selected are now published in the online store.
- Start building your app by populating data to test your app against, designing your user interface with Polaris, interacting with Shopify's APIs, and configuring a webhook so that your app stays in sync with changing data.