Move the demo-store to https://github.com/Shopify/hydrogen-demo-store (…

…Shopify#1769)

Also add deployments for the skeleton template and examples.

.changeset/config.json

@@ -7,6 +7,6 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["hello-world", "demo-store", "example-*"],
+  "ignore": ["hello-world", "example-*"],
   "privatePackages": {"version": true, "tag": true}
 }

.eslintrc.js

@@ -10,38 +10,5 @@ module.exports = {
     'no-useless-escape': 'off',
     'no-case-declarations': 'off',
   },
-  overrides: [
-    {
-      files: ['./templates/demo-store/*'],
-      rules: {
-        'import/order': [
-          'error',
-          {
-            /**
-             * @description
-             *
-             * This keeps imports separate from one another, ensuring that imports are separated
-             * by their relative groups. As you move through the groups, imports become closer
-             * to the current file.
-             *
-             * @example
-             * ```
-             * import fs from 'fs';
-             *
-             * import package from 'npm-package';
-             *
-             * import xyz from '~/project-file';
-             *
-             * import index from '../';
-             *
-             * import sibling from './foo';
-             * ```
-             */
-            groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
-            'newlines-between': 'always',
-          },
-        ],
-      },
-    },
-  ],
+  overrides: [],
 };

.github/workflows/changesets.yml

@@ -88,10 +88,6 @@ jobs:
         run: |
           node scripts/compile-template-for-dist.mjs hello-world
 
-      - name: Compile demo-store
-        run: |
-          node scripts/compile-template-for-dist.mjs demo-store
-
       - name: Update templates in the dist branch
         run: |
           git add .
@@ -115,24 +111,24 @@ jobs:
   #     - name: Update package-lock.json
   #       run: npm install --package-lock-only --ignore-engines
 
-      # TODO: Figure out how to push to protected branch
-      # - name: Push commit to main branch
-      #   run: |
-      #     git add .
-      #     git status
-      #     git config user.email "[email protected]"
-      #     git config user.name "Hydrogen Bot"
-      #     git show-ref
-      #     git commit -m "[ci] Update package-lock.json"
-      #     git push origin HEAD:main
-
-      # - name: Sync latest to version branch
-      #   run: |
-      #     git config user.email "[email protected]"
-      #     git config user.name "Hydrogen Bot"
-      #     git show-ref
-      #     git commit -m "[ci] release ${{ needs.changelog.outputs.latestBranch }}"
-      #     git push origin main:${{ needs.changelog.outputs.latestBranch }} --force
+  # TODO: Figure out how to push to protected branch
+  # - name: Push commit to main branch
+  #   run: |
+  #     git add .
+  #     git status
+  #     git config user.email "[email protected]"
+  #     git config user.name "Hydrogen Bot"
+  #     git show-ref
+  #     git commit -m "[ci] Update package-lock.json"
+  #     git push origin HEAD:main
+
+  # - name: Sync latest to version branch
+  #   run: |
+  #     git config user.email "[email protected]"
+  #     git config user.name "Hydrogen Bot"
+  #     git show-ref
+  #     git commit -m "[ci] release ${{ needs.changelog.outputs.latestBranch }}"
+  #     git push origin main:${{ needs.changelog.outputs.latestBranch }} --force
 
   discord_announcement:
     needs: changelog

.github/workflows/ci.yml

@@ -119,74 +119,3 @@ jobs:
 
       - name: 🔬 Test
         run: npm run test
-
-  e2e:
-    name: ⚫️ Playwright tests
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    concurrency:
-      group: ci-e2e-${{ github.ref }}
-      cancel-in-progress: true
-    steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
-
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-          cache-dependency-path: '**/package-lock.json'
-
-      - name: 📥 Install dependencies
-        run: npm ci
-
-      - name: 📋 Copy package-lock
-        run: cp package-lock.json templates/demo-store
-
-      - name: 📦 Build packages
-        run: npm run build:pkg && (cd templates/demo-store && npm run build)
-
-      - name: 💾 Turbo cache
-        id: turbo-cache
-        uses: actions/cache@v3
-        with:
-          path: |
-            node_modules/.cache/turbo
-            **/.turbo
-          key: turbo-${{ github.job }}-${{ github.ref_name }}-${{ github.sha }}
-          restore-keys: |
-            turbo-${{ github.job }}-${{ github.ref_name }}-
-
-      - name: 📄 Get installed Playwright version
-        run: echo "PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright -m 1 | sed 's/.*@//')"  >> $GITHUB_ENV
-
-      - name: 💾 Cache Playwright binaries
-        uses: actions/cache@v3
-        id: playwright-cache
-        with:
-          path: |
-            ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
-
-      - name: 💽 Install Playwright Browsers (all)
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: npx playwright install --with-deps
-        working-directory: ./templates/demo-store
-
-      - name: 💽 Install Playwright (only system deps)
-        if: steps.playwright-cache.outputs.cache-hit == 'true'
-        run: npx playwright install-deps
-        working-directory: ./templates/demo-store
-
-      - name: 🍄 Run Playwright tests
-        run: npx playwright test
-        working-directory: ./templates/demo-store
-
-      - name: 🗒 Report
-        uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: playwright-report
-          path: ./templates/demo-store/playwright-report/
-          retention-days: 30

.github/workflows/deploy-examples.yml

@@ -0,0 +1,65 @@
+# Don't change the line below!
+#! oxygen_storefront_id: 1000014888
+
+name: Examples deploy
+on: [push]
+
+permissions:
+  contents: read
+  deployments: write
+
+jobs:
+  deploy:
+    name: Deploy to Oxygen
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    strategy:
+      # In addition to updating the examples matrix below, make sure to also update
+      # the add a key in the `env` block of the `Build and Publish to Oxygen` step
+      matrix:
+        examples:
+          [
+            {name: 'optimistic-cart-ui', token: '1000014888'},
+            {name: 'vite', token: '1000014892'},
+            {name: 'subscriptions', token: '1000014928'},
+            {name: 'third-party-queries-caching', token: '1000014929'},
+            {name: 'custom-cart-method', token: '1000014930'},
+          ]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Install dependencies
+        run: npm ci
+      - name: 📦 Build packages
+        run: |
+          CI=true npm run build:pkg
+      - name: Build and Publish to Oxygen
+        id: deploy
+        working-directory: examples/${{ matrix.examples.name }}
+        run: |
+          npx shopify hydrogen deploy --no-lockfile-check --diff --token=$OXYGEN_DEPLOYMENT_TOKEN_${{ matrix.examples.token }}
+        env:
+          OXYGEN_DEPLOYMENT_TOKEN_1000014888: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000014888 }}
+          OXYGEN_DEPLOYMENT_TOKEN_1000014892: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000014892 }}
+          OXYGEN_DEPLOYMENT_TOKEN_1000014928: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000014928 }}
+          OXYGEN_DEPLOYMENT_TOKEN_1000014929: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000014929 }}
+          OXYGEN_DEPLOYMENT_TOKEN_1000014930: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000014930 }}

.github/workflows/deploy.yml

@@ -1,23 +1,20 @@
-# This Action is responsible for deploying the default Hydrogen template to Oxygen.
-# It is split out from deployments.yml because Oxygen checks for the presence of this specific workflow in the repo.
-# TODO: Merge the workflow if/when Oxygen is more lenient.
-
 # Don't change the line below!
-#! oxygen_storefront_id: 28966968
+#! oxygen_storefront_id: 1000014875
 
-name: Oxygen Deployment
+name: Skeleton deploy
+on: [push]
 
-on: [push, pull_request, workflow_dispatch]
+permissions:
+  contents: read
+  deployments: write
 
 jobs:
   deploy:
     name: Deploy to Oxygen
-    if: ${{ github.repository_owner == 'shopify' }}
     timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v4
 
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
@@ -26,45 +23,26 @@ jobs:
           cache: 'npm'
           cache-dependency-path: '**/package-lock.json'
 
-      - name: 📥 Install dependencies
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - name: Install dependencies
         run: npm ci
-
-      # Enabling the turbo cache causes deployments to fail intermittently.
-      # The build step fails with dependency issues. More investigation needed.
-      # - name: 💾 Turbo cache
-      #   id: turbo-cache
-      #   uses: actions/cache@v3
-      #   with:
-      #     path: |
-      #       node_modules/.cache/turbo
-      #       **/.turbo
-      #     key: turbo-${{ github.job }}-${{ github.ref_name }}-${{ github.sha }}
-      #     restore-keys: |
-      #       turbo-${{ github.job }}-${{ github.ref_name }}-
-
       - name: 📦 Build packages
         run: |
           CI=true npm run build:pkg
-
-      - name: 📤 Build and publish the Demo store template to Oxygen
+      - name: Build and Publish to Oxygen
         id: deploy
-        uses: shopify/oxygenctl-action@v4
-        with:
-          path: ./templates/demo-store
-          oxygen_deployment_token: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_28966968 }}
-          oxygen_worker_dir: dist/worker
-          oxygen_client_dir: dist/client
-          build_command: 'HYDROGEN_ASSET_BASE_URL=$OXYGEN_ASSET_BASE_URL npm run build -- --no-lockfile-check'
-          # Hardcode message and timestamp if manual dispatch
-          commit_message: ${{ github.event.head_commit.message || 'Manual deployment' }}
-          commit_timestamp: ${{ github.event.head_commit.timestamp || github.event.repository.updated_at }}
-          oxygen_health_check: true
-
-      - name: 🐙 Create GitHub deployment
-        uses: shopify/github-deployment-action@v1
-        if: always()
-        with:
-          token: ${{ github.token }}
-          environment: 'preview'
-          preview_url: ${{ steps.deploy.outputs.url }}
-          description: ${{ github.event.head_commit.message }}
+        working-directory: templates/skeleton
+        run: npx shopify hydrogen deploy --no-lockfile-check
+        env:
+          SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000014875 }}

examples/README.md

@@ -6,6 +6,10 @@ Each example only contains the files that are different from Hydrogen’s [Skele
 
 Examples are kept intentionally minimal, containing only the new and updated code required to illustrate a working use case.
 
+## Full-featured example
+
+See the full-featured example https://hydrogen.shop at https://github.com/Shopify/hydrogen-demo-store
+
 ## Popular examples
 
 These are some of the most commonly used Hydrogen examples. Browse the folders in this directory for the complete list.