shopify/cli

Build apps, themes, and hydrogen storefronts for Shopify

Shopify CLI

With the Shopify command line interface (Shopify CLI 3.0), you can:

• initialize, build, dev, and deploy Shopify apps, extensions, functions and themes
• build custom storefronts and manage their hosting

Learn more in the commands docs.

 

Before you begin

Install the latest version of Node.js and npm (or another package manager of your choice).

 

Developing apps with Shopify CLI

When you’re building a Shopify app, you can initialize your project using your preferred package manager. A single command will install all the dependencies you need — including Shopify CLI itself.

Initialize your project using one of the following commands:

• npm init @shopify/app@latest (installed by default with Node)
• pnpm create @shopify/create-app@latest
• yarn create @shopify/app
• bun create @shopify/app@latest (experimental)

Learn more in the docs: Create an app

 

Developing themes with Shopify CLI

To work with themes, the CLI needs to be installed globally with:

• npm install -g @shopify/cli @shopify/theme

You can also use do it through Homebrew on macOS: brew tap shopify/shopify && brew install shopify-cli

Learn more in the docs: Shopify CLI for themes

 

Developing Hydrogen custom storefronts with Shopify CLI

The Hydrogen code lives here: https://github.com/Shopify/hydrogen/tree/main/packages/cli

Learn more in the docs: Shopify CLI for Hydrogen storefronts

 

Help 🖐

If you encounter issues using the CLI or have feedback you'd like to share with us, below are some options:

• Open a GitHub issue - To report bugs or request new features, open an issue in the Shopify CLI repository
• Shopify Community Forums - Visit our forums to connect with the community and learn more about Shopify CLI development
• CLI Documentation - Apps - To view CLI documentation for app development
• CLI Documentation - Themes - To view CLI documentation for theme development
• CLI Documentation - Hydrogen - To view CLI documentation for Hydrogen (custom storefront) development

Contribute 👩🏽‍💻

If you'd like to contribute to the project, check out the contributors docs and the steps to get started.

 

References

• oclif

cli's Issues

How to connect extension to more than one app?

Issue summary

shopify extension create allows extension to be created and connected to one Shopify app. In cases where you have development app and production app, how do we connect or register same extension with both apps?

shopify extension connect allows connecting only to previously selected development app so would love to know how to handle this case.

Expected behavior

As a developer, I should have flexibility of connecting/registering extension to more than one app in cases where we maintain development, staging & production app.

Actual behavior

Can't register already registered extension to new app.

[Design pattern] Inline diffs when writing files via CLI

Reference

I like this pattern from Astro, which shows you an inline diff of the file changes it’s going to make when adding an integration with npx astro add:

See also: https://asciinema.org/a/oiziD2fHo8Om72IeGBeON3Q5u

We have some existing use cases for this pattern with Hydrogen storefronts:

1. Our own equivalent plugin system i.e. shopify hydrogen add tailwind etc.
2. Optimizing GraphQL queries against overfetching; the intent is to present it as a diff in the user's terminal. A consistent pattern for presenting diffs in general would be good there; we could also go the next step via this affordance and offer to make the recommended changes to the query directly.
3. Hydrogen currently lints every deploy and will create PRs to fix certain defined problems, such as a missing or misconfigured Storefront API key. shopify hydrogen check could catch and propose those fixes locally, using this pattern, before it gets pushed to the repo and deployed.

Check licenses

Reference

We are adding many libraries and we should ensure they have a valid license. We could check it in the CI.

[Shopify.dev tutorial feedback] APP::ERROR::INVALID_CONFIG: host must be provided

There needs to be a section within step 2 that talks about how to set up the config before running "npm run dev". Getting the following error

localhost/:1 Uncaught
AppBridgeError2
action: undefined
message: "APP::ERROR::INVALID_CONFIG: host must be provided"
name: "AppBridgeError"
type: "APP::ERROR::INVALID_CONFIG"
stack: "AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided"
[[Prototype]]: Error

Feedback received for:

• Page: Create an app (/apps/getting-started/create)
• Section: Step 2: Start a local development server
• Sentiment: Negative

---

View User Agent Details

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Update dialogue prompt UI pattern

Reference

Was talking with @isaacroldan this morning about the ... pattern at the end of our dialogue prompts. The purpose of that ellipsis is, in theory, to let devs know that they can type to filter the selection they want. But we have broad agreement that it's not accessible enough to all devs. We'd like to opt for a more verbose pattern like fly.io ([Use arrows to move, type to filter]).

Fly example:

Current pattern in Shopify CLI 3.0:

Proposed pattern:

Visual notes: bold ? and >, no other bolding (it just ends up looking messier), the instructional text in a subdued color

Rationale:

• Clarity and accessibility (even for screen readers)
• Reserve ellipsis use for system actions that are being completed behind the scenes (ex: Building your app...)

Note on interaction pattern when user enters text to filter:

Isaac and I were thinking that — given that some of our prompts are longer and may wrap — it'd make more sense to display text that the user is entering AFTER the instructional text. This differs from fly.io, which interpolates the text between the question and the instructional text. (Quicktime attached.)

Screen.Recording.2022-06-01.at.2.08.09.PM.mov

NB: this issue isn't urgent, but is a solid nice-to-have DX win for the June Edition.

[Feature][Hydrogen]: Add `init` command

What area(s) will this request affect?

Hydrogen custom storefront

What type of change do you want to see?

New feature

Overview

This command would write a new hydrogen.config file to an existing project. It would prompt for items needed in the config, storefront token, storedomain and write the value to a new hydrogen.config file.

I think the Form module from enquirer is a good candidate for this.

Motivation

I see this command as being table stakes. Allow users to easily write a hydrogen config without opening a code editor.

[Bug]: Installed new create app can't start dev

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

The dev server should have started per the instructions stated in the instructions

📁~/site/shopify ➜ yarn create @shopify/app
yarn create v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "@shopify/[email protected]" with binaries:
      - create-app

Welcome. Let’s get started by naming your app. You can change it later.
✔ Your app's name? · test-cli3
✔ Which template would you like to use? · node
✔ Template downloaded
✔ App initialized
  ✔ Liquid parsed
  ✔ Updated package.json
✔ Dependencies installed with yarn
  ✔ Installed dependencies in /
  ✔ Installed dependencies in /web/
  ✔ Installed dependencies in /web/frontend/
✔ Completed clean up
✔ Git repository initialized

  test-cli3 is ready for you to build! Remember to cd test-cli3
  To preview your project, run yarn dev
  To add extensions, run yarn scaffold extension
  For more details on all that you can build, see the docs: shopify.dev (​https://shopify.dev​) ✨

  For help and a list of commands, enter yarn shopify app --help

Done in 107.02s.

Actual behavior

Dev server failed to start

 📁test-cli3 ⬢ v16.13.0 took 6s ➜ yarn dev
yarn run v1.22.17
$ shopify app dev
✔ Dependencies installed

━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    libsecret-1.so.0: cannot open shared object file: No such file or directory

    Stack trace:    at node         node:internal/modules/cjs/loader:1183

    at load         node:internal/modules/cjs/loader:981
    at _load        node:internal/modules/cjs/loader:822
    at require      node:internal/modules/cjs/loader:1005
    at require      node:internal/modules/cjs/helpers:102
    at <anonymous>  keytar/lib/keytar.js:1                 var keytar = require('../build/Release/keytar.node')
    at _compile     node:internal/modules/cjs/loader:1101
    at js           node:internal/modules/cjs/loader:1153
    at load         node:internal/modules/cjs/loader:981
    at _load        node:internal/modules/cjs/loader:822

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Stack trace

━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    libsecret-1.so.0: cannot open shared object file: No such file or directory

    Stack trace:    at node         node:internal/modules/cjs/loader:1183

    at load         node:internal/modules/cjs/loader:981
    at _load        node:internal/modules/cjs/loader:822
    at require      node:internal/modules/cjs/loader:1005
    at require      node:internal/modules/cjs/helpers:102
    at <anonymous>  keytar/lib/keytar.js:1                 var keytar = require('../build/Release/keytar.node')
    at _compile     node:internal/modules/cjs/loader:1101
    at js           node:internal/modules/cjs/loader:1153
    at load         node:internal/modules/cjs/loader:981
    at _load        node:internal/modules/cjs/loader:822

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Reproduction steps

1. yarn create @shopify/app
2. cd test-cli3
3. yarn dev

Operating System

Windows Linux Subsystem Ubuntu 20.4

Shopify CLI version (check your project's package.json if you're not sure)

3.0.24

Shell

zsh

Node version (run node -v if you're not sure)

16.13.0

What language and version are you using in your application?

Node 16.13.0

Create an `AbortGraceful` function to exit more cleanly on deliberate user actions

Reference

[Screenshot to come later, having yarn issues]

Currently there are a couple cases in, for instance, the create-hydrogen flow where users can deliberately decline to continue the process, but we exit as if it is an error.

Example: if you try to create a project that would require overwriting existing files, the CLI prompts you to ask whether you want to overwrite or not. If you choose "no", the console throws an error with AbortSilent, exiting with code 1.

It's odd for a clearly deliberate user action like this to result in an error. I'd prefer to create an alternate function like AbortGracefully (just a working name) to use in cases where we're exiting in response to user choice, not an error.

Instead of throwing an error, it should simply output a brief message that the process is exiting, and return the user safely to their terminal prompt.

Use `Resumable uploads` when uploading to GCS signed upload URL

Reference

We're currently uploading directly to the signed upload URL, use a resumable uploads instead.

https://cloud.google.com/storage/docs/access-control/signed-urls#signing-resumable

[Bug]: No .env file

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

cli should setup a .env file. There is no documentation of this change

Actual behavior

none is setup

Stack trace

No response

Reproduction steps

1. install new app
2. check directory

Operating System

Mac OS

Shopify CLI version (check your project's package.json if you're not sure)

3.0.19

Shell

No response

Node version (run node -v if you're not sure)

No response

What language and version are you using in your application?

No response

HTML & CSS styling inside post-auth screens is incorrect.

As can be seen by this HTML file, styling does render properly on the browser even though HTML tags are mismatched/unbalanced. This might cause issues later down the road, or may also cause browser-specific issues.

[Bug]: Please update ThemeCheckVersion to 1.10.3

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

CLI V3 has an outdated version of theme-check, 1.10.2. There is a subtle but important change in 1.10.3 which allows theme app extensions to yarn deploy without complaining about the use of the app liquid drop.

This is a big blocker from working on and testing out checkout-ui-extensions as the deploy fails on the theme check task.

Actual behavior

Theme check should not fail when encountering the app liquid drop, as per theme-check v1.10.3

Stack trace

No response

Reproduction steps

1. Bump the version of theme check found in:

   cli/packages/cli-kit/src/node/ruby.ts

   Line 15 in 402cf14

   const ThemeCheckVersion = '1.10.2'

Operating System

Mac OS Monterey

Shopify CLI version (check your project's package.json if you're not sure)

3.0.27

Shell

iTerm2

Node version (run node -v if you're not sure)

v18.3.0

What language and version are you using in your application?

3.1.2

[Bug]: Theme app extension fails to deploy

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

I should be able to deploy an extension with a locale file.

Actual behavior

Extension not deployed with an error message from the Partners API: "Extension must have only one default schema locale file"

Stack trace

Pushing your code to Shopify…

Reading the content of file at extensions/theme-app-extension/blocks/app-embed.liquid...
Reading the content of file at extensions/theme-app-extension/blocks/buy-buttons.liquid...
Reading the content of file at extensions/theme-app-extension/locales/en.default.json...
Reading the content of file at node_modules/@shopify/cli-kit/package.json...

Sending Partners GraphQL request:

  mutation ExtensionUpdateDraft($apiKey: String!, $registrationId: ID!, $config: JSON!, $context: String) {
    extensionUpdateDraft(
      input: {apiKey: $apiKey, registrationId: $registrationId, config: $config, context: $context}
    ) {
      extensionVersion {
        registrationId
        context
        lastUserInteractionAt
        location
        validationErrors {
          field
          message
        }
      }
      userErrors {
        field
        message
      }
    }
  }


With variables:
{
  "apiKey": "*****",
  "config": "{\"theme_extension\":{\"files\":{\"blocks/app-embed.liquid\":\"****\",\"blocks/buy-buttons.liquid\":\"****\",\"locales/en.default.json\":\"*****\"}}}",
  "registrationId": "1870790657"
}

And headers:
 - User-Agent: Shopify CLI; v=3.0.27
 - Sec-CH-UA-PLATFORM: darwin
 - X-Request-Id: b9a71cfe-ec13-45e4-83a8-34154cb8d547
 - Content-Type: application/json

Reading cached app information for directory ~/P/v/s...
Reading the content of file at node_modules/@shopify/cli-kit/package.json...

Running system process:
  · Command: ruby -v
  · Working directory: ~/P/v/s

Analytics event sent: {
  "schema_id": "app_cli3_command/1.0",
  "payload": {
    "command": "app deploy",
    "args": "--verbose",
    "time_start": 1657303349758,
    "time_end": 1657303354274,
    "total_time": 4516,
    "success": false,
    "error_message": "Extension must have only one default schema locale file",
    "uname": "darwin amd64",
    "cli_version": "3.0.27",
    "ruby_version": "3.1.2",
    "node_version": "16.15.0",
    "is_employee": false,
    "api_key": "****",
    "partner_id": ****
  }
}

Reproduction steps

1. Create a new theme app extension and add a theme app section block along with a locales/en.default.json file.
2. Run npx shopify app deploy
3. Error message comes back from Partner API

Operating System

Mac OS

Shopify CLI version (check your project's package.json if you're not sure)

3.0.27

Shell

iTerm2 zsh

Node version (run node -v if you're not sure)

v16.15.0

What language and version are you using in your application?

No response

[Feature]: Linting by default

What area(s) will this request affect?

App

What type of change do you want to see?

New feature

Overview

Since Shopify is attempting to provide a batteries included scaffolding solution - the lack of linting seems like a miss. In addition, with the new folder structure - linting and multiple linting configs creates a multi hour setup process.

Motivation

Shopify seems to think developers want more abstraction. While Jr devs may want this - this causes increased confusion for devs that want to know what the heck is going on. That said - if you are going to try to abstract away everything, considering adding a linting process built in so devs don't need to add additional time configuring eslint

Support retrieving releases for private repositories

Reference

Overview

The github module has a method for getting releases for a repository. We can read the credentials from the environment and use them in HTTP headers to support access to private repositories.

Motivation

More context https://github.com/Shopify/shopify-cli-next/pull/220#pullrequestreview-948295904

[Feature]: Split hydrogen "choose your template?" question

What area(s) will this request affect?

Hydrogen custom storefront

What type of change do you want to see?

Substantial change to existing feature

Overview

Split hydrogen "choose your template?" question into 2 questions:

1. for choosing the template

2. for choosing the language

Motivation

This pattern follows conventions set by other CLIs, as well as the rest of the Shopify CLI.

[Bug]: shopify logout not clearing credentials

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

It should have resetting the selected organization

Actual behavior

It visually logged me off - but changed nothing when running the app via yarn dev (--reset).

Stack trace

☁  price-changer [initial-frontend-funsies] shopify logout
Successfully logged out of your account
☁  price-changer [initial-frontend-funsies] yarn dev
yarn run v1.22.17
$ shopify app dev
✔ Dependencies installed

Looks like this is the first time you're running dev for this project.
Configure your preferences by answering a few questions.

✔ Fetching organization data
? Create this project as a new app on Shopify? … 
> Yes, create it as a new app
  No, connect it to an existing app

### Reproduction steps

1. Run `shopify logout` to log out of my work organization
2. Run `yarn dev` or `yarn dev --reset` to run my app and expect to be requested a login
3. The CLI connects me to my work organization. _If I choose `No, connect it to an existing app` it shows my work organizations' apps_.

_This is a week old app running `@shopify/app v3.0.24`_

### Operating System

maxOS Monterey v12.1 - Apple M1 chip

### Shopify CLI version (check your project's `package.json` if you're not sure)

3.0.24

### Shell

zsh

### Node version (run `node -v` if you're not sure)

v17.0.1

### What language and version are you using in your application?

React

Validate the cached Identity session

Context

An locally cached session might get invalidated by Identity leading to the following responses from the server:

Invalid 'subject_token' value: invalid

The only way to recover from it for the user is to logout with yarn shopify auth logout and invoke a command that triggers authentication, for example yarn dev

What

Identity provides an introspection endpoint to get the status of a token so we can use it to improve the developer experience. For example, we could trigger a full auth flow if the token exchange yields the above error and the introspection endpoint returns that the token is invalid.

[Bug]: Couldn't obtain a random port number

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

No error

Actual behavior

Just got an error after restarting the dev server:

Restarting the dev server a second time resolved the issue for me.

Stack trace

Unable to obtain an available random port number!

    Stack trace:    at getRandomPort              …er-cool-app/node_modules/get-port-please/dist/index.mjs:129  
    at processTicksAndRejection…  node:internal/process/task_queues:95                          
    at getRandomPort              …ister-cool-app/node_modules/@shopify/cli-kit/src/port.ts:10  
    at                            …@shopify/app/src/cli/utilities/app/http-reverse-proxy.ts:42  
    at all                                                                                      
    at runConcurrentHTTPProcess…  …@shopify/app/src/cli/utilities/app/http-reverse-proxy.ts:40  
    at dev                        …l-app/node_modules/@shopify/app/src/cli/services/dev.ts:119  
    at run                        …pp/node_modules/@shopify/app/src/cli/commands/app/dev.ts:73

Reproduction steps

Not sure tbh, can't reproduce it consistently.

Operating System

macOS Monterey

Shopify CLI version (check your project's package.json if you're not sure)

3.0.25

Shell

No response

Node version (run node -v if you're not sure)

No response

What language and version are you using in your application?

No response

[Feature]: Add a way for UI extensions to know their (tunnelled) backend URL

Reference

What type of project(s) will this request affect?

Extension

What type of change do you want to see?

New feature

Overview

Checkout extensions (and, likely, other extensions too) need to be able to call to their own app’s backend. These extensions generally require being served over HTTPS, and all network calls those extensions make will also need to be made over HTTPS.

Currently, an extension has no way of knowing the HTTPS URL of their backend during development. We need to give them a way to do so that will work and feel nice to use both in production and development.

This feels like it should probably be an environment variable that is injected in at build/ dev time, but I am not sure if we actually know before we start the development server what the tunnel URL will be. It's also a little odd as an environment variable because during development Shopify is the only one that knows/ can set the environment variable, whereas in production, the partner is the only one that will for sure know what the correct URL is.

Motivation

We were discussing extension network access and tunnelling in CLI 3.0, and this came up as an unknown!

[Bug]: Cannot run app dev

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

Having the app started

Actual behavior

I managed to workaround the libsecret issue. However, I'm stumbling across a new one that I think might be related to Docker and its credentials fetching (haven't checked the source, so I'm not sure).

Currently, when I run npm run shopify app dev

I'm getting the following:

Stack trace

No response

Reproduction steps

1. Run npm init @shopify/app@latest
2. Install libssl to workaround the first problem
3. npm run dev

Operating System

Ubuntu 20.04

Shopify CLI version (check your project's package.json if you're not sure)

3.0.24

Shell

No response

Node version (run node -v if you're not sure)

16.10

What language and version are you using in your application?

No response

[Bug]: yarn deploy fails when checkout-ui-extension and theme-app-extension exist in same repo

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

What type of project are you working on?

extension

Expected behavior

Running yarn deploy should work.

Actual behavior

yarn deploy fails.

Theme app extension runs bundle exec theme-check but this is failing for linter issues that should not be present in theme-check for theme app extensions. These linter issues cannot be disabled either (or where is the documentation?).

This is blocking deploying checkout-ui-extensions.

Example error:
error: UndefinedObject: Undefined object app

app is a valid liquid object for theme app extensions, ie: {{ app.metafields.NAMESPACE_HERE }}.

Stack trace

No response

Reproduction steps

1. Create a repo with various extensions, embedded app, etc
2. yarn deploy
3. fails.

Operating System

Mac OS Monterey

CLI version (run shopify version if you're not sure)

latest / 3.x

Shell

iTerm2

Ruby version (run ruby -v if you're not sure)

3.1.2

What language and version are you using in your application?

Ruby 3.1.2

[Bug]: Checking out app extension on new machine, no app commands

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

After checking out a repository with a Shopify App Extension set up on a new machine, I should be able to run $ npm run shopify -- app dev and get prompted for authentication info and other env setup.

Actual behavior

No app commands are found, for example:

$ npm run shopify -- app dev                                                                                                                                                 1 ↵  ✹switch-to-typescript

> [email protected] shopify
> shopify "app" "dev"


━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    command app:dev not found

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stack trace

No response

Reproduction steps

1. Create a new app extension
2. Delete web/ folder
3. Check out repo on machine without Shopify CLI setup (or maybe with?)

Not super sure if this is an accurate reproduction, we may have gotten ourselves into a weird state here by deleting the web/ folder (which we don't need).

Operating System

Mac OS Monterey

Shopify CLI version (check your project's package.json if you're not sure)

3.0.27

Shell

zsh

Node version (run node -v if you're not sure)

v16.13.0

What language and version are you using in your application?

No response

[Feature]: Consistent overwrite/force pattern

What area(s) will this request affect?

Hydrogen custom storefront

What type of change do you want to see?

Substantial change to existing feature

Overview

When creating a hydrogen storefront in a directory that already exists. The CLI will prompt you to Overwrite or Abort using the nonEmptyDirectoryPrompt from the ui package.

When adding eslint or tailwind, you can pass a --force flag to overwrite existing config. This command will abort automatically.

These behaviours are similar enough, I think they should share a pattern. I suggest:

• Always prompt if doing a destructive operation (overwriting or deleting files/folders) where the default (first) option is Abort.
• Always allow a --force flag to suppress the prompt.

This should be added to the Hydrogen global flags that are shared with most commands.

Motivation

Consistency in the UX for destructive operations will prevent users from making accidentally wrong choices and the CLI easier to use.

Add "did you mean?"

Reference

Add oclif plugin that asks the user if they meant something else when they introduced a non-existing command.

[Bug]: Locale in filename for locale directories is not validated

Reference

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

What type of project are you working on?

Extension

Expected behavior

Invalid locale file names are silently ignored. There is no error shown in the terminal or in the browser.

Actual behavior

Using invalid names for locale directories is silently ignored (foo.json). Files with *.default.json are matched regardless of whether the first part is a valid locale or not.

Stack trace

No response

Reproduction steps

1. Scaffold new extension
2. Rename existing locale files to something invalid like foo.json
3. Rename the default locale file to foobar.default.json

Operating System

macOS Monterey

Shopify CLI version (run shopify version if you're not sure)

3.0.12

Shell

No response

Ruby version (run ruby -v if you're not sure)

No response

What language and version are you using in your application?

No response

[Bug]: Static Ngrok URLs no longer work

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

Navigate to the static ngrok urls I've been using for dev in the past and everything tunnel correctly

Actual behavior

Overrides tunneling. Even though by default it uses ngrok, it suggests cloudflared as the approved method. Conflicting documentation and implementation.

Stack trace

No response

Reproduction steps

1. ngrok start configname
2. npm run dev
3. or npm run dev -- --tunnel-url ngrokURL
4. overrides and fails

Operating System

MAC OS

Shopify CLI version (check your project's package.json if you're not sure)

3

Shell

No response

Node version (run node -v if you're not sure)

No response

What language and version are you using in your application?

No response

[Deploys] Error handling for deployments

Reference

We need to ensure there's properly error handing for the UI extensions deployed through the deploymentCreate API. This includes:

• network retries - especially for the signed url mutation
• error handling (both signed URL mutation + deploymentCreate)
• ensuring proper error messages (consistent with the rest of the CLI codebase)

Notes on errors:

• let's surface more specific error codes (without leaking internal concepts like GCS signed URLs)
• include Partners HTTP request IDs in output for easier debugging + request tracing
• ensure there's partner identification (apiKey)

[Bug]: `shopify app dev` should update GDPR webhook URLs

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

This is the same as the issue reported for Shopify CLI 2.0.

When you run shopify app dev it updates the App URL and Whitelist URLs with the new ngrok URLs in the Partner Dashboard but it doesn't update the mandatory GDPR webhook URLs.

Actual behavior

The mandatory GDPR webhook URLs have the previous ngrok URL unless changed manually.

Stack trace

No response

Reproduction steps

1. Run shopify app dev or npm run dev
2. Check Partner Dashboard App Setup
3. Mandatory GDPR webhook URLs have not been updated

Operating System

Arch Linux

Shopify CLI version (check your project's package.json if you're not sure)

@shopify/cli/3.0.24 linux-x64 node-v16.13.0

Shell

GNU bash, version 5.1.16(1)-release (x86_64-pc-linux-gnu)

Node version (run node -v if you're not sure)

v16.13.0

What language and version are you using in your application?

PHP 7.4.29 (legacy app that doesn't work with PHP 8.x)

Create GitHub releases aggregating the CHANGELOG changes

Context

Each package in this monorepo has its CHANGELOG.md file where changesets writes the changes every time we release new versions of the packages. Because we have a changelog file per package, it's cumbersome to get an overview of all the changes of a given version. It requires the user to go through all the CHANGELOGs in the repository.

What

We are not the only ones with this need so the aggregation feature is being implemented. Once it's merged, we can leverage it to create GitHub releases aggregating all the CHANGELOG updates.

Support for cloning private repositories

Reference

Some users might need to scaffold and create apps using templates that live in private repositories. When that happens and the git CLI prompts the user to authenticate the CLI hangs indefinitively.

[Bug]: Can't connect Github account to Shopify

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

What type of project are you working on?

app

Expected behavior

Okay, Shopify support sent me here, although I'm not sure why because I'm not inside the command line.

My issue is connecting my account form the Online store.
I've read through the guides, tried a new development store, a different browser and the issue is that the Shopify app integration is not connecting my Github. It is remaining stuck on a loading page.

Actual behavior

Stuck on loading screen, no Github account, no branch to connect to.

Stack trace

No response

Reproduction steps

1.Online store
2.Add theme
3.Connect to Github

Operating System

MacOs

CLI version (run shopify version if you're not sure)

2.19

Shell

No response

Ruby version (run ruby -v if you're not sure)

No response

What language and version are you using in your application?

No response

[Bug]: New CLI issue with PHP template

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

Need to install the Laravel vendor folder and other dependencies and start the APP.

Actual behavior

It interrupts the flow with errors.

Stack trace

No response

Reproduction steps

1. npm init @shopify/app@latest -- --template php
2. cd dirname
3. npm run dev

Operating System

Window 11

Shopify CLI version (check your project's package.json if you're not sure)

3.0.26

Shell

window CMD

Node version (run node -v if you're not sure)

v16.15.0

What language and version are you using in your application?

PHP 8.1.4

[Bug]: CDN assets do not load in the `shopify theme dev` on Safari due to CORS issues

This issue was fixed by Shopify/shopify-cli#1952, however it was reverted Shopify/shopify-cli#1985 because the development server was throttling asset requests.

Expected behavior

When users open the product page, they should see something like this in the browser console:

Actual behavior

However, when users open the product page, they see something like this in the browser console:

Stack trace

No response

Reproduction steps

• Run shopify theme init to create a new theme
• Import product data from products.csv in your store
• Run shopify theme serve
• Interact with the Classic Varsity Top and observe the browser consol

Operating System

Mac OS

CLI version (run shopify version if you're not sure)

2.11.2

Shell

zsh

Ruby version (run ruby -v if you're not sure)

2.7.5

What language and version are you using in your application?

Ruby 2.7.5

Extension configuration files need to support reloading changes developers make during development

Reference

In checkout/ post-purchase extensions, we will be using the configuration file for the developer to list many important pieces of metadata about their extension:

• The extension points that their extension supports (and, for extensions that support multiple extension points, am optional declaration of which one is the "default")
• A list of metafield namespace/ key pairs that we will fetch and provide to extensions at runtime, allowing them to get additional information on resources in the checkout
• The configuration schema for that extension, which will be presented to the merchant to collect install-time configuration on behalf of the extension
• The access scopes the extension is requesting, which controls what data the extension can see and the capabilities (e.g., network access) that it will have at runtime

All of these properties can affect the runtime behavior of extensions, so a developer may edit them while working on their project locally. Ideally, the development server should give full visibility to the host app (checkout in our case) so that we can restart the extension with its new configuration.

Of the features listed above, we only support extension_points and metafields currently. Right now, developers who change these keys in their configuration file need to manually restart their extension development server for the changes to take effect.

cc/ @t6d @kumar303 @pepicrft

Extract all messages to a file

Reference

By @gonzaloriestra:

It would be useful to have separate file(s) to store all the messages used in the CLI, as we have in the CLI 2.0.

[Bug]: Invalid schema: class is invalid for TailwindCSS classes

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

What type of project are you working on?

theme

Expected behavior

Shopify CLI does not validate TailwindCSS classes:

{% schema %}
{
  "name": "Featured products",
  "tag": "div",
  "class": "pt-large tablet:pt-medium pb-large",
  "settings": [
  ]
}
{% endschema %}

See also: Shopify/shopify-cli#1449

Actual behavior

Invalid schema: class is invalid

Stack trace

No response

Reproduction steps

1. Add TailwindCSS class with special character (e.g. colon) to "class" section schema.
2. Serve theme to store (shopify theme serve).

Operating System

Mac OS Monterey

CLI version (run shopify version if you're not sure)

2.18.0

Shell

bash

Ruby version (run ruby -v if you're not sure)

2.7.0p0

What language and version are you using in your application?

No response

creating an app using npm init @shopify/app@latest results in not being able log in to Shopify Partners site for app auth

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

I expect that hitting npm run dev should open the shopify partner site and authenticate my app

Actual behavior

I get an error that says "Auto-open timed out"

Further, the link the cli then provides seems to have a typo in it. The word "scope" is misspelled and this is what is probably causing the issue.

eg ...accounts.shopify.com/oauth/authorize?client_id=fbdb2649-e327-4907-8f67-908d24cfd7e3&scoppe=openid+

Stack trace

No response

Reproduction steps

1. npm init @shopify/app@latest
2. npm run dev
3. press any key

Operating System

Windows 11

Shopify CLI version (check your project's package.json if you're not sure)

3

Shell

psh

Node version (run node -v if you're not sure)

16.4.2

What language and version are you using in your application?

javascript (react)

[Feature]: The new cli version is well, but not work very well~

What area(s) will this request affect?

App

What type of change do you want to see?

New feature

Overview

After the Summer 22 release, after 3 days of testing, we found some difficult parts of the new CLI:
File structure part: Although the current version of Summer 22 clearly states the structure of the App folder, sometimes web>package.json | web/frontend>package.json and their corresponding vite.config.js files are often not easy to distinguish Directory level, but this can be individually coded through code ./web/frontend (we feel that using ide in the app folder directory to open the entire code directory for work is sometimes a bit mentally heavy, not like ruby: Shopify-CLI The 2.19 version is delightful).

Functional part: Shopify is betting on JavaScript, so it can be seen that Javascript is being embraced by Shopify, which is a very good thing, which means that developers (without ruby ​​programming knowledge) can more easily understand the shopify cli work flow , but as far as the current cli function is concerned, Vitejs still has problems with HMR hot module reloading in web/frontend (this is also mentioned by Shopify in the known issues), but it is not the case that hot reloading in Firefox will encounter The problem, in fact, will also encounter problems in Chrome, for example, Page reload will occur after modifying any page or module code, so websocket is currently not working as well as CLI 2.x, other than that, other parts 's integrations are very likeable, such as code testing and a more sensible Shopify API integration and request method.

Also I have to say that Shopify is very developer friendly, they always make developers more excited to follow Shopify, we are just like that~hah.
nice shopify, nice ecommerce solution.

Motivation

Summer 22 Version Thinking

[Bug]: Unable to obtain an available random port number

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

I should be able to run shopify dev --tunnel-url=https://my-project.ngrok.io:8082 and start a dev server.

Actual behavior

After following the upgrade directions on the Shopify developer website, the shopify app dev app fails:

shopify app dev --tunnel-url=https://my-project.ngrok.io:8082

Note that this command needs more documentation. It took me a while to figure out that the port number was meant to be the local port number that ngrok is mapped to. I eventually got that sorted only to be met with this error:

frontend | bbbbbb Error bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
frontend |     Unable to obtain an available random port number!
frontend | 
frontend |     Stack trace:    at getRandomPort              shopify/node_modules/get-port-please/dist/index.mjs:129       
frontend |     at processTicksAndRejectionb&  node:internal/process/task_queues:96                          
frontend |     at getRandomPort              shopify/node_modules/@shopify/cli-kit/src/port.ts:10          
frontend |     at dev                        shopify/node_modules/@shopify/app/src/cli/services/dev.ts:65  
frontend |     at run                        b&fy/node_modules/@shopify/app/src/cli/commands/app/dev.ts:73  
frontend | 
frontend | bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

The CLI seems to be falling over just after getting the tunnel host and the frontend port, then crashes on await getRandomPort()

I don't know what could be causing this but I doubt it's a bug in get-port-please. I created an empty project and was able to get a random port number directly from that library without having a crash.

Stack trace

No response

Reproduction steps

1. run shopify dev with tunnel-url option set
2. choose existing organization
3. choose existing app
4. boom

Operating System

Mac OS Monterey

Shopify CLI version (check your project's package.json if you're not sure)

3.0.25

Shell

zsh

Node version (run node -v if you're not sure)

16.13

What language and version are you using in your application?

Node 16.13

Investigate and fix changesets causing major version bumps when minor changes are present

Context

When there are changeset files with minor changes, changeset version might yield a major version bump. When this happened in the past, we manually changed all the minor changes to patch and ran changeset version again. This is not ideal because it prevents us from automating the release e2e.

What

Investigate why the major bumps are happening and fix it.

Standardize naming convention for flags / environment variables

Reference

Originally raised in review of #223

We should align on a common naming pattern for flags and their corresponding environment variables.

Considerations:

• ✅ Namespacing for Shopify (i.e., env vars should always start SHOPIFY_...)
• ❓ Namespacing by CLI module (i.e. SHOPIFY_HYDROGEN_..., SHOPIFY_APP_...)
• ❓ Anything else?

[Bug]: Root Directory Install Links Fail in Production using Heroku Container deployment

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

App

Expected behavior

When installing a development app from the Shopify Partner dashboard the request is send to the Root path as follows:

https://test-app.herokuapp.com/?shop=blah.myshopify.com&hmac=123&host=12312&timestamp=123

This should automatically redirect to the following path: /api/auth?shop=blah in order to authorize the app.

Actual behavior

Using npm run dev, this works as expected. However, once deployed to Heroku using docker this functionality does not work as expected and instead of redirecting the user to the authorize page the following message is displayed: "There’s no page at this address"

IF any path is added to the end of the URL then the redirect triggers and works as expected, so TLDR:

Using Heroku Docker

• This Link will NOT work: https://some-app.herokuapp.com/?shop=blah.myshopify.com&hmac=123&host=12312&timestamp=123
• This Link WILL work: https://some-app.herokuapp.com/anyoldthing?shop=blah.myshopify.com&hmac=123&host=12312&timestamp=123

Stack trace

No response

Reproduction steps

1. npm init @shopify/app@latest
2. name app and choose node
3. cd to app
4. npm run dev > app installs as expected via direct link or partner store
   (follow instructions in web/docs/heroku.md)
5. git init
6. git add .
7. git commit -m "initial version"
8. heroku container:login
9. heroku create -a some-app -s container
10. npm run info --web-info
11. heroku config:set HOST=blah123 SCOPES=write_products SHOPIFY_API_KEY=123 SHOPIFY_API_SECRET=123a
12. create heroku.yml
13. git add heroku.yml
14. git commit -m "add heroku manifest"
15. git push heroku master > builds docker image
16. login to partners.shopify.com > apps
17. click on app
18. under Test App click Select Store
19. Click install App on any Store
20. Observe error

Operating System

Heroku Container

Shopify CLI version (check your project's package.json if you're not sure)

3.0.24

Shell

bash

Node version (run node -v if you're not sure)

v18.2.0

What language and version are you using in your application?

Node / React / Express

[Feature]: List files in a theme

What type of project(s) will this request affect?

theme

What type of change do you want to see?

New feature

Overview

I'm currently working on shopify theme 2.0 to support multiple storefronts. As each store will end up creating different json templates from theme editor, it would be better to have a cli command to get list of all files and also based on subfolders.

Currently i'm maintaining list of files in shopifyignore. But during new storefront theme push i have to remove shopifyignore while pushing new theme version to existing stores.

This will help me to write deploy scripts to ignore those json files and avoid overwriting changed json templates in theme editor

It would be also good to have a cli command to get list of changed files from theme editor

So basically 2 request

1. Get list of files from current theme
2. Get list of changed files

Motivation

I'm currently working on shopify theme 2.0 to support multiple storefronts. As each store will end up creating different json templates from theme editor

Introduce support to "Connect from Github" at the CLI

Context: Shopify/shopify-cli#2200 (comment)

[Feature request] Commands to rename, duplicate, view or customize a remote theme

Since shopify theme has delete and publish commands, it will also be nice if there are other commands based on the options available in Shopify Admin.

rename command, the CLI version of the Rename option. Shows the list of themes to pick from, then shows the prompt to enter a new name. A blank input cancels the operation.

duplicate command, the CLI version of the Duplicate option. Shows the list of themes to pick from, then shows the prompt to enter a name for the duplicate. A blank input cancels the operation.

view command (with preview and customize as aliases), the CLI version of the View or Preview as well as the Customize options. Shows the list of themes to pick from, then shows the two links which will help view or customize the theme:

  View your theme:
  https://sample-store.myshopify.com/

  Customize this theme in the Online Store Editor:
  https://sample-store.myshopify.com/admin/themes/1234567890/editor

[Bug]: yarn dev / checkout extensions / --tunnel-url

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

What type of project are you working on?

extension

Expected behavior

Running yarn dev with a custom tunnel url should work, and the extension preview and dev-console should also work.

Run: yarn dev --tunnel-url=https://shopify-cli-bugs.ngrok.io

Visit: https://shopify-cli-bugs.ngrok.io/extensions/dev-console

The dev console should load.

Actual behavior

When accessing the defined tunnel url dev console, the browser shows an error like:

ERR_NGROK_3200
Tunnel shopify-cli-bugs.ngrok.io not found

Stack trace

No response

Reproduction steps

1. run: yarn dev --tunnel-url=https://shopify-cli-bugs.ngrok.io
2. visit: https://shopify-cli-bugs.ngrok.io/extensions/dev-console
3. error

You'll need to use a custom tunnel name through ngrok.

When yarn dev generates a random ngrok url - the dev console loads, as does the checkout ui extension preview.

Operating System

Mac OS Monterey

CLI version (run shopify version if you're not sure)

latest / 3.x

Shell

iTerm2

Ruby version (run ruby -v if you're not sure)

3.1.2

What language and version are you using in your application?

Ruby 3.1.2

[Bug]: Deploy App (without running dev server) > App Url in Partners links to 404 page

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Extension

Expected behavior

Typically, the App Url would be set to an ngrok url if you ran npm run dev or yarn dev before deploying and creating the app through the CLI. In this case, if you don't ever run an app locally, a default App Url appears to be set. When a defauIt URL is used, it should resolve to a page that does not 404.

In addition to this, it would be helpful if this linked to a page to tell me that I need to either deploy the App to a public URL or run the app locally in order to generate a functional merchant install link.

Actual behavior

The link for the App Url in the Partners app is https://shopify.github.io/shopify-cli/help/start-app/ which goes to a 404 page.

Stack trace

No response

Reproduction steps

1. Create a new app using yarn create @shopify/app --template node.
2. Scaffold a new extension using yarn scaffold extension.
3. Deploy WITHOUT running yarn dev. Use yarn deploy to deploy and create a new app.
4. Navigate to the partners link and you'll see the App URL field is set to https://shopify.github.io/shopify-cli/help/start-app/ which is a 404 page.

Operating System

Mac OS Monterey

Shopify CLI version (check your project's package.json if you're not sure)

3.0.24

Shell

zsh

Node version (run node -v if you're not sure)

v18.0.0

What language and version are you using in your application?

Node

Auto-upgrade

Reference

When the CLI is installed globally, for example for theme development, we can provide an auto-upgrade functionality.

`theme dev` doesn't support captcha on customer login page

Issue summary

When Captcha support is enabled, browsing to http://127.0.0.1:9292/account/login will sometimes trigger the captcha.
Submitting the captcha on http://127.0.0.1:9292/challenge just redirects back to the same page.

See https://community.shopify.com/c/online-store-2-0/unable-to-log-into-customer-account-when-using-shopify-theme/m-p/1343096/highlight/false#M1414

Expected behavior

Solving the captcha should log you in as a customer.

Actual behavior

It just circles back to http://127.0.0.1:9292/challenge.

Tip: include an error message (in a <details></details> tag) if your issue is related to an error

Steps to reproduce the problem

1. Enable captcha & Customer login in shop settings
2. shopify theme serve
3. Browse to http://127.0.0.1:9292/account/login
4. Submit a bad login
5. You should be redirected to http://127.0.0.1:9292/challenge
6. Solving the captcha and clicking "Submit" redirects you back to http://127.0.0.1:9292/challenge

Workaround

Disable captcha for Customer Login.

Specifications

• App type: theme
• Operating System: macOS
• Shell: zsh
• Ruby version (ruby -v): 2.7.1