Move Demo Store to templates

.github/contributing.md

@@ -17,7 +17,7 @@ yarn dev
 
 Visit the dev environment at http://localhost:3000.
 
-To make changes to the Demo Store template, edit the files in `examples/template-hydrogen-default`.
+To make changes to the Demo Store template, edit the files in `templates/template-hydrogen-default`.
 
 To modify Hydrogen framework, components, and hooks, edit the files in `packages/hydrogen`.
 
@@ -27,7 +27,8 @@ You can [inspect Vite plugin](https://github.com/antfu/vite-plugin-inspect) tran
 
 Hydrogen is a Yarn v1 monorepo. It consists of several key packages:
 
-- `examples/template-hydrogen-default`: The Demo Store template
+- `examples`: Illustrative proofs of concept demonstrating integrations and special use cases for Hydrogen
+- `templates`: Full working implementations of a Hydrogen storefront (including the Demo Store template)
 - `packages/hydrogen`: The Hydrogen React framework & SDK
 - `packages/create-hydrogen-app`: The CLI used to scaffold new projects
 - `packages/cli`: The CLI used to perform tasks in a Hydrogen app
@@ -135,7 +136,7 @@ Next, choose an option below.
 
 ### Option 1: `localdev` package
 
-This option creates a new Hydrogen app similar to `examples/template-hydrogen-default` directly in the monorepo under `packages/localdev`. This directory is ignored in git, so your changes will not be tracked.
+This option creates a new Hydrogen app similar to `templates/template-hydrogen-default` directly in the monorepo under `packages/localdev`. This directory is ignored in git, so your changes will not be tracked.
 
 ```terminal
 create-hydrogen packages/localdev

.github/workflows/publish_stackblitz.yml

@@ -16,7 +16,7 @@ jobs:
           ref: 'v1.x-2022-07'
       - name: Rename gitignore
         run: |
-          mv examples/template-hydrogen-default/_gitignore examples/template-hydrogen-default/.gitignore
+          mv templates/template-hydrogen-default/_gitignore templates/template-hydrogen-default/.gitignore
       - name: Push to stackblitz branch
         run: |
           git show-ref

.github/workflows/tests_and_lint.yml

@@ -50,7 +50,7 @@ jobs:
 
       - name: Lint the template code
         run: yarn lint
-        working-directory: ./examples/template-hydrogen-default
+        working-directory: ./templates/template-hydrogen-default
 
       - name: Run the unit tests
         run: yarn test
@@ -62,4 +62,4 @@ jobs:
 
       - name: Run the template code tests
         run: yarn test:ci
-        working-directory: ./examples/template-hydrogen-default
+        working-directory: ./templates/template-hydrogen-default

.gitignore

@@ -112,6 +112,7 @@ dist
 # VSCode launch configs
 .vscode/
 !examples/*/.vscode/
+!templates/*/.vscode/
 
 # yarn v2
 .yarn/cache

docs/deployment.md

@@ -23,7 +23,7 @@ Oxygen is Shopify's recommended deployment platform for Hydrogen apps. This is b
 
 You can deploy your Hydrogen app to [Node.js](https://nodejs.org/en/), an open-source JavaScript runtime environment.
 
-1. Check the port (`$PORT`) that's specified in the [`server.js`](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/server.js) file.
+1. Check the port (`$PORT`) that's specified in the [`server.js`](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/server.js) file.
 
 2. Run your Hydrogen app on the port specified by executing the following commands:
 

docs/framework/index.md

@@ -80,8 +80,8 @@ By default, Hydrogen includes a [`@shopify/hydrogen/platforms/worker`](https://g
 
 Hydrogen's includes the following default entry points for your app:
 
-- **Client entry point**: [`@shopify/hydrogen/entry-client`](https://github.com/Shopify/hydrogen/blob/main/packages/hydrogen/src/entry-client.tsx), which is included in [`index.html`](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/index.html) and used for hydration purposes
-- **Server entry point**: [`App.server.jsx`](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/App.server.jsx)
+- **Client entry point**: [`@shopify/hydrogen/entry-client`](https://github.com/Shopify/hydrogen/blob/main/packages/hydrogen/src/entry-client.tsx), which is included in [`index.html`](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/index.html) and used for hydration purposes
+- **Server entry point**: [`App.server.jsx`](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/App.server.jsx)
 
 ### Change the client entry point
 

docs/framework/routes.md

@@ -210,7 +210,7 @@ export async function api(request, {params}) {
 {% endcodeblock %}
 
 > Tip:
-> Explore an [example implementation in GitHub](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/routes/countries.server.jsx) that lazy loads [available countries](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/CountrySelector.client.jsx) by an API route (`/api/countries`).
+> Explore an [example implementation in GitHub](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/routes/countries.server.jsx) that lazy loads [available countries](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/components/CountrySelector.client.jsx) by an API route (`/api/countries`).
 
 ### Concatenating requests
 

docs/framework/seo.md

@@ -10,27 +10,27 @@ Hydrogen detects when a search engine crawls your shop and defaults to server-si
 
 Hydrogen includes an [`Seo`](https://shopify.dev/api/hydrogen/components/primitive/seo) client component that renders SEO information on a webpage. It also provides the following example SEO-related files in the [Demo Store template](https://shopify.dev/custom-storefronts/hydrogen/getting-started):
 
-- [`DefaultSeo`](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/DefaultSeo.server.jsx): A server component that fetches the shop name and description and sets default values and templates for every page on a website
+- [`DefaultSeo`](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/components/DefaultSeo.server.jsx): A server component that fetches the shop name and description and sets default values and templates for every page on a website
 
-- [`Sitemap.xml.server.jsx`](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/routes/sitemap.xml.server.jsx): A file that generates all products, collections, and pages URLs using the Storefront API
+- [`Sitemap.xml.server.jsx`](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/routes/sitemap.xml.server.jsx): A file that generates all products, collections, and pages URLs using the Storefront API
 
-- [`Robots.txt.server.jsx`](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/routes/robots.txt.server.js): A file that sets default rules for which URLs can be crawled by search engines
+- [`Robots.txt.server.jsx`](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/routes/robots.txt.server.js): A file that sets default rules for which URLs can be crawled by search engines
 
 ### `Seo` client component
 
 The [`Seo`](https://shopify.dev/api/hydrogen/components/primitive/seo) client component uses the data from Storefront API to generate the `<head>` tags that search engines look for. For example, [`Product.Seo`](https://shopify.dev/api/storefront/latest/objects/Product) is used to generate the `<head>` tags for the products page.
 
 You can customize the `<head>` tags at the route level:
 
-- [Default page](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/DefaultSeo.server.jsx)
-- [Home page](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/routes/index.server.jsx)
-- [Pages page](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/routes/pages/[handle].server.jsx)
-- [Product page](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/routes/products/[handle].server.jsx)
-- [Collection page](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/routes/collections/[handle].server.jsx)
+- [Default page](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/components/DefaultSeo.server.jsx)
+- [Home page](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/routes/index.server.jsx)
+- [Pages page](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/routes/pages/[handle].server.jsx)
+- [Product page](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/routes/products/[handle].server.jsx)
+- [Collection page](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/routes/collections/[handle].server.jsx)
 
 ### `DefaultSeo` server component
 
-The [`DefaultSeo`](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/components/DefaultSeo.server.jsx) server component fetches your shop name (`shop.name`) and description (`shop.description`). This component provides the default SEO values for every page on your website.
+The [`DefaultSeo`](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/components/DefaultSeo.server.jsx) server component fetches your shop name (`shop.name`) and description (`shop.description`). This component provides the default SEO values for every page on your website.
 
 You can override the default SEO values by passing in custom props:
 
@@ -111,7 +111,7 @@ To imitate the behaviour of a SEO robot and show the page content fully from ser
 
 ## Limitations and considerations
 
-The following limitations and considerations apply to the [XML sitemap](https://github.com/Shopify/hydrogen/blob/main/examples/template-hydrogen-default/src/routes/sitemap.xml.server.jsx) that's included in the Demo Store template:
+The following limitations and considerations apply to the [XML sitemap](https://github.com/Shopify/hydrogen/blob/main/templates/template-hydrogen-default/src/routes/sitemap.xml.server.jsx) that's included in the Demo Store template:
 
 - The sitemap has a limit of 250 products, 250 collections, and 250 pages. You need to [paginate results](https://shopify.dev/api/usage/pagination-graphql) if your store has more than 250 resources.
 

jest.config.ts

@@ -11,6 +11,7 @@ const config: Config.InitialOptions = {
   testPathIgnorePatterns: [
     '<rootDir>/packages/playground/*',
     '<rootDir>/examples/*',
+    '<rootDir>/templates/*',
     '<rootDir>/packages/hydrogen-ui/*',
   ],
   testTimeout: process.env.CI ? 30000 : 10000,

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "packageManager": "[email protected]",
   "workspaces": [
-    "examples/template-hydrogen-default",
+    "templates/*",
     "packages/*",
     "packages/playground/*"
   ],

packages/cli/README.md

@@ -5,7 +5,7 @@
 The `hydrogen/cli` package provides interactive project scaffolding for Hydrogen apps and other useful commands to help you build on `@shopify/hydrogen`.
 
 > Note:
-> The CLI doesn't currently generate the [Demo Store template](https://shopify.dev/custom-storefronts/hydrogen/getting-started). Run `npx create-hydrogen-app` to scaffold a new project with the Demo Store template. To contribute to the Demo Store template, update the [template files](https://github.com/Shopify/hydrogen/tree/main/examples/template-hydrogen-default).
+> The CLI doesn't currently generate the [Demo Store template](https://shopify.dev/custom-storefronts/hydrogen/getting-started). Run `npx create-hydrogen-app` to scaffold a new project with the Demo Store template. To contribute to the Demo Store template, update the [template files](https://github.com/Shopify/hydrogen/tree/main/templates/template-hydrogen-default).
 
 ## Installation
 

packages/create-hydrogen-app/CHANGELOG.md

@@ -110,7 +110,7 @@
   }, []);
   ```
 
-  See an example on how this could be done inside the Demo Store template [country selector](https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/examples/template-hydrogen-default/src/components/CountrySelector.client.jsx)
+  See an example on how this could be done inside the Demo Store template [country selector](https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/templates/template-hydrogen-default/src/components/CountrySelector.client.jsx)
 
 * [#698](https://github.com/Shopify/hydrogen/pull/698) [`6f30b9a1`](https://github.com/Shopify/hydrogen/commit/6f30b9a1327f06d648a01dd94d539c7dcb3061e0) Thanks [@jplhomer](https://github.com/jplhomer)! - Basic end-to-end tests have been added to the default Hydrogen template. You can run tests in development:
 

packages/create-hydrogen-app/scripts/tmp-copy-template-from-dev.js

@@ -1,8 +1,8 @@
 // @ts-check
 
 /**
- * This is a temporary script meant to copy `examples/template-hydrogen-default` to `./template-hydrogen`
- * while we are actively developing H2 in `examples/template-hydrogen-default`. Eventually, something else might happen.
+ * This is a temporary script meant to copy `templates/template-hydrogen-default` to `./template-hydrogen`
+ * while we are actively developing H2 in `templates/template-hydrogen-default`. Eventually, something else might happen.
  */
 
 const path = require('path');
@@ -14,7 +14,7 @@ const devPath = path.resolve(
   '..',
   '..',
   '..',
-  'examples',
+  'templates',
   'template-hydrogen-default'
 );
 const templatePath = path.resolve(__dirname, '..', './template-hydrogen');

packages/hydrogen/CHANGELOG.md

@@ -249,7 +249,7 @@
   }, []);
   ```
 
-  See an example on how this could be done inside the Demo Store template [country selector](https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/examples/template-hydrogen-default/src/components/CountrySelector.client.jsx)
+  See an example on how this could be done inside the Demo Store template [country selector](https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/templates/template-hydrogen-default/src/components/CountrySelector.client.jsx)
 
 - [#698](https://github.com/Shopify/hydrogen/pull/698) [`6f30b9a1`](https://github.com/Shopify/hydrogen/commit/6f30b9a1327f06d648a01dd94d539c7dcb3061e0) Thanks [@jplhomer](https://github.com/jplhomer)! - Basic end-to-end tests have been added to the default Hydrogen template. You can run tests in development:
 

templates/template-hydrogen-default/.devcontainer/devcontainer.json

@@ -0,0 +1,18 @@
+{
+  "name": "Shopify Hydrogen",
+  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-16",
+  "settings": {},
+  "extensions": [
+    "graphql.vscode-graphql",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode"
+  ],
+  "forwardPorts": [3000],
+  "postCreateCommand": "yarn install",
+  "postStartCommand": "yarn dev",
+  "remoteUser": "node",
+  "features": {
+    "git": "latest"
+  }
+}

templates/template-hydrogen-default/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['plugin:hydrogen/recommended'],
+};

templates/template-hydrogen-default/.gitignore

@@ -0,0 +1,7 @@
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+

templates/template-hydrogen-default/.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "npm run dev"
+}

templates/template-hydrogen-default/.stylelintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  extends: ['@shopify/stylelint-plugin', '@shopify/stylelint-plugin/prettier'],
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['tailwind', 'layer'],
+      },
+    ],
+    'selector-type-no-unknown': [
+      true,
+      {
+        ignoreTypes: ['model-viewer'],
+      },
+    ],
+  },
+};

templates/template-hydrogen-default/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "graphql.vscode-graphql",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

templates/template-hydrogen-default/README.md

@@ -0,0 +1,56 @@
+# Hydrogen App
+
+Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
+
+[Check out the docs](https://shopify.dev/custom-storefronts/hydrogen)
+
+## Getting started
+
+**Requirements:**
+
+- Node.js version 16.5.0 or higher
+- Yarn
+
+```bash
+yarn
+yarn dev
+```
+
+Remember to update `shopify.config.js` with your shop's domain and Storefront API token!
+
+## Previewing a production build
+
+To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run `yarn preview`:
+
+```bash
+yarn build
+yarn preview
+```
+
+## Building for production
+
+```bash
+yarn build
+```
+
+Then, you can run a local `server.js` using the production build with:
+
+```bash
+yarn serve
+```
+
+## Running tests
+
+This project contains basic end-to-end (E2E) tests in the `/tests/e2e` folder powered by [Vitest](https://vitest.dev).
+
+You can run tests in development, and they will automatically reload when you make changes to the component you provide to `hydrogen.watchForUpdates()`:
+
+```bash
+yarn test
+```
+
+To run tests in a continuous-integration (CI) environment like GitHub Actions:
+
+```bash
+yarn test:ci
+```