Cloudflare support for Vite #8531

pcattori · 2024-01-16T19:19:58Z

This currently relies on wrangler@beta, so let's wait to merge this until the next stable release of wrangler that includes getBindingsProxy. CF core team says that should happen next week or so.

Usage

// vite.config.ts
import {
  unstable_vitePlugin as remix,
  unstable_vitePluginAdapterCloudflare as cloudflare,
} from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    remix({
      adapter: await cloudflare(),
    }),
  ],
});

The cloudflare adapter reads bindings from wrangler.toml and sets them on the env field of load context:

// app/routes/_index.tsx

// ... some code ...

const key = "__my-key__";

export async function loader({ context }: LoaderFunctionArgs) {
  const { MY_KV } = context.env;
  const value = await MY_KV.get(key);
  return json({ value });
}

// ... some more code ...

TODO

build script: ssr conditions as part of adapter API
docs
tests
changeset

changeset-bot · 2024-01-16T19:20:02Z

🦋 Changeset detected

Latest commit: 132fc21

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@remix-run/cloudflare-pages	Patch
@remix-run/dev	Patch
@remix-run/server-runtime	Patch
@remix-run/cloudflare	Patch
@remix-run/deno	Patch
@remix-run/node	Patch
@remix-run/react	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/architect	Patch
@remix-run/express	Patch
@remix-run/serve	Patch
@remix-run/testing	Patch
create-remix	Patch
remix	Patch
@remix-run/css-bundle	Patch
@remix-run/eslint-config	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

cloudkite · 2024-01-16T20:37:28Z

Exciting 🙌 does the build target workers or pages? Or can we choose the build target? Thanks!

pcattori · 2024-01-16T21:09:56Z

Exciting 🙌 does the build target workers or pages? Or can we choose the build target? Thanks!

Pages. CF core team flagged that Workers is now deprecated since Pages now is able to do everything Workers could do

sergiodxa · 2024-01-16T21:26:07Z

@pcattori I would like to try this on my own website since I deploy to CF Pages, how could I do it? Would it be enough if I use patch-package to patch the Vite plugin to include the changes here?

jfsiii · 2024-01-17T03:05:54Z

@pcattori thanks for highlighting "do not use Worker Sites for new projects".

We have a production app using Sites and I'd love to adopt Vite without having to also switch to Pages. It's clear we'll need to eventually but that prerequisite pushes Vite so much further away.

Would supporting Workers and Pages be a lot of extra work/complexity/etc? Perhaps Workers could be supported for some bridge period then removed later?

pcattori · 2024-01-17T20:03:24Z

@sergiodxa I'll include instructions for trying things out once its in a good state for that. Right now there are a couple pieces missing.

@jfsiii I haven't looked into how much work supporting CF Workers would be. There's a decent chance that this work will already support CF Workers but not something we test for right now, so would love feedback from y'all if you try it out.

templates/unstable-vite-cloudflare/package.json

packages/remix-dev/vite/adapter.ts

templates/unstable-vite-cloudflare/.cloudflare/adapter.ts

pcattori · 2024-01-19T17:21:18Z

CF merged the getBindingsProxy PR and that is now available in latest beta release of wrangler. They said stable release should be sometime next week, so let's wait for that and then we should be able to nuke the entire .cloudflare/ dir in the template. It also means we can read CF bindings from wrangler.toml instead of requiring duplication of those bindings in vite.config.ts!

templates/unstable-vite-cloudflare/.cloudflare.ts

pcattori · 2024-01-20T17:18:34Z

templates/unstable-vite-cloudflare/functions/[[path]].ts

+const build = async (): Promise<ServerBuild> => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  // eslint-disable-next-line import/no-unresolved
+  return import("../build/server");
+};


Getting type-safe access to the build has come up a couple times.

@markdalgleish I'm tempted to design a getBuild API that returns Promise<ServerBuild | undefined> to avoid this ugly boilerplate. Server bundles complicate things slightly, though we could just return undefined when server bundles are present.

const build = getServerBuild() if (!build) throw Error("gotta run `remix vite:build` first!") export onRequest = createRequestHandler({ build })

Plus this means you can change your output dir in vite.config.ts without needing to update code in server.ts or other scripts that rely on its location.

Writing the above snippet made me think that we should just include the throw Error part within getServerBuild and return Promise<ServerBuild> instead.

That said, this is something we can consider after Vite is stabilized.

templates/unstable-vite-cloudflare/vite.config.ts

sergiodxa · 2024-01-21T06:56:28Z

Since the bindings are set automatically, will context.env get correct types for the bindings? Like context.env.MY_KV bring a KVNamespace? Or we will need it still override AppLoadContext?

hi-ogawa · 2024-01-22T00:10:20Z

templates/unstable-vite-cloudflare/package.json

+    "@remix-run/cloudflare": "*",
+    "@remix-run/cloudflare-pages": "*",
+    "@remix-run/react": "*",


Currently Remix includes @remix-run/node in optimizeDeps but this template doesn't have direct dependency on it. This might cause Vite's warning for non-flat node_modules like pnpm where @remix-run/node is not visible from root project.

I have a similar case where I use @remix-run/server-runtime directly without @remix-run/node and I've seen this warning on startup:

Failed to resolve dependency: @remix-run/node, present in 'optimizeDeps.include'

I'm not sure what's the best way to avoid this within Remix (also knowing that the necessity of this optimizeDeps might be only for non-standard setup during tests), but for now, what I did was to exclude manually by custom plugin config hook https://github.com/hi-ogawa/demo-remix-unstable-vite-cloudflare-workers/blob/2bdd6a4e15dc99584aa23897a5c1a40d7b185f6e/vite.config.ts#L15-L17

pcattori · 2024-01-22T17:08:00Z

Since the bindings are set automatically, will context.env get correct types for the bindings? Like context.env.MY_KV bring a KVNamespace? Or we will need it still override AppLoadContext?

The bindings are defined in a TOML file (wrangler.toml) so there's no way to get automatic types for it without type gen. Not something I'm inherently opposed to, but we don't have type gen as part of the scope for the "stabilizing Vite" work.

cloudcreatr · 2024-01-22T17:09:55Z

How do I access the D1 database? Am i supposed to make wrangler file or pass it through wrangler dev --d1 flag....

pcattori · 2024-01-22T17:17:37Z

How do I access the D1 database? Am i supposed to make wrangler file or pass it through wrangler dev --d1 flag....

The wrangler dev --d1 flag only sets D1 when running wrangler. But with remix vite:dev, wrangler is never run. So if you want a consistent experience across Vite Dev Server, wrangler dev, and your deployment, its best to define it within wrangler.toml.

🚨 As of today, the latest stable version of wrangler (3.23.0) does not support wrangler.toml for CF pages. This feature is available on wrangler@beta or the next release of wrangler (presumably 3.24)

cloudcreatr · 2024-01-22T17:26:07Z

@pcattori cf pages doesn't support toml file you said.. but the movie demo which Ryan launched uses toml file and it works fine and he applied migration that are visible in local db also.. but i think as you said.. toml doesn't work and the latest remix and cloudflare is kind off broken.. when i apply migration. The changes is not reflected in local db even after passing flags and creating a toml file as recommended by cf docs.. i wanted to know.. there's no server file in app dir.. how is streaming handled.. also.. i wanted to setup this locally with binding for my project just to see and work and play around.. even if it's beta.. how can I set up like . Thanks for your work

pcattori · 2024-01-22T17:44:24Z

@pcattori cf pages doesn't support toml file you said.. but the movie demo which Ryan launched uses toml file and it works fine and he applied migration that are visible in local db also.. but i think as you said.. toml doesn't work and the latest remix and cloudflare is kind off broken.. when i apply migration. The changes is not reflected in local db even after passing flags and creating a toml file as recommended by cf docs.. i wanted to know.. there's no server file in app dir.. how is streaming handled.. also.. i wanted to setup this locally with binding for my project just to see and work and play around.. even if it's beta.. how can I set up like . Thanks for your work

CF core team mentioned that CF pages reading from wrangler.toml before v3.24 was an accidental implementation detail and may not read all values from wrangler.toml so something may have just worked, but not guaranteed. For how streaming is setup, checkout the default entry.server.tsx for CF.

@cloudcreatr good questions, but to keep this conversation focused on the changes introduced in this PR, please ask any follow-up questions about how CF + Remix generally works in our Discord. Thanks!

markdalgleish · 2024-01-24T22:12:18Z

docs/future/vite.md

-<docs-warning>Note that Cloudflare is not yet supported when using Vite.</docs-warning>
-


NuroDev · 2024-01-26T18:34:12Z

docs/future/vite.md

+
+# Wrangler
+remix vite:build # build app before running wrangler
+wranger pages dev ./build/client


Shouldn't this be 'wrangler'?

It is using wrangler via wrangler pages dev, not sure I understand your question.

Typo wranger instead of wrangler 😄

Oh now I see it 😅 yep you're right

tsteckenborn · 2024-01-27T09:20:34Z

Am I doing something stupid, or is running it in dev via "remix vite:dev", currently always crashing / exiting completely if a route is not matching anything?

No routes matched location "..." 
/Users/.../Documents/div/.../node_modules/.pnpm/wrangler@3.24.0/node_modules/wrangler/wrangler-dist/cli.js:29572
throw a;
        ^
TypeError: Cannot read properties of undefined (reading 'get')

pcattori · 2024-01-27T15:11:48Z

Am I doing something stupid, or is running it in dev via "remix vite:dev", currently always crashing / exiting completely if a route is not matching anything?
No routes matched location "..." 
/Users/.../Documents/div/.../node_modules/.pnpm/wrangler@3.24.0/node_modules/wrangler/wrangler-dist/cli.js:29572
throw a;
        ^
TypeError: Cannot read properties of undefined (reading 'get')

@tsteckenborn Can you provide a repro in stackblitz? My guess is that something is not playing nice with pnpm

patdx · 2024-01-30T08:56:58Z

What's the recommended way to customize the getLoadContext in the vite Cloudflare mode?

For example I was attaching this cache adapter on each request: https://github.com/AdiRishi/cachified-adapter-cloudflare-kv

Should I create a custom server for dev mode and edit the getLoadContext in the catch-all route for prod mode? Or create an entry.server.ts file?

Update: For prod mode I solved as above. For dev mode, I ended up modifying the adapter in vite.config, but it feels like like I'm not supposed to be able to do this. Also I can't add any per-request properties to the context this way:

export default defineConfig({
  plugins: [
    remix({
      adapter: async () => {
        const { viteConfig, loadContext } = await cloudflare()();

        const env = loadContext.env; // KVDATA, D1DATA

        const ctx = {
          ...env,
          CACHIFIED_KV_CACHE: cloudflareKvCacheAdapter({
            kv: env.KVDATA as any,
          }),
          drizzle: createDrizzle(env.D1DATA),
          executionCtx: {
            waitUntil() {
              // no-op
            },
            passThroughOnException() {
              // no-op
            },
          },
        };

        return {
          viteConfig,
          loadContext: ctx,
        };
      },
    }),
  ],
});

pcattori · 2024-01-30T16:18:36Z

@patdx there's still a couple things to figure out for a general way loadContext since it affects all possible servers, not just CF. What you're doing seems like an excellent workaround in the meantime.

github-actions · 2024-01-31T17:14:05Z

🤖 Hello there,

We just published version 2.6.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

cloudkite · 2024-02-01T20:14:37Z

@pcattori would be nice if this exposed both configPath and persist from: https://github.com/cloudflare/workers-sdk/blob/main/packages/wrangler/src/api/integrations/bindings/index.ts#L19

This would be great for monorepos where the wrangler.toml and persisted data might live in the parent/root dir, which is not necessarily the same dir as vite.config.ts

github-actions · 2024-02-01T21:37:41Z

🤖 Hello there,

We just published version 2.6.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

tsteckenborn · 2024-02-02T18:26:21Z

... solved. Issue was in front of the keyboard.

remix-cla-bot bot added the CLA Signed label Jan 16, 2024

pcattori marked this pull request as draft January 16, 2024 19:24

brophdawg11 added package:dev runtime:cloudflare vite labels Jan 17, 2024

markdalgleish reviewed Jan 17, 2024

View reviewed changes

templates/unstable-vite-cloudflare/package.json Outdated Show resolved Hide resolved

pcattori commented Jan 18, 2024

View reviewed changes

packages/remix-dev/vite/adapter.ts Outdated Show resolved Hide resolved

pcattori commented Jan 18, 2024

View reviewed changes

templates/unstable-vite-cloudflare/.cloudflare/adapter.ts Outdated Show resolved Hide resolved

pcattori force-pushed the pedro/vite-cloudflare branch 2 times, most recently from 6da77a9 to 3e41c29 Compare January 18, 2024 22:26

pcattori mentioned this pull request Jan 20, 2024

Application files are not built when AppConfig.server is set in remix.config.js #8526

Closed

pcattori commented Jan 20, 2024

View reviewed changes

templates/unstable-vite-cloudflare/.cloudflare.ts Outdated Show resolved Hide resolved

pcattori commented Jan 20, 2024

View reviewed changes

templates/unstable-vite-cloudflare/vite.config.ts Outdated Show resolved Hide resolved

hi-ogawa reviewed Jan 22, 2024

View reviewed changes

pcattori force-pushed the pedro/vite-cloudflare branch from 9e2f7bc to c8513a3 Compare January 22, 2024 17:50

wip: adapter works in dev

66a89ab

pcattori added 3 commits January 23, 2024 15:04

upgrade wrangler versions from beta to 3.24

028ac1e

docs: vite > cloudflare

66a2adc

changeset and better wording in docs

eb9084b

markdalgleish reviewed Jan 24, 2024

View reviewed changes

markdalgleish and others added 8 commits January 25, 2024 10:14

tweak docs

4022791

Merge branch 'dev' into pedro/vite-cloudflare

60ca0ab

tweak docs

c30f22e

tweak docs

6a78dae

simplify build import in template

8d534fe

tweak changeset

92b44b6

add tests for vite dev + cloudflare

b24b14a

Merge branch 'dev' into pedro/vite-cloudflare

132fc21

pcattori changed the title ~~WIP: CloudFlare support for Vite~~ Cloudflare support for Vite Jan 25, 2024

pcattori marked this pull request as ready for review January 25, 2024 19:59

pcattori merged commit d74514a into dev Jan 25, 2024
9 checks passed

pcattori deleted the pedro/vite-cloudflare branch January 25, 2024 20:18

github-actions bot added the awaiting release This issue has been fixed and will be released soon label Jan 25, 2024

NuroDev reviewed Jan 26, 2024

View reviewed changes

github-actions bot mentioned this pull request Jan 31, 2024

chore: Update version for release (pre) #8645

Merged

github-actions bot mentioned this pull request Feb 1, 2024

chore: Update version for release #8666

Merged

github-actions bot removed the awaiting release This issue has been fixed and will be released soon label Feb 1, 2024

acusti mentioned this pull request Feb 12, 2024

Compatibility with remix 2.x jplhomer/superflare#62

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cloudflare support for Vite #8531

Cloudflare support for Vite #8531

pcattori commented Jan 16, 2024 •

edited

Loading

changeset-bot bot commented Jan 16, 2024 •

edited

Loading

cloudkite commented Jan 16, 2024

pcattori commented Jan 16, 2024

sergiodxa commented Jan 16, 2024

jfsiii commented Jan 17, 2024

pcattori commented Jan 17, 2024

pcattori commented Jan 19, 2024

pcattori Jan 20, 2024 •

edited

Loading

pcattori Jan 20, 2024 •

edited

Loading

pcattori Jan 22, 2024 •

edited

Loading

sergiodxa commented Jan 21, 2024

hi-ogawa Jan 22, 2024 •

edited

Loading

pcattori commented Jan 22, 2024

cloudcreatr commented Jan 22, 2024

pcattori commented Jan 22, 2024 •

edited

Loading

cloudcreatr commented Jan 22, 2024

pcattori commented Jan 22, 2024

markdalgleish Jan 24, 2024

NuroDev Jan 26, 2024

pcattori Jan 26, 2024 •

edited

Loading

reichhartd Jan 26, 2024 •

edited

Loading

pcattori Jan 26, 2024

tsteckenborn commented Jan 27, 2024 •

edited

Loading

pcattori commented Jan 27, 2024

patdx commented Jan 30, 2024 •

edited

Loading

pcattori commented Jan 30, 2024

github-actions bot commented Jan 31, 2024

cloudkite commented Feb 1, 2024

github-actions bot commented Feb 1, 2024

tsteckenborn commented Feb 2, 2024 •

edited

Loading

		<docs-warning>Note that Cloudflare is not yet supported when using Vite.</docs-warning>

Cloudflare support for Vite #8531

Cloudflare support for Vite #8531

Conversation

pcattori commented Jan 16, 2024 • edited Loading

Usage

TODO

changeset-bot bot commented Jan 16, 2024 • edited Loading

🦋 Changeset detected

cloudkite commented Jan 16, 2024

pcattori commented Jan 16, 2024

sergiodxa commented Jan 16, 2024

jfsiii commented Jan 17, 2024

pcattori commented Jan 17, 2024

pcattori commented Jan 19, 2024

pcattori Jan 20, 2024 • edited Loading

Choose a reason for hiding this comment

pcattori Jan 20, 2024 • edited Loading

Choose a reason for hiding this comment

pcattori Jan 22, 2024 • edited Loading

Choose a reason for hiding this comment

sergiodxa commented Jan 21, 2024

hi-ogawa Jan 22, 2024 • edited Loading

Choose a reason for hiding this comment

pcattori commented Jan 22, 2024

cloudcreatr commented Jan 22, 2024

pcattori commented Jan 22, 2024 • edited Loading

cloudcreatr commented Jan 22, 2024

pcattori commented Jan 22, 2024

markdalgleish Jan 24, 2024

Choose a reason for hiding this comment

NuroDev Jan 26, 2024

Choose a reason for hiding this comment

pcattori Jan 26, 2024 • edited Loading

Choose a reason for hiding this comment

reichhartd Jan 26, 2024 • edited Loading

Choose a reason for hiding this comment

pcattori Jan 26, 2024

Choose a reason for hiding this comment

tsteckenborn commented Jan 27, 2024 • edited Loading

pcattori commented Jan 27, 2024

patdx commented Jan 30, 2024 • edited Loading

pcattori commented Jan 30, 2024

github-actions bot commented Jan 31, 2024

cloudkite commented Feb 1, 2024

github-actions bot commented Feb 1, 2024

tsteckenborn commented Feb 2, 2024 • edited Loading

pcattori commented Jan 16, 2024 •

edited

Loading

changeset-bot bot commented Jan 16, 2024 •

edited

Loading

pcattori Jan 20, 2024 •

edited

Loading

pcattori Jan 20, 2024 •

edited

Loading

pcattori Jan 22, 2024 •

edited

Loading

hi-ogawa Jan 22, 2024 •

edited

Loading

pcattori commented Jan 22, 2024 •

edited

Loading

pcattori Jan 26, 2024 •

edited

Loading

reichhartd Jan 26, 2024 •

edited

Loading

tsteckenborn commented Jan 27, 2024 •

edited

Loading

patdx commented Jan 30, 2024 •

edited

Loading

tsteckenborn commented Feb 2, 2024 •

edited

Loading