Update template to use RR7 app template and Polaris web components

Author: lizkenyon

sample-apps/delivery-customizations/.eslintignore

@@ -1,6 +1,5 @@
 node_modules
 build
 public/build
-shopify-app-remix
 */*.yml
 .shopify

sample-apps/delivery-customizations/.eslintrc.cjs

@@ -1,13 +1,84 @@
-/** @type {import('@types/eslint').Linter.BaseConfig} */
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
 module.exports = {
   root: true,
-  extends: [
-    "@remix-run/eslint-config",
-    "@remix-run/eslint-config/node",
-    "@remix-run/eslint-config/jest-testing-library",
-    "prettier",
-  ],
-  globals: {
-    shopify: "readonly"
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
   },
+  ignorePatterns: ["!**/.server", "!**/.client"],
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
 };

sample-apps/delivery-customizations/.gitignore

@@ -22,3 +22,7 @@ pnpm-lock.yaml
 # Ignore shopify files created during app dev
 .shopify/*
 .shopify.lock
+
+# Hide files auto-generated by react router
+.react-router/
+

sample-apps/delivery-customizations/.graphqlrc.ts

@@ -37,4 +37,6 @@ function getConfig() {
   return config;
 }
 
-module.exports = getConfig();
+const config = getConfig();
+
+export default config;

sample-apps/delivery-customizations/CHANGELOG.md

@@ -1,9 +1,35 @@
+# @shopify/shopify-app-template-react-router
+
+## July 2025
+
+Forked the [shopify-app-template repo](https://github.com/Shopify/shopify-app-template-remix)
+
 # @shopify/shopify-app-template-remix
 
+## 2025.03.18
+
+-[#998](https://github.com/Shopify/shopify-app-template-remix/pull/998) Update to Vite 6
+
+## 2025.03.01
+
+- [#982](https://github.com/Shopify/shopify-app-template-remix/pull/982) Add Shopify Dev Assistant extension to the VSCode extension recommendations
+
+## 2025.01.31
+
+- [#952](https://github.com/Shopify/shopify-app-template-remix/pull/952) Update to Shopify App API v2025-01
+
+## 2025.01.23
+
+- [#923](https://github.com/Shopify/shopify-app-template-remix/pull/923) Update `@shopify/shopify-app-session-storage-prisma` to v6.0.0
+
+## 2025.01.8
+
+- [#923](https://github.com/Shopify/shopify-app-template-remix/pull/923) Enable GraphQL autocomplete for Javascript
+
 ## 2024.12.19
 
 - [#904](https://github.com/Shopify/shopify-app-template-remix/pull/904) bump `@shopify/app-bridge-react` to latest
-- 
+-
 ## 2024.12.18
 
 - [875](https://github.com/Shopify/shopify-app-template-remix/pull/875) Add Scopes Update Webhook
@@ -19,6 +45,7 @@
 - [#891](https://github.com/Shopify/shopify-app-template-remix/pull/891) Enable remix future flags.
 
 ## 2024.11.26
+
 - [888](https://github.com/Shopify/shopify-app-template-remix/pull/888) Update restResources version to 2024-10
 
 ## 2024.11.06

sample-apps/delivery-customizations/README.md

@@ -1,15 +1,16 @@
 import { PrismaClient } from "@prisma/client";
 
 declare global {
-  var prisma: PrismaClient;
+  // eslint-disable-next-line no-var
+  var prismaGlobal: PrismaClient;
 }
 
 if (process.env.NODE_ENV !== "production") {
-  if (!global.prisma) {
-    global.prisma = new PrismaClient();
+  if (!global.prismaGlobal) {
+    global.prismaGlobal = new PrismaClient();
   }
 }
 
-const prisma: PrismaClient = global.prisma || new PrismaClient();
+const prisma = global.prismaGlobal ?? new PrismaClient();
 
 export default prisma;

sample-apps/delivery-customizations/app/db.server.ts

@@ -1,10 +1,8 @@
 import { PassThrough } from "stream";
 import { renderToPipeableStream } from "react-dom/server";
-import { RemixServer } from "@remix-run/react";
-import {
-  createReadableStreamFromReadable,
-  type EntryContext,
-} from "@remix-run/node";
+import { ServerRouter } from "react-router";
+import { createReadableStreamFromReadable } from "@react-router/node";
+import { type EntryContext } from "react-router";
 import { isbot } from "isbot";
 import { addDocumentResponseHeaders } from "./shopify.server";
 
@@ -14,7 +12,7 @@ export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  reactRouterContext: EntryContext
 ) {
   addDocumentResponseHeaders(request, responseHeaders);
   const userAgent = request.headers.get("user-agent");
@@ -24,8 +22,8 @@ export default async function handleRequest(
 
   return new Promise((resolve, reject) => {
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
+      <ServerRouter
+        context={reactRouterContext}
         url={request.url}
       />,
       {

sample-apps/delivery-customizations/app/entry.server.tsx

@@ -1,14 +1,8 @@
-import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 
 export default function App() {
   return (
-    <html>
+    <html lang="en">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />

sample-apps/delivery-customizations/app/root.tsx

@@ -1,3 +1,3 @@
-import { flatRoutes } from "@remix-run/fs-routes";
+import { flatRoutes } from "@react-router/fs-routes";
 
 export default flatRoutes();