Use Vite in templates and examples

.github/workflows/deploy-examples.yml

@@ -20,8 +20,8 @@ jobs:
         examples:
           [
             {name: 'optimistic-cart-ui', token: '1000014888'},
-            {name: 'vite', token: '1000014892'},
-            {name: 'subscriptions', token: '1000014928'},
+            {name: 'classic-remix', token: '1000014892'},
+            {name: 'metaobjects', token: '1000014928'},
             {name: 'third-party-queries-caching', token: '1000014929'},
             {name: 'custom-cart-method', token: '1000014930'},
           ]

examples/classic-remix/README.md

@@ -0,0 +1,40 @@
+# Hydrogen template: Classic Remix
+
+Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with [Remix](https://remix.run/), Shopify’s full stack web framework. This template contains a **minimal setup** of components, queries and tooling to get started with Hydrogen and the classic Remix compiler (i.e. before Vite).
+
+[Check out Hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen)
+[Get familiar with Remix](https://remix.run/docs/en/v1)
+
+## What's included
+
+- Remix
+- Hydrogen
+- Oxygen
+- Shopify CLI
+- ESLint
+- Prettier
+- GraphQL generator
+- TypeScript and JavaScript flavors
+- Minimal setup of components and routes
+
+## Getting started
+
+**Requirements:**
+
+- Node.js version 18.0.0 or higher
+
+```bash
+npm create @shopify/hydrogen@latest -- --template classic-remix
+```
+
+## Building for production
+
+```bash
+npm run build
+```
+
+## Local development
+
+```bash
+npm run dev
+```

examples/vite/app/root.tsx → examples/classic-remix/app/root.tsx

@@ -9,6 +9,7 @@ import {
   Meta,
   Outlet,
   Scripts,
+  LiveReload,
   useMatches,
   useRouteError,
   useLoaderData,
@@ -17,8 +18,8 @@ import {
   type ShouldRevalidateFunction,
 } from '@remix-run/react';
 import favicon from './assets/favicon.svg';
-import resetStyles from './styles/reset.css?url';
-import appStyles from './styles/app.css?url';
+import resetStyles from './styles/reset.css';
+import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';
 
 /**
@@ -123,6 +124,7 @@ export default function App() {
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
@@ -164,6 +166,7 @@ export function ErrorBoundary() {
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );

examples/classic-remix/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "example-classic-remix",
+  "private": true,
+  "type": "commonjs",
+  "prettier": "@shopify/prettier-config",
+  "scripts": {
+    "build": "shopify hydrogen build --diff",
+    "dev": "shopify hydrogen dev --codegen --customer-account-push --diff",
+    "preview": "npm run build && shopify hydrogen preview",
+    "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
+    "typecheck": "tsc --noEmit",
+    "codegen": "shopify hydrogen codegen"
+  },
+  "h2:diff": {
+    "skipFiles": [
+      "vite.config.ts",
+      "env.d.ts"
+    ],
+    "skipDevDependencies": [
+      "vite",
+      "vite-tsconfig-paths"
+    ]
+  }
+}

examples/vite/server.ts → examples/classic-remix/server.ts

@@ -1,6 +1,5 @@
 // Virtual entry point for the app
-// @ts-ignore
-import * as remixBuild from 'virtual:remix/server-build';
+import * as remixBuild from '@remix-run/dev/server-build';
 import {
   cartGetIdDefault,
   cartSetIdDefault,
@@ -71,6 +70,7 @@ export default {
        */
       const cart = createCartHandler({
         storefront,
+        customerAccount,
         getCartId: cartGetIdDefault(request.headers),
         setCartId: cartSetIdDefault(),
         cartQueryFragment: CART_QUERY_FRAGMENT,

examples/custom-cart-method/remix.env.d.ts → examples/custom-cart-method/env.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@shopify/remix-oxygen" />
 /// <reference types="@shopify/oxygen-workers-types" />
 

examples/custom-cart-method/server.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 // Virtual entry point for the app
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as remixBuild from 'virtual:remix/server-build';
 import {
   cartGetIdDefault,
   cartSetIdDefault,

examples/legacy-customer-account-flow/app/root.tsx

@@ -9,7 +9,6 @@ import {
   Meta,
   Outlet,
   Scripts,
-  LiveReload,
   useMatches,
   useRouteError,
   useLoaderData,
@@ -19,8 +18,8 @@ import {
 } from '@remix-run/react';
 import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
 import favicon from './assets/favicon.svg';
-import resetStyles from './styles/reset.css';
-import appStyles from './styles/app.css';
+import resetStyles from './styles/reset.css?url';
+import appStyles from './styles/app.css?url';
 import {Layout} from '~/components/Layout';
 
 /**
@@ -128,7 +127,6 @@ export default function App() {
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
-        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
@@ -170,7 +168,6 @@ export function ErrorBoundary() {
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
-        <LiveReload nonce={nonce} />
       </body>
     </html>
   );

examples/legacy-customer-account-flow/remix.env.d.ts → examples/legacy-customer-account-flow/env.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@shopify/remix-oxygen" />
 /// <reference types="@shopify/oxygen-workers-types" />
 

examples/legacy-customer-account-flow/server.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 // Virtual entry point for the app
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as remixBuild from 'virtual:remix/server-build';
 import {
   cartGetIdDefault,
   cartSetIdDefault,

examples/metaobjects/app/root.tsx

@@ -9,7 +9,6 @@ import {
   Meta,
   Outlet,
   Scripts,
-  LiveReload,
   useMatches,
   useRouteError,
   useLoaderData,
@@ -18,8 +17,8 @@ import {
   type ShouldRevalidateFunction,
 } from '@remix-run/react';
 import favicon from './assets/favicon.svg';
-import resetStyles from './styles/reset.css';
-import appStyles from './styles/app.css';
+import resetStyles from './styles/reset.css?url';
+import appStyles from './styles/app.css?url';
 import {Layout} from '~/components/Layout';
 
 /**
@@ -129,7 +128,6 @@ export default function App() {
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
-        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
@@ -171,7 +169,6 @@ export function ErrorBoundary() {
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
-        <LiveReload nonce={nonce} />
       </body>
     </html>
   );

examples/metaobjects/remix.env.d.ts → examples/metaobjects/env.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@shopify/remix-oxygen" />
 /// <reference types="@shopify/oxygen-workers-types" />
 

examples/third-party-queries-caching/remix.env.d.ts → examples/third-party-queries-caching/env.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@shopify/remix-oxygen" />
 /// <reference types="@shopify/oxygen-workers-types" />
 

examples/third-party-queries-caching/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "prettier": "@shopify/prettier-config",
   "scripts": {
-    "build": "shopify hydrogen build --diff",
+    "build": "shopify hydrogen build --codegen --diff",
     "dev": "shopify hydrogen dev --codegen --customer-account-push --diff",
     "preview": "npm run build && shopify hydrogen preview",
     "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",

examples/third-party-queries-caching/server.ts

@@ -1,5 +1,6 @@
+// @ts-ignore
 // Virtual entry point for the app
-import * as remixBuild from '@remix-run/dev/server-build';
+import * as remixBuild from 'virtual:remix/server-build';
 import {
   cartGetIdDefault,
   cartSetIdDefault,