Update usage of env to be cross-platform

Author: kristianfreeman

app/lib/sanity/index.ts

@@ -1,12 +1,12 @@
 import { createClient } from '@sanity/client'
-import { env } from 'cloudflare:workers'
 
 // This function should only be called server-side where env is available
+// The token must be passed from the loader context where env is accessible
 export const getSanityClient = (token?: string) => {
   return createClient({
     projectId: '0s2zavz0',
     dataset: 'production',
-    token: token || env.SANITY_TOKEN,
+    token: token,
     useCdn: true,
     apiVersion: '2024-05-31'
   })

app/routes/built-with._index.jsx

@@ -39,8 +39,10 @@ export const query = `
   }
 `
 
-export const loader = async () => {
-  const client = getSanityClient();
+export const loader = async ({ context }) => {
+  // In dev mode, pass token from context; in production it uses cloudflare:workers env
+  const sanityToken = context?.cloudflare?.env?.SANITY_TOKEN || context?.env?.SANITY_TOKEN;
+  const client = getSanityClient(sanityToken);
   const response = await client.fetch(query)
   return json(response);
 };

app/routes/built-with.collections.$slug.jsx

@@ -40,8 +40,10 @@ const query = `
   }
 `
 
-export const loader = async ({ params: { slug } }) => {
-  const client = getSanityClient();
+export const loader = async ({ params: { slug }, context }) => {
+  // In dev mode, pass token from context; in production it uses cloudflare:workers env
+  const sanityToken = context?.cloudflare?.env?.SANITY_TOKEN || context?.env?.SANITY_TOKEN;
+  const client = getSanityClient(sanityToken);
   const response = await client.fetch(query, { slug })
   return json(response);
 };

app/routes/built-with.projects.$slug.jsx

@@ -262,8 +262,10 @@ const query = `
   }
 `
 
-export const loader = async ({ params: { slug } }) => {
-  const client = getSanityClient();
+export const loader = async ({ params: { slug }, context }) => {
+  // In dev mode, pass token from context; in production it uses cloudflare:workers env
+  const sanityToken = context?.cloudflare?.env?.SANITY_TOKEN || context?.env?.SANITY_TOKEN;
+  const client = getSanityClient(sanityToken);
   const response = await client.fetch(query, { slug })
   if (!response.project) return redirect("/not-found")
   return json(response);

package.json

@@ -48,5 +48,10 @@
   },
   "engines": {
     "node": ">=20.0.0"
+  },
+  "overrides": {
+    "@remix-run/dev": {
+      "wrangler": "$wrangler"
+    }
   }
 }

vite.config.ts

@@ -18,7 +18,6 @@ export default defineConfig({
     tsconfigPaths(),
   ],
   ssr: {
-    external: ["cloudflare:workers"],
     resolve: {
       conditions: ["workerd", "worker", "browser"],
     },
@@ -28,8 +27,5 @@ export default defineConfig({
   },
   build: {
     minify: true,
-    rollupOptions: {
-      external: ["cloudflare:workers"],
-    },
   },
 });