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 users 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 user experience. Your app will be closely integrated with Shopify and will use familiar user interface components and patterns.
What you'll learn
Anchor 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
Requirements
Anchor link to section titled "Requirements"You've created a Partner account and a development store.
You've installed Node.js 16 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 app
Anchor link to section titled "Step 1: Create a new app"You can create a new Shopify app using an npm, yarn, or pnpm command.
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 package.json.
The following image shows an app being successfully created in the terminal:
Step 2: Start a local development server
Anchor 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 Cloudflare to create a tunnel that allows your app to be accessed using a unique HTTPS URL.
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
- Creating a tunnel between your local environment and the development store using Cloudflare
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 dev:
Step 3: Install your app on your development store
Anchor 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 https://[tunnel_url]?shop=[dev_store].myshopify.com&host=[host], where [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 testing
Anchor 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 that 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 that you want to publish.
- Click ..., and then click Include in sales channels.
The products that 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.