Move Demo Store to templates folder (#1132)

* Move Demo Store to templates

* Add examples back to workspaces

* Refresh template

.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: Type check hydrogen-ui
         run: yarn typecheck
@@ -66,4 +66,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

@@ -53,8 +53,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/templates):
 
-- [`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:
 
@@ -156,7 +156,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,8 @@
   "private": true,
   "packageManager": "[email protected]",
   "workspaces": [
-    "examples/template-hydrogen-default",
+    "examples/*",
+    "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/templates). 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/templates). 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

@@ -194,7 +194,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

@@ -343,7 +343,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-hello-world/package.json

@@ -15,7 +15,7 @@
     "@shopify/cli-hydrogen": "2.0.0"
   },
   "dependencies": {
-    "@shopify/hydrogen": "^0.16.1",
+    "@shopify/hydrogen": "^0.17.1",
     "react": "0.0.0-experimental-2bf7c02f0-20220314",
     "react-dom": "0.0.0-experimental-2bf7c02f0-20220314"
   }