Update cloudflare-d1 template to use @cloudflare/vite-plugin (#118)

* Update cloudflare-d1 package to use @cloudflare/vite-plugin

* Fix tests

* See if previews are the problem

* Fix preview test

Author: brookslybrand

.tests/test.cloudflare-d1.ts

@@ -19,42 +19,39 @@ test("dev", async ({ page, $ }) => {
   await workflow({ page, url });
 
   const ignoredLines = [
-    "The version of Wrangler you are using is now out-of-date",
-    "Please update to the latest version to prevent critical errors",
-    "Run `npm install --save-dev wrangler@4` to update to the latest version",
-    "After installation, run Wrangler with `npx wrangler`"
+    /Default inspector port \d{4} not available, using \d{4} instead/,
   ];
   const filteredStderr = dev.buffer.stderr
     .split("\n")
-    .filter(line => !ignoredLines.some(ignoredLine => line.includes(ignoredLine)))
-    .join("\n")
-    .trim();
+    .filter(
+      (line) =>
+        line && !ignoredLines.some((ignoredLine) => ignoredLine.test(line)),
+    )
+    .join("\n");
   expect(filteredStderr).toBe("");
 });
 
 test("build + start", async ({ page, $ }) => {
   await $(`pnpm db:migrate`);
 
-  await $(`pnpm build`);
-
-  const port1 = await getPort();
-  const port2 = await getPort();
-  const start = $(`pnpm start --port ${port1} --inspector-port ${port2}`);
+  const port = await getPort();
+  const preview = $(`pnpm preview --port ${port}`);
 
-  const url = await matchLine(start.stdout, urlRegex.wrangler);
+  const url = await matchLine(preview.stdout, urlRegex.viteDev);
   await workflow({ page, url });
 
   const ignoredLines = [
-    "The version of Wrangler you are using is now out-of-date",
-    "Please update to the latest version to prevent critical errors",
-    "Run `npm install --save-dev wrangler@4` to update to the latest version",
-    "After installation, run Wrangler with `npx wrangler`"
+    /The build was canceled/,
+    /Error running vite-plugin-cloudflare:nodejs-compat on Tailwind CSS output\. Skipping\./,
+    /Default inspector port \d{4} not available, using \d{4} instead/,
   ];
-  const filteredStderr = start.buffer.stderr
+  const filteredStderr = preview.buffer.stderr
     .split("\n")
-    .filter(line => !ignoredLines.some(ignoredLine => line.includes(ignoredLine)))
-    .join("\n")
-    .trim();
+    .filter(
+      (line) =>
+        line && !ignoredLines.some((ignoredLine) => ignoredLine.test(line)),
+    )
+    .join("\n");
   expect(filteredStderr).toBe("");
 });
 

.tests/test.cloudflare.ts

@@ -20,14 +20,17 @@ test("dev", async ({ page, $ }) => {
   ];
   const filteredStderr = dev.buffer.stderr
     .split("\n")
-    .filter(line => line && !ignoredLines.some(ignoredLine => ignoredLine.test(line)))
+    .filter(
+      (line) =>
+        line && !ignoredLines.some((ignoredLine) => ignoredLine.test(line)),
+    )
     .join("\n");
   expect(filteredStderr).toBe("");
 });
 
 test("preview", async ({ page, $ }) => {
-  const port1 = await getPort();
-  const preview = $(`pnpm preview --port ${port1}`);
+  const port = await getPort();
+  const preview = $(`pnpm preview --port ${port}`);
 
   const url = await matchLine(preview.stdout, urlRegex.viteDev);
   await workflow({ page, url });
@@ -39,7 +42,10 @@ test("preview", async ({ page, $ }) => {
   ];
   const filteredStderr = preview.buffer.stderr
     .split("\n")
-    .filter(line => line && !ignoredLines.some(ignoredLine => ignoredLine.test(line)))
+    .filter(
+      (line) =>
+        line && !ignoredLines.some((ignoredLine) => ignoredLine.test(line)),
+    )
     .join("\n");
   expect(filteredStderr).toBe("");
 });

cloudflare-d1/package.json

@@ -2,14 +2,15 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "dev": "react-router dev",
     "build": "react-router build",
+    "preview": "npm run build && vite preview",
+    "deploy": "npm run build && wrangler deploy",
     "db:generate": "dotenv -- drizzle-kit generate",
     "db:migrate": "wrangler d1 migrations apply --local DB",
     "db:migrate-production": "dotenv -- drizzle-kit migrate",
-    "dev": "react-router dev",
-    "start": "wrangler dev",
-    "deploy": "npm run build && wrangler deploy",
-    "typecheck": "wrangler types && react-router typegen && tsc -b"
+    "cf-typegen": "wrangler types",
+    "typecheck": "npm run cf-typegen && react-router typegen && tsc -b"
   },
   "dependencies": {
     "@react-router/node": "^7.5.3",
@@ -21,7 +22,8 @@
     "react-router": "^7.5.3"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20250303.0",
+    "@cloudflare/vite-plugin": "^1.0.12",
+    "@cloudflare/workers-types": "^4.20250429.0",
     "@react-router/dev": "^7.5.3",
     "@tailwindcss/vite": "^4.0.0",
     "@types/node": "^20",
@@ -31,8 +33,8 @@
     "drizzle-kit": "~0.28.1",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.8.3",
-    "vite": "^5.4.11",
+    "vite": "^6.3.3",
     "vite-tsconfig-paths": "^5.1.4",
-    "wrangler": "^3.114.1"
+    "wrangler": "^4.13.2"
   }
 }

cloudflare-d1/react-router.config.ts

@@ -1,7 +1,8 @@
 import type { Config } from "@react-router/dev/config";
 
 export default {
-  // Config options...
-  // Server-side render by default, to enable SPA mode set this to `false`
   ssr: true,
+  future: {
+    unstable_viteEnvironmentApi: true,
+  },
 } satisfies Config;

cloudflare-d1/vite.config.ts

@@ -1,41 +1,14 @@
 import { reactRouter } from "@react-router/dev/vite";
-import { cloudflareDevProxy } from "@react-router/dev/vite/cloudflare";
+import { cloudflare } from "@cloudflare/vite-plugin";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
-import { getLoadContext } from "./load-context";
 
-export default defineConfig(({ isSsrBuild }) => ({
-  build: {
-    rollupOptions: isSsrBuild
-      ? {
-          input: "./workers/app.ts",
-        }
-      : undefined,
-  },
-  ssr: {
-    target: "webworker",
-    noExternal: true,
-    resolve: {
-      conditions: ["workerd", "browser"],
-    },
-    optimizeDeps: {
-      include: [
-        "react",
-        "react/jsx-runtime",
-        "react/jsx-dev-runtime",
-        "react-dom",
-        "react-dom/server",
-        "react-router",
-      ],
-    },
-  },
+export default defineConfig({
   plugins: [
-    cloudflareDevProxy({
-      getLoadContext,
-    }),
+    cloudflare({ viteEnvironment: { name: "ssr" } }),
     tailwindcss(),
     reactRouter(),
     tsconfigPaths(),
   ],
-}));
+});

cloudflare-d1/wrangler.jsonc

@@ -0,0 +1,17 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "react-router-app",
+  "compatibility_date": "2025-04-04",
+  "main": "./workers/app.ts",
+  "vars": {
+    "VALUE_FROM_CLOUDFLARE": "Hello from Cloudflare"
+  },
+  "d1_databases": [
+    {
+      "binding": "DB",
+      "database_name": "your-database-name",
+      "database_id": "your-database-id",
+      "migrations_dir": "drizzle"
+    }
+  ]
+}