App structure
To offer a better and more integrated development experience, apps created using Shopify CLI 3.x follow a conventional directory structure. This structure allows you to serve and deploy your app and its app extensions at the same time, and generate new app extensions easily.
Shopify CLI also manages any Node-based dependencies for you, including your Shopify CLI version. This leads to a consistent app development experience across environments.
Directory structure
All apps created with Shopify CLI follow the same basic directory structure. Some elements might be included or omitted depending on your app’s functionality.
| File/directory | Required? | Description |
|---|---|---|
| shopify.app.toml | Yes | A file containing metadata and configurations for your project. This file represents the root of the app. |
| package.json | Yes | A file containing Node-specific metadata about your project. Includes project dependencies and scripts that let you run Shopify CLI commands using your package manager. Depending on your project structure or template, you might have additional `package.json` files in your project subfolders. |
| Web component directory (default: `web/`) | No | The recommended directory for the web components for your app. Use this directory if you want to build a web interface to display in the Shopify admin or Shopify POS using Shopify App Bridge. These components can be made up of one or more processes. |
extensions/ directory | No | Any app extensions that you’ve generated in your app. Each directory extensions/ represents an extension, where the extension’s local identifier is the name of the directory.Each extension’s directory must contain the appropriate configuration file for the extension type. |
| env | No | A file containing the UUIDs for your app and each extension in the app. |