shopify-local-dev-loop

# Shopify Local Dev Loop ## Overview Set up a fast, reproducible local development workflow using Shopify CLI, ngrok tunneling for webhooks, and Vitest for testing against the Shopify API. ## Prerequisites - Completed `shopify-install-auth` setup - Node.js 18+ with npm/pnpm - Shopify CLI 3.x (`npm install -g @shopify/cli`) - A Shopify Partner account and development store ## Instructions ### Step 1: Scaffold with Shopify CLI ```bash # Create a new Remix-based Shopify app (recommended) shopify app init # Or scaffold manually mkdir my-shopify-app && cd my-shopify-app npm init -y npm install @shopify/shopify-api @shopify/shopify-app-remix \ @shopify/app-bridge-react @remix-run/node @remix-run/react ``` ### Step 2: Project Structure ``` my-shopify-app/ ├── app/ │ ├── routes/ │ │ ├── app._index.tsx # Main app page │ │ ├── app.products.tsx # Products management │ │ ├── auth.$.tsx # OAuth callback │ │ └── webhooks.tsx # Webhook handler │ ├── shopify.server.ts # Shopify API client setup │ └── root.tsx ├── extensions/ # Theme app extensions ├── shopify.app.toml # App configuration ├── .env # Local secrets (git-ignored) ├── .env.example # Template for team └── package.json ``` ### Step 3: Configure shopify.app.toml ```toml # shopify.app.toml — central app configuration name = "My App" client_id = "your_api_key_here" [access_scopes] scopes = "read_produ...