Migrate to Vite

app/routes/_index/route.tsx

@@ -1,10 +1,8 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
 import { Form, useLoaderData } from "@remix-run/react";
-import { login } from "../../shopify.server";
-import indexStyles from "./style.css";
-
-export const links = () => [{ rel: "stylesheet", href: indexStyles }];
+import { login } from "~/shopify.server";
+import "./style.css";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);

app/routes/app._index.tsx

@@ -14,7 +14,7 @@ import {
   Link,
   InlineStack,
 } from "@shopify/polaris";
-import { authenticate } from "../shopify.server";
+import { authenticate } from "~/shopify.server";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   await authenticate.admin(request);

app/routes/app.tsx

@@ -1,12 +1,10 @@
 import type { HeadersFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Link, Outlet, useLoaderData, useRouteError } from "@remix-run/react";
-import polarisStyles from "@shopify/polaris/build/esm/styles.css";
+import "@shopify/polaris/build/esm/styles.css";
 import { boundary } from "@shopify/shopify-app-remix/server";
 import { AppProvider } from "@shopify/shopify-app-remix/react";
-import { authenticate } from "../shopify.server";
-
-export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
+import { authenticate } from "~/shopify.server";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   await authenticate.admin(request);

app/routes/auth.$.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { authenticate } from "../shopify.server";
+import { authenticate } from "~/shopify.server";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   await authenticate.admin(request);

app/routes/auth.login/route.tsx

@@ -11,12 +11,10 @@ import {
   TextField,
 } from "@shopify/polaris";
 import { Form, useActionData, useLoaderData } from "@remix-run/react";
-import polarisStyles from "@shopify/polaris/build/esm/styles.css";
-import { login } from "../../shopify.server";
+import "@shopify/polaris/build/esm/styles.css";
+import { login } from "~/shopify.server";
 import { loginErrorMessage } from "./error.server";
 
-export const links = () => [{ rel: "stylesheet", href: polarisStyles }];
-
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const errors = loginErrorMessage(await login(request));
 

app/routes/webhooks.tsx

@@ -1,11 +1,9 @@
 import type { ActionFunctionArgs } from "@remix-run/node";
-import { authenticate } from "../shopify.server";
+import { authenticate } from "~/shopify.server";
 import db from "../db.server";
 
 export const action = async ({ request }: ActionFunctionArgs) => {
-  const { topic, shop, session, admin, payload } = await authenticate.webhook(
-    request
-  );
+  const { topic, shop, session, admin } = await authenticate.webhook(request);
 
   if (!admin) {
     // The admin context isn't returned if the webhook fired after a shop was uninstalled.

env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="@remix-run/node" />

package.json

@@ -2,7 +2,7 @@
   "name": "app",
   "private": true,
   "scripts": {
-    "build": "tsc && remix build",
+    "build": "tsc && remix vite:build",
     "predev": "prisma generate && prisma migrate deploy",
     "dev": "shopify app dev",
     "config:link": "shopify app config link",
@@ -11,20 +11,21 @@
     "deploy": "shopify app deploy",
     "config:use": "shopify app config use",
     "env": "shopify app env",
-    "start": "remix-serve build/index.js",
+    "start": "remix-serve ./build/server/index.js",
     "docker-start": "npm run setup && npm run start",
     "setup": "prisma generate && prisma migrate deploy",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "shopify": "shopify",
     "prisma": "prisma",
     "graphql-codegen": "graphql-codegen"
   },
+  "type": "module",
   "dependencies": {
     "@prisma/client": "^4.13.0",
-    "@remix-run/dev": "^2.0.0",
-    "@remix-run/node": "^2.0.0",
-    "@remix-run/react": "^2.0.0",
-    "@remix-run/serve": "^2.0.0",
+    "@remix-run/dev": "^2.5.0",
+    "@remix-run/node": "^2.5.0",
+    "@remix-run/react": "^2.5.0",
+    "@remix-run/serve": "^2.5.0",
     "@shopify/app": "^3.50.0",
     "@shopify/cli": "^3.50.0",
     "@shopify/polaris": "^12.0.0",
@@ -37,7 +38,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/eslint-config": "^2.0.0",
+    "@remix-run/eslint-config": "^2.5.0",
     "@shopify/api-codegen-preset": "^0.0.1",
     "@shopify/app-bridge-types": "^0.0.3",
     "@types/eslint": "^8.40.0",
@@ -47,7 +48,9 @@
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "prettier": "^2.8.8",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vite": "^5.0.11",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "workspaces": {
     "packages": [

shopify.web.toml

@@ -3,7 +3,7 @@ roles = ["frontend", "backend"]
 webhooks_path = "/webhooks"
 
 [commands]
-dev = "npm exec remix dev"
+dev = "npm exec remix vite:dev"
 
 [hmr_server]
 http_paths = ["/ping"]

tsconfig.json

@@ -1,7 +1,7 @@
 {
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "strict": true,
     "skipLibCheck": true,
     "isolatedModules": true,
@@ -11,9 +11,9 @@
     "noEmit": true,
     "allowJs": true,
     "jsx": "react-jsx",
-    "module": "Node16",
-    "moduleResolution": "Node16",
-    "target": "ES2019",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "target": "ES2022",
     "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]

vite.config.ts

@@ -0,0 +1,40 @@
+import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig, type UserConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+// import { installGlobals } from "@remix-run/node";
+//
+// installGlobals();
+// Related: https://github.com/remix-run/remix/issues/2835#issuecomment-1144102176
+// Replace the HOST env var with SHOPIFY_APP_URL so that it doesn't break the remix server. The CLI will eventually
+// stop passing in HOST, so we can remove this workaround after the next major release.
+if (
+  process.env.HOST &&
+  (!process.env.SHOPIFY_APP_URL ||
+    process.env.SHOPIFY_APP_URL === process.env.HOST)
+) {
+  process.env.SHOPIFY_APP_URL = process.env.HOST;
+  delete process.env.HOST;
+}
+export default defineConfig({
+  server: {
+    port: Number(process.env.PORT || 3000),
+    hmr: {
+      protocol: "ws",
+      port: 8009,
+      host: "localhost",
+    },
+    // vite automatically bypass cors in dev mode
+    // https://vitejs.dev/config/server-options.html#server-cors
+    // we don't need it
+    cors: false,
+  },
+  plugins: [
+    remix({
+      ignoredRouteFiles: ["**/.*"],
+    }),
+    tsconfigPaths(),
+  ],
+  build: {
+    assetsInlineLimit: 0,
+  },
+}) satisfies UserConfig;