Local development

Your site on localhost

Build your shop on http://localhost against the live scripts and API, as is: the Storefront API accepts requests from any origin, so nothing needs configuring.

Serve your files over HTTP. Browsers don't run module scripts from file://. Any static server works (npx serve ., python3 -m http.server 8080), or your framework's dev server.
Use a preview token. On the Headless page, create a token of the Preview kind (odpv_…) labelled, say, "Local development". Its carts are preview carts: they work even while the shop is a draft, paused or outside its sale window, they go through the hosted checkout to the real totals, and they pay only with Stripe's test cards, so testing can't take a real order or real money. You can revoke it without touching your live site.
Keep it in your local settings. Put the preview token in a file that never ships: a config.js or .env your deploy leaves out, with your site's public token in the deployed one. A preview token on your live site would give buyers test-mode carts that take no real card; see Security.
It's your real shop. The products, prices and stock are live. Preview carts don't count as abandoned carts and get no recovery emails, and checkout says "Test mode" and takes test cards such as 4242 4242 4242 4242.
Back links go to your website. Checkout's "Continue shopping" and the confirmation's back link go to Your website, which is your live site, not localhost.

Testing a release before it's published

This part is for people with Organization Depot's web repository: our developers, and anyone testing an unreleased version of the scripts against a local Organization Depot.

Build the release folder exactly as developers.organizationdepot.com will serve it, and serve it locally:

task web:pnpm -- --filter @orgdepot/storefront release:assemble
task web:pnpm -- --filter @orgdepot/storefront release:serve

release:assemble builds both packages and writes web/packages/storefront-sdk/release/:

release/
  1.3.0/
    storefront.js, storefront.js.map
    storefront.mjs, storefront.mjs.map
    components.js, components.js.map
    types/*.d.ts
    integrity.json
  section/         the values these pages fill in, and the starters as .zip files

release:serve serves that folder on http://localhost:4600 (--port 4700 for another port) with the same paths and headers as developers.organizationdepot.com:

Path	Serves	`Cache-Control`
`/storefront/1.3.0/…`	The release	`public, max-age=31536000, immutable`
`/storefront/v1/…`	The same files	`public, max-age=300`
Anything else	`404`	`no-store`

Every response has Access-Control-Allow-Origin: *, X-Content-Type-Options: nosniff and Cross-Origin-Resource-Policy: cross-origin, and scripts are text/javascript; charset=utf-8.

These docs build from the same release. task web:pnpm -- --filter @orgdepot/developer-docs site:assemble renders them into web/packages/developer-docs/release/, and site:serve serves that on http://localhost:4601 the way developers.organizationdepot.com does.

Then point your page at it, and at a local backend:

Setting	Local value
Script base	`http://localhost:4600/storefront/1.3.0`
`apiUrl` / `api-url`	`http://localhost:12001/api`
Token	One created on the local admin's Headless page

A preview token from the local admin lets you test carts and checkout on a local shop that isn't open.

In the starters, that's scriptBase and apiUrl in config.js. Checkout then goes to the local storefront, http://{organization}.storefront.localhost:4504/{shop handle}/c/…, which needs the storefront app running (task web:pnpm -- dev:storefront). A local backend also accepts http://localhost… as Your website, so the back links can return to your local page.

If your page has a Content-Security-Policy, add http://localhost:4600 to script-src and http://localhost:12001 to connect-src and img-src while you test.