--- title: Scaffold an app description: >- Use Shopify CLI to quickly set up your development environment and generate starting code for your app. source_url: html: 'https://shopify.dev/docs/apps/build/scaffold-app' md: 'https://shopify.dev/docs/apps/build/scaffold-app.md' api_name: shopify-cli --- # 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](https://shopify.dev/docs/api/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](https://shopify.dev/docs/apps/build/app-extensions/build-extension-only-app) with an [App Home UI extension](https://shopify.dev/docs/apps/build/app-home/app-home-ui-extensions). To learn more about which option is right for your use case, see [Apps in App Home](https://shopify.dev/docs/apps/build/app-home). **Info:** * Building a simple integration? If you're connecting an existing system to Shopify and only need API credentials (no embedded UI), [create an app in the Dev Dashboard](https://shopify.dev/docs/apps/build/dev-dashboard/create-apps-using-dev-dashboard) instead. * Building with your own tech stack? See [About app authentication](https://shopify.dev/docs/apps/build/authentication-authorization), and [Libraries and templates](https://shopify.dev/docs/api/libraries-and-templates#official-api-libraries) for the official library in your language. *** ## What you'll learn In this tutorial, you'll learn how to do the following tasks: * Initialize a React Router app that uses [Shopify CLI](https://shopify.dev/docs/api/shopify-cli) * Install your app on a dev store * Generate a product using your new app ![Screenshot showing a simple app in the Shopify admin](https://shopify.dev/assets/assets/images/apps/what-youll-build-react-router-global-cli-BfLuzzpM.png) *** ## Requirements * You're a [user with app development permissions](https://shopify.dev/docs/apps/build/dev-dashboard/user-permissions) and have created a [dev store](https://shopify.dev/docs/apps/build/stores/development-stores). You can create one by running `shopify store create dev`. - You're using the latest version of [Shopify CLI](https://shopify.dev/docs/api/shopify-cli). - You're using the latest version of [Chrome](https://www.google.com/chrome/) or [Firefox](https://www.mozilla.org/). *** ## Step 1: (Optional) Set up the Shopify AI Toolkit Install the [Shopify AI Toolkit](https://shopify.dev/docs/apps/build/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. #### Claude Code In your terminal, run `claude plugin install`: ## Terminal ```terminal claude plugin install shopify-ai-toolkit@claude-plugins-official ``` #### Codex In your terminal, run `codex plugin add`: ## Terminal ```terminal codex plugin add shopify@openai-curated ``` #### Antigravity CLI In your terminal, install the Shopify plugin: ## Terminal ```terminal agy plugin install https://github.com/Shopify/shopify-ai-toolkit ``` #### Cursor In Cursor Chat, add the Shopify plugin: ## Cursor Chat ```terminal /add-plugin shopify ``` #### Hermes In your terminal, download the install script and run it: ## Terminal ```terminal curl -fsSL https://raw.githubusercontent.com/Shopify/Shopify-AI-Toolkit/main/.hermes-plugin/install.sh -o /tmp/shopify-hermes-install.sh bash /tmp/shopify-hermes-install.sh ``` #### OpenClaw In your terminal, install the Shopify plugin from npm: ## Terminal ```terminal openclaw plugins install npm:@shopify/ai-toolkit ``` #### Pi In your terminal, install the package from npm: ## Terminal ```terminal pi install npm:@shopify/ai-toolkit ``` #### VS Code 1. Ensure the [Agent plugins](https://code.visualstudio.com/docs/copilot/customization/agent-plugins) preview is enabled in your VS Code settings. 2. Open the Command Palette (`Cmd+Shift+P` on macOS, `Ctrl+Shift+P` on Windows/Linux) and run: ## VS Code: Command Palette Chat: Install Plugin From Source 3. When prompted, enter the repository URL: ## VS Code: Plugin source URL https://github.com/Shopify/shopify-ai-toolkit *** ## Step 2: Create a new app You can create a new Shopify app using [Shopify CLI](https://shopify.dev/docs/api/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 ```terminal shopify app init ``` 3. When prompted, log in to your developer account (either a Partner account or merchant account with appropriate permissions), and then select **Build a React Router app** to use the [React Router template](https://github.com/Shopify/shopify-app-template-react-router). 4. If you're asked to choose an organization, then choose the one that's linked to your dev store. If you're asked whether to create this project as a new app on Shopify, then choose **Yes, create it as a new app**. Enter a name for your app. Shopify CLI creates the app in the Dev Dashboard, connects your local code to it, and installs all the dependencies that you need to build Shopify apps: ![An image showing an app being created in the terminal.](https://shopify.dev/assets/assets/images/apps/create-new-project-react-router-global-cli-Cop2BnEF.png) The generated project also handles authentication for you, so you don't have to build an OAuth flow to call the [GraphQL Admin API](https://shopify.dev/docs/api/admin-graphql). *** ## Step 3: Start a local development server After your app is created, you can work with using a local development server and the [Shopify CLI](https://shopify.dev/docs/apps/build/cli-for-apps). Shopify CLI uses [Cloudflare](https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/do-more-with-tunnels/trycloudflare/) to create a tunnel that enables your app to be accessed using a HTTPS URL. 1. Navigate to your newly created app directory. ## Terminal ```terminal cd my-new-app ``` 2. Run the following command to start a local server for your app: ## Terminal ```terminal shopify app dev ``` Shopify CLI performs the following tasks: * Creates your [Prisma SQLite database](https://github.com/Shopify/shopify-app-template-react-router#application-storage) * 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](https://shopify.dev/docs/api/shopify-cli/app/app-dev). **Caution:** To use a dev store with [Shopify CLI](https://shopify.dev/docs/apps/build/cli-for-apps), you need to be the store owner, or have a [staff account](https://help.shopify.com/manual/your-account/staff-accounts) on the store. If you create a dev store, then you're assigned as the store owner. Other staff members must be added to the store. *** ## Step 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.](https://shopify.dev/assets/assets/images/apps/what-youll-build-react-router-global-cli-BfLuzzpM.png) 3. From the home page of the new app, click **Generate a product** to create a product for your dev store. *** ## Next steps * Learn more about how your [scaffolded app authenticates](https://shopify.dev/docs/apps/build/authentication-authorization/cli-app-authentication) and how to modify its access scopes. * Follow the [Build a Shopify app using React Router](https://shopify.dev/docs/apps/build/build) 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](https://shopify.dev/docs/apps/launch/deployment) and [distribute](https://shopify.dev/docs/apps/launch/distribution) your app. ***