The Shopify CLI is the tool developers use to build apps and storefronts for the Shopify platform. This wiki contains documentation that's useful for contributors of the project.
If you'd like to contribute to this project, the following system dependencies need to be present in the environment.
- Node: use a supported version that meets the
enginesrequirements in CLI, app, and CLI Kit. - PNPM: use the version in the root
packageManagerfield.
Once you have the necessary system dependencies, you can go through the steps below to have your environment setup to work with the project:
- Clone the repository:
git clone https://github.com/Shopify/cli.git. - Install dependencies:
pnpm install
You can run the CLIs through the following package.json scripts:
pnpm shopify: Builds and runs the Shopify CLI.pnpm create-app: Builds and runs the create-app CLI.
All commands support the --path argument, so you can run any command pointing to your app. For example, pnpm shopify app build --path /path/to/project
Run these commands from the CLI repository root to build the local CLI and create an app in ../test-app:
pnpm nx build cli
pnpm create-app --local --name test-app --path .. --template reactRouter --flavor javascriptTo add extensions, run this command once for each extension. Select a UI extension, theme app extension, or function from the prompts:
pnpm shopify app generate extension --path ../test-appStart the development server and follow the prompts to select a development store:
pnpm shopify app dev --path ../test-appTo deploy the app, run:
pnpm shopify app deploy --path ../test-appIf you want to quickly test creating a theme from scratch, you can run bin/create-test-theme.js -s YOUR_STORE. It will:
- create a new theme on your Desktop
- start the development server on http://localhost:9292
- push the theme to your store
- list all the available themes
You can also pass these optional flags:
--cleanupto remove the theme directory afterwards
Besides the scripts for building and running the CLIs, there are others that might come handy when adding code to the project:
pnpm test: Runs the tests of all the packages.pnpm lint: Runs ESLint and Prettier checks for all the packages.pnpm lint:fix: Runs ESLint and Prettier checks for all the packages and fixes the fixable issues.pnpm type-check: Type-checks all the packagesusing the Typescripttsctool.pnpm clean: Removes thedistdirectory from all the packages.
All the packages in the repository contain the above scripts so they can be executed too for an individual package.