doc-site
Reference

npm scripts

Every script in package.json, what it runs, and when to use it.

npm scripts

Development

ScriptRunsNotes
npm run devrun-pty ./run-pty.jsonThe four-process stack. The normal way to work
npm run dev:viteviteVite alone on https://localhost:5173
npm run dev:cssnpm run build:css -- --watchPostCSS watch, rebuilding the Tailwind output
npm run dev:shopifyshopify theme dev --environment dev --port 9292 --reconciliation-strategy keep-local --theme-editor-syncShopify preview alone
npm run dev:tunnelnode scripts/start-cloudflare-tunnel.mjsCloudflare tunnel alone

Build

ScriptRunsNotes
npm run buildnpm run build:css && vite buildRewrites assets/ and snippets/vite-tag.liquid. Run before every commit
npm run build:csspostcss src/assets/theme_in.css -o src/entrypoints/theme.styles.css --config .Tailwind output only
npm run typechecktsc --noEmitType checks src/. Writes nothing

Quality

ScriptRunsNotes
npm run lintshopify theme checkShopify's Liquid linter. Configured in .theme-check.yml
npm run lint:fixshopify theme check -aApplies safe auto-corrections
npm run formatprettier --write .Includes Liquid, through @shopify/prettier-plugin-liquid
npm run format:checkprettier --check .Reports without writing

There is no test script. This repository has no test suite.

Shopify

ScriptRunsNotes
npm run pullshopify theme pullDownloads theme files from the store
npm run pushnpm run build && shopify theme pushBuilds, then pushes to the configured theme
npm run deploynpm run build && node scripts/deploy.cjsDuplicates the live theme and pushes to the copy
npm run onboardnode scripts/onboard.cjsInteractive first-time setup wizard
npm run listshopify theme listThemes on the store with IDs and roles
npm run openshopify theme open -e devOpens the dev theme preview
npm run consoleshopify theme console -e devLiquid REPL against the dev environment
npm run profileshopify theme profile -e devLiquid render profiling for a page

npm run push targets the theme selected by shopify.theme.toml, so read that file before running it. For a preview, use the helper described in Deployment instead.

Deploy flags

npm run deploy -- --name "Beauty Affairs v6.8.0"
npm run deploy -- --force

--name overrides the name built from themeNameTemplate and version in package.json. --force skips the confirmation when a theme of that name already exists, and appends a timestamp so the names stay unique.

Hooks

HookRuns
preparesimple-git-hooks, installing the hooks on npm install
pre-commitnpx lint-staged && npm run build

lint-staged runs Prettier over staged .liquid, .js, .css, .scss, .json and .md files.

The pre-commit build means every commit carries matching output in assets/. It also means commits are slow, and that a commit can add files you did not stage. Run npm run build yourself first so you can review the output before it is committed.

Configuration files

FileConfigures
package.jsonScripts, dependencies, theme name template, version
vite.config.jsVite, the Shopify plugin, asset cleanup
postcss.config.cjsTailwind, postcss-preset-env, cssnano
tailwind.config.cjsTailwind, with the tw- prefix and the BA colour tokens
tsconfig.jsonTypeScript, target ES2022, strict, path aliases
.theme-check.ymlTheme Check, extending theme-check:recommended
.prettierrcPrettier, with the Liquid plugin
.prettierignoreFiles Prettier skips, including vendor snippets
.shopifyignoreFiles excluded from theme pushes
shopify.theme.tomlStore and environments
run-pty.jsonThe four dev processes
.nvmrcNode 24.4.0

On this page