Local development

Set up asc-shopify-src and the theme submodule, run the webpack watcher and a Shopify development theme.

Local development runs two processes together. Webpack compiles src/ into theme/assets/, and Shopify CLI serves theme/ as a development theme on the australian-sports-camps store. npm run dev starts both.

The commands in the root README.md (npm run tw, npm run theme-dev and npm run watch) no longer exist at the root. Use the commands on this page instead.

Before you start

You need the following:

Node.js and npm. The root package.json declares npm@10.8.1. Nothing pins a Node version.
Shopify CLI, and a staff account on the australian-sports-camps store with theme permissions.
SSH access to the Conversion-Kings/asc-shopify-theme repository on GitHub. The submodule URL in .gitmodules uses SSH.
The two build values for src/.env, from another developer or the Google Cloud console.

Set up the repository

Clone with the submodule:
```
git clone --recurse-submodules git@github.com:Conversion-Kings/asc-shopify-src.git
```
If you have already cloned without it, run git submodule update --init.
Install dependencies from the repository root:
```
npm install
```
This installs every workspace and runs prepare, which installs the husky pre-commit hook.
Create src/.env from src/.env.example and fill in both values:

Variable Used for
GOOGLE_PLACES_API_KEY School search in the booking form
ZOHO_INTEGRATION_API_ENDPOINT Club search in the booking form

Webpack inlines both values into theme/assets/camp-booking.bundle.js at build time. The build fails if either is missing. More detail is in Environment variables.
Check out a branch in the theme submodule before you change anything in it:
```
git -C theme checkout main
git -C theme pull
```
A fresh submodule checkout is on a detached commit.
Authenticate Shopify CLI. The first shopify theme command opens a browser login.

Variable	Used for
`GOOGLE_PLACES_API_KEY`	School search in the booking form
`ZOHO_INTEGRATION_API_ENDPOINT`	Club search in the booking form

Run the development servers

npm run dev

Turbo runs three tasks in one terminal:

Task	What it does
`@repo/asc-modules#watch`	Webpack in watch mode, writing bundles into `theme/assets/`
`@repo/theme#theme-dev`	`shopify theme dev --environment dev`, which serves `theme/` as a development theme and prints a preview URL
`@repo/asc-modules#postcss`	Tailwind into `src/css/tw_out.css`. Nothing loads that file, so this task has no effect on the theme

When webpack rewrites a file in theme/assets/, Shopify CLI uploads it to the development theme.

To run the processes separately:

npm run watch -w @repo/asc-modules
npm run theme-dev -w @repo/theme

Theme editor sync

The dev environment in theme/shopify.theme.toml sets theme-editor-sync = true. Changes made in the theme editor on your development theme are written back into your local templates/*.json and config/settings_data.json.

Use npm run theme-dev:no-sync -w @repo/theme when you do not want that, for example while you are editing the same JSON files by hand.

Environment	Development theme	Theme editor sync
`dev`	Yes	Yes
`dev-no-sync`	Yes	No
`default`	No, prompts for a theme	Yes
`default-no-sync`	No, prompts for a theme	No

Build once

npm run build

This runs a production webpack build into theme/assets/. The pre-commit hook runs it too, see Releasing a change.

Things that catch people out

git status in asc-shopify-src does not show changes inside theme/. .gitmodules sets ignore = all. Run git -C theme status to see them.

The booking form bundle loads only on product pages that use the theme.product layout. Test it on a camp product, not on a content page.

Tailwind scans src/**/*.{ts,tsx} and the theme's sections, snippets and layout folders. A class that appears only in src/js/*.js, theme/assets/*.js or a JSON template is not generated unless it is in the safelist in src/tailwind.config.js.

The webpack config loads ./.env relative to the working directory. Run webpack through the workspace scripts, which run from src/, rather than from the root.