Back to Vite 🎉

docs/preview/package.json

@@ -8,10 +8,10 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/css-bundle": "^2.6.0",
-    "@remix-run/node": "^2.6.0",
-    "@remix-run/react": "^2.6.0",
-    "@remix-run/serve": "^2.6.0",
+    "@remix-run/css-bundle": "^2.7.0",
+    "@remix-run/node": "^2.7.0",
+    "@remix-run/react": "^2.7.0",
+    "@remix-run/serve": "^2.7.0",
     "he": "^1.2.0",
     "isbot": "^3.6.8",
     "marked": "^9.1.0",
@@ -20,8 +20,8 @@
     "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.6.0",
-    "@remix-run/eslint-config": "^2.6.0",
+    "@remix-run/dev": "^2.7.0",
+    "@remix-run/eslint-config": "^2.7.0",
     "@types/he": "^1.2.1",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",

examples/express/package.json

@@ -11,11 +11,11 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/css-bundle": "^2.6.0",
-    "@remix-run/express": "^2.6.0",
-    "@remix-run/node": "^2.6.0",
-    "@remix-run/react": "^2.6.0",
-    "@remix-run/server-runtime": "^2.6.0",
+    "@remix-run/css-bundle": "^2.7.0",
+    "@remix-run/express": "^2.7.0",
+    "@remix-run/node": "^2.7.0",
+    "@remix-run/react": "^2.7.0",
+    "@remix-run/server-runtime": "^2.7.0",
     "@shopify/hydrogen": "2024.1.2",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
@@ -26,8 +26,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.6.0",
-    "@remix-run/eslint-config": "^2.6.0",
+    "@remix-run/dev": "^2.7.0",
+    "@remix-run/eslint-config": "^2.7.0",
     "@shopify/cli": "3.52.0",
     "@shopify/cli-hydrogen": "^7.1.0",
     "@types/compression": "^1.7.2",

examples/multipass/package.json

@@ -12,7 +12,7 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@remix-run/react": "^2.6.0",
+    "@remix-run/react": "^2.7.0",
     "@shopify/cli": "3.52.0",
     "@shopify/cli-hydrogen": "^7.1.0",
     "@shopify/hydrogen": "~2024.1.2",
@@ -26,8 +26,8 @@
     "snakecase-keys": "^5.5.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.6.0",
-    "@remix-run/eslint-config": "^2.6.0",
+    "@remix-run/dev": "^2.7.0",
+    "@remix-run/eslint-config": "^2.7.0",
     "@shopify/oxygen-workers-types": "^3.17.3",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",

examples/partytown/package.json

@@ -15,7 +15,7 @@
   "prettier": "@shopify/prettier-config",
   "dependencies": {
     "@builder.io/partytown": "^0.8.1",
-    "@remix-run/react": "^2.6.0",
+    "@remix-run/react": "^2.7.0",
     "@shopify/cli": "3.52.0",
     "@shopify/cli-hydrogen": "^7.1.0",
     "@shopify/hydrogen": "~2024.1.2",
@@ -27,8 +27,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.6.0",
-    "@remix-run/eslint-config": "^2.6.0",
+    "@remix-run/dev": "^2.7.0",
+    "@remix-run/eslint-config": "^2.7.0",
     "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",

examples/subscriptions/package.json

@@ -12,7 +12,7 @@
   },
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@remix-run/react": "^2.6.0",
+    "@remix-run/react": "^2.7.0",
     "@shopify/cli": "3.52.0",
     "@shopify/cli-hydrogen": "^7.1.0",
     "@shopify/hydrogen": "~2024.1.2",
@@ -24,8 +24,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.6.0",
-    "@remix-run/eslint-config": "^2.6.0",
+    "@remix-run/dev": "^2.7.0",
+    "@remix-run/eslint-config": "^2.7.0",
     "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "^1.1.2",
     "@tailwindcss/forms": "^0.5.3",

examples/vite/README.md

@@ -0,0 +1,64 @@
+# Hydrogen template: Experimental Vite
+
+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 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
+- Vite
+- 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 vite
+```
+
+## Building for production
+
+```bash
+npm run build
+```
+
+## Local development
+
+```bash
+npm run dev
+```
+
+## Setup for using Customer Account API (`/account` section)
+
+### Setup public domain using ngrok
+
+1. Setup a [ngrok](https://ngrok.com/) account and add a permanent domain (ie. `https://<your-ngrok-domain>.app`).
+1. Install the [ngrok CLI](https://ngrok.com/download) to use in terminal
+1. Start ngrok using `ngrok http --domain=<your-ngrok-domain>.app 3000`
+
+### Include public domain in Customer Account API settings
+
+1. Go to your Shopify admin => `Hydrogen` or `Headless` app/channel => Customer Account API => Application setup
+1. Edit `Callback URI(s)` to include `https://<your-ngrok-domain>.app/account/authorize`
+1. Edit `Javascript origin(s)` to include your public domain `https://<your-ngrok-domain>.app` or keep it blank
+1. Edit `Logout URI` to include your public domain `https://<your-ngrok-domain>.app` or keep it blank
+
+### Prepare Environment variables
+
+Run [`npx shopify hydrogen link`](https://shopify.dev/docs/custom-storefronts/hydrogen/cli#link) or [`npx shopify hydrogen env pull`](https://shopify.dev/docs/custom-storefronts/hydrogen/cli#env-pull) to link this app to your own test shop.
+
+Alternatly, the values of the required environment varaibles "PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID" and "PUBLIC_CUSTOMER_ACCOUNT_API_URL" can be found in customer account api settings in the Hydrogen admin channel.
+
+🗒️ Note that mock.shop doesn't supply these variables automatically.