Shopify CLI 3x & Shopify Theme Serve

[james0r]

Just upgraded to Shopify CLI 3 and noticing the serve command is shopify theme dev https://shopify.dev/themes/tools/cli/migrate. Has this just not been updated in theme labs yet or is it still advised to stay on Shopify CLI 2?

[lukecharle]

I don't think it'll be updated now to be honest, but its a simple change, just updated the script to the following in package.json

"shopify:serve": "cd shopify && npm exec -- shopify theme dev",

Have been using it no problem on my end.

[james0r]

Thanks @lukecharle

I also needed to specify my theme path with --path shopify where my /shopify directory is a direct child of the NPM root.

My NPM scripts ended up looking like

  "scripts": {
    "start": "run-p -sr shopify:dev vite:watch",
    "deploy": "run-s vite:build && shopify theme push --path shopify",
    "deploy:new": "run-s vite:build && shopify theme push --unpublished --path shopify",
    "vite:watch": "cross-env NODE_ENV=development vite build --watch --mode 'development' --config .config/vite.config.js",
    "vite:build": "cross-env NODE_ENV=production vite build --mode 'production' --config .config/vite.config.js",
    "shopify:dev": "shopify theme dev --path shopify",
    "shopify:pull": "shopify theme pull --path shopify",
    "lint": "run-s -c lint:*",
    "lint:js": "eslint src/**/*.js --config .config/.eslintrc.js",
    "lint:css": "stylelint src/**/*.{css,sass,scss} --config .config/.stylelintrc.js",
    "lint:shopify": "shopify theme check --path shopify",
    "fix": "run-s -c fix:*",
    "fix:js": "eslint src/**/*.js --config .config/.eslintrc.js --fix",
    "fix:css": "stylelint src/**/*.{css,sass,scss} --config .config/.stylelintrc.js --fix",
    "fix:shopify": "shopify theme check -a --path shopify"
  },

I've tested npm run dev and npm run deploy and they seem to be working as expected.