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 an 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 that displays in the Shopify admin so that you can deliver the best merchant experience. Your app will be closely integrated with Shopify and will 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"
You've created a Partner account and a development store.
You've installed Node.js 14.17.0 or higher.
You've installed a Node.js package manager: either npm, Yarn 1.x, or pnpm.
You've installed Git 2.28.0 or higher.
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, and then select the language of the app template that you want to start with: either Node, PHP, or Ruby.
Choose Node for your app template if you're learning about Shopify apps and want to follow our Build an example app tutorial.
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:
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. You need to create an ngrok account and auth token to preview your app using Shopify CLI.
Navigate to your newly created app directory.
If you're using the PHP or Ruby app template, then you need to complete the following steps before you can start your server:
- PHP: Set up your Laravel app
- Ruby: Set up your Rails app
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, and then 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, press
p to open your app's preview URL in a browser.
The URL follows the format
[host] is the base64-encoded host parameter used by App Bridge, and represents the container the app is running in.
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.
- To learn more about working with the template you selected, refer to the template's readme:
- Learn about the ways that you can deploy and distribute your app.