Scaffold an app

You're ready to scaffold a new app. You want to set up your development environment so that you can start coding.

In this tutorial, you'll scaffold an app that users access from the Shopify admin by using a React router template. You'll generate starter code and use Shopify CLI to develop your app. This React router template is the recommended path for most apps.

If you're building a simple custom-distribution app that doesn't need server-side logic, you can also create an app using the extension-only template with an App Home UI extension. To learn more about which option is right for your use case, see Apps in App Home.

Anchor to What you'll learnWhat you'll learn

In this tutorial, you'll learn how to do the following tasks:

• Initialize a React Router app that uses Shopify CLI
• Install your app on a dev store
• Generate a product using your new app

Anchor to RequirementsRequirements

• You're a user with app development permissions and have created a dev store.

• You're using the latest version of Shopify CLI.
• You're using the latest version of Chrome or Firefox.

Anchor to Step 1: (Optional) Set up the Shopify AI ToolkitStep 1: (Optional) Set up the Shopify AI Toolkit

Install the Shopify AI Toolkit to connect your AI coding assistant to Shopify's docs, APIs, and CLI. Your assistant gets the Shopify context it needs to answer questions, write code, and run commands more reliably.

Anchor to Step 2: Create a new appStep 2: Create a new app

You can create a new Shopify app using Shopify CLI

1. Navigate to the directory where you want to create your app.

   Your app will be created in a new subdirectory.

2. Run the following command to create a new app:

   Terminal

   Copy

   $

   shopify app init

3. When prompted, enter a name for your app, and then select Build a React Router app to use the React Router template.

   A new app is created and Shopify CLI is installed along with all the dependencies that you need to build Shopify apps:

   [An image showing an app being created in the terminal.]

Anchor to Step 3: Start a local development serverStep 3: Start a local development server

After your app is created, you can work with using a local development server and the Shopify CLI.

Shopify CLI uses Cloudflare to create a tunnel that enables your app to be accessed using a HTTPS URL.

1. Navigate to your newly created app directory.

   Terminal

   Copy

   $

   cd my-new-app

2. Run the following command to start a local server for your app:

   Terminal

   Copy

   $

   shopify app dev

Shopify CLI performs the following tasks:

• Guides you through logging into your developer account (either a Partner account or merchant account with appropriate permissions)
• Creates an app in the Dev Dashboard, and connects your local code to the app
• Creates your Prisma SQLite database
• Creates a tunnel between your local machine and the dev store

To learn more about the processes that are executed when you run dev, refer to the Shopify CLI command reference.

Anchor to Step 4: Install your appStep 4: Install your app

You can install your app on your dev store, and automatically populate your dev store with products that you can use for app testing.

1. With the server running, press p to open your app's preview URL in a browser.

   When you open the URL, you're prompted to install the app on your dev store.

2. Click Install app to install the app on the dev store.

   You now have a dev store running with your new app installed:

   [An image showing how to install your app on your dev store.]

3. From the home page of the new app, click Generate a product to create a product for your dev store.

Anchor to Next stepsNext steps

• Follow the Build a Shopify app using React Router tutorial to learn how to add features to an app using the Shopify React Router template and key Shopify tools and libraries.
• Learn how to deploy and distribute your app.