Merge pull request #265 from Shopify/javascript-cli_updates

[javascript-cli] Convert template to Javascript

Author: shauns

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [20.19.0, 22, 24]
+        node: [22, 24, 26]
         manager: ['npm', 'yarn', 'pnpm']
     steps:
       - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
@@ -20,20 +20,20 @@ jobs:
         if: ${{ matrix.manager == 'pnpm' }}
         uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 10
 
       - name: Install dependencies using ${{ matrix.manager }}
         run: ${{ matrix.manager }} install
 
+      - name: Validate Prisma
+        run: npx prisma generate && npx prisma validate
+
       - name: Run TypeScript type checking
         if: ${{ !startsWith(github.head_ref || github.ref_name, 'javascript') }}
         run: npx tsc --noEmit
 
       - name: Run ESLint
         run: npm run lint
 
-      - name: Validate Prisma
-        run: npx prisma generate && npx prisma validate
-
       - name: Build application
         run: npm run build

.github/workflows/convert-to-javascript.yml

@@ -28,12 +28,12 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v5
         with:
-          node-version: 20.x
+          node-version: 24.x
 
       - name: Install dependencies
         run: |

.graphqlrc.js

@@ -6,7 +6,7 @@ function getConfig() {
     projects: {
       default: shopifyApiProject({
         apiType: ApiType.Admin,
-        apiVersion: ApiVersion.October25,
+        apiVersion: ApiVersion.July26,
         documents: [
           "./app/**/*.{js,ts,jsx,tsx}",
           "./app/.server/**/*.{js,ts,jsx,tsx}",

app/routes/app._index.jsx

@@ -80,17 +80,12 @@ export const action = async ({ request }) => {
   const variantResponseJson = await variantResponse.json();
   const metaobjectResponse = await admin.graphql(
     `#graphql
-    mutation shopifyReactRouterTemplateUpsertMetaobject($handle: MetaobjectHandleInput!, $metaobject: MetaobjectUpsertInput!) {
-      metaobjectUpsert(handle: $handle, metaobject: $metaobject) {
+    mutation shopifyReactRouterTemplateUpsertMetaobject($handle: MetaobjectHandleInput!, $values: JSON!) {
+      metaobjectUpsert(handle: $handle, values: $values) {
         metaobject {
           id
           handle
-          title: field(key: "title") {
-            jsonValue
-          }
-          description: field(key: "description") {
-            jsonValue
-          }
+          values
         }
         userErrors {
           field
@@ -104,15 +99,10 @@ export const action = async ({ request }) => {
           type: "$app:example",
           handle: "demo-entry",
         },
-        metaobject: {
-          fields: [
-            { key: "title", value: "Demo Entry" },
-            {
-              key: "description",
-              value:
-                "This metaobject was created by the Shopify app template to demonstrate the metaobject API.",
-            },
-          ],
+        values: {
+          title: "Demo Entry",
+          description:
+            "This metaobject was created by the Shopify app template to demonstrate the metaobject API.",
         },
       },
     },
@@ -223,7 +213,13 @@ export default function Index() {
                 borderRadius="base"
                 background="subdued"
               >
-                <pre style={{ margin: 0 }}>
+                <pre
+                  style={{
+                    margin: 0,
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-word",
+                  }}
+                >
                   <code>{JSON.stringify(fetcher.data.product, null, 2)}</code>
                 </pre>
               </s-box>
@@ -235,7 +231,13 @@ export default function Index() {
                 borderRadius="base"
                 background="subdued"
               >
-                <pre style={{ margin: 0 }}>
+                <pre
+                  style={{
+                    margin: 0,
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-word",
+                  }}
+                >
                   <code>{JSON.stringify(fetcher.data.variant, null, 2)}</code>
                 </pre>
               </s-box>
@@ -247,7 +249,13 @@ export default function Index() {
                 borderRadius="base"
                 background="subdued"
               >
-                <pre style={{ margin: 0 }}>
+                <pre
+                  style={{
+                    margin: 0,
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-word",
+                  }}
+                >
                   <code>
                     {JSON.stringify(fetcher.data.metaobject, null, 2)}
                   </code>

app/shopify.server.js

@@ -10,7 +10,7 @@ import prisma from "./db.server";
 const shopify = shopifyApp({
   apiKey: process.env.SHOPIFY_API_KEY,
   apiSecretKey: process.env.SHOPIFY_API_SECRET || "",
-  apiVersion: ApiVersion.October25,
+  apiVersion: ApiVersion.July26,
   scopes: process.env.SCOPES?.split(","),
   appUrl: process.env.SHOPIFY_APP_URL || "",
   authPathPrefix: "/auth",
@@ -25,7 +25,7 @@ const shopify = shopifyApp({
 });
 
 export default shopify;
-export const apiVersion = ApiVersion.October25;
+export const apiVersion = ApiVersion.July26;
 export const addDocumentResponseHeaders = shopify.addDocumentResponseHeaders;
 export const authenticate = shopify.authenticate;
 export const unauthenticated = shopify.unauthenticated;

package.json

@@ -30,7 +30,7 @@
     "@react-router/node": "^7.12.0",
     "@react-router/serve": "^7.12.0",
     "@shopify/app-bridge-react": "^4.2.4",
-    "@shopify/shopify-app-react-router": "^1.1.0",
+    "@shopify/shopify-app-react-router": "^1.2.1",
     "@shopify/shopify-app-session-storage-prisma": "^9.0.0",
     "isbot": "^5.1.31",
     "prisma": "^6.16.3",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@shopify/api-codegen-preset": "^1.2.0",
-    "@shopify/polaris-types": "1.0.1",
+    "@shopify/polaris-types": "^1.0.1",
     "@types/eslint": "^9.6.1",
     "@types/node": "^22.18.8",
     "@types/react": "^18.3.25",

pnpm-workspace.yaml

@@ -0,0 +1,9 @@
+packages:
+  - 'extensions/*'
+allowBuilds:
+  '@parcel/watcher': true
+  '@prisma/client': true
+  '@prisma/engines': true
+  esbuild: true
+  prisma: true
+  unrs-resolver: true

shopify.app.toml

@@ -28,7 +28,7 @@ name = "Description"
 type = "multi_line_text_field"
 
 [webhooks]
-api_version = "2025-10"
+api_version = "2026-07"
 
   # Handled by: /app/routes/webhooks.app.uninstalled.tsx
   [[webhooks.subscriptions]]

shopify.web.toml

@@ -0,0 +1,7 @@
+name = "React Router"
+roles = ["frontend", "backend"]
+webhooks_path = "/webhooks/app/uninstalled"
+
+[commands]
+predev = "npx prisma generate"
+dev = "npx prisma migrate deploy && npm exec react-router dev"