vite-plugin-cloudflare-workers

[brillout]

vite-plugin-ssr already supports Cloudflare Workers https://vite-plugin-ssr.com/cloudflare-workers but it would be lovely to have a vite-plugin-cloudflare-workers so that the entire Vite ecosystem can benefit.

Discussoin about this: https://discord.com/channels/815937377888632913/815937377888632916/915547793987350548

I've secured the npm package and I'm happy to give it away.

[brillout]

Also @frandiox

Collaborating on a common Cloudflare Workers deploy script would benefit Hydrogen as well. Eventually SvelteKit Astro etc. we would all collaborate on vite-plugin-cloudflare-workers.

[frandiox]

@brillout For some reason the link to Discord doesn't work for me :/
How's Vercel different from CFW? I think they run on top of it, right?
Also, what type of functionality are you picturing for this plugin? Only related to deployment? 🤔

[brillout]

@frandiox

Title had typo, I meant vite-plugin-cloudflare-workers. Makes more sense now 😀.

For now vite-plugin-cloudflare-workers would only contain the esbuild command to bundle alll server-side files. So for now it wouldn't really be a Vite plugin. But, after vitejs/vite#5936 is implemented, it would also integrate with Vite.

The Vite integration part is probably less interesting for Hydrogen, but collaboarting on the server-side bunlding script would benefit everyone including Hydrogen and Cloudflare Workers would also be interested in this (I believe you guys are in talks with them). There are a lot of subtle nuances in worker bundling that makes it complex and well worth to collaborate on.

Thoughts?

[frandiox]

@brillout

For now vite-plugin-cloudflare-workers would only contain the esbuild command to bundle alll server-side files. So for now it wouldn't really be a Vite plugin.

The thing is, in Hydrogen we use Vite itself to bundle for workers via ssr.noExternal: true and ssr.target: webworker (as mentioned here).
I was using ESBuild in Vitedge because it was before ssr.noExternal: true landed in Vite. However, for a plugin like this, I think it would make more sense to use Vite directly, right?

Maybe I'm missing something here, what other bundling do you have in mind?
There's one challenge when deploying to CFW (I think we talked about this long time ago), which is that a worker cannot make requests to itself so we need to re-route API calls in SSR to local functions. However, I'm not sure if this is something to do in a plugin... using Telefunc or anything like that is probably easy enough already 🤔

But, after vitejs/vite#5936 is implemented, it would also integrate with Vite.

Ah yes, I had to make a CLI just for this in vite-ssr/Vitedge... it would be cool if we could either pass custom flags or build steps :)
Is this something the Vite team has already considered? Or waiting on them?

[brillout]

Makes sense, a plugin would make more sense for other platforms like Vercel.

Alghough after #5936 it could still make sense. We didn't talk with Vite's team about it but I can see them merging it in.

[brillout]

@frandiox

Actually, ssr.noExternal: true doesn't work if the user has Node.js dependencies such as Node.js's path.

Many, if not most, libraries have Node.js dependencies; ssr.noExternal: true will break for all these (Hydroden) use cases.

So a vite-plugin-cloudflare-workers would actually add value, for example by including Node.js shims.

[frandiox]

@brillout Ah right, that could be useful to make things work with different 3p libraries. I've seen a bunch of libraries calling Buffer at the top level and crashing in CFW 😓

So this plugin would provide custom Vite resolutions to 'stream', etc., plus a few mocks for Buffer and other global stuff? 🤔 -- and keep it in sync with CFW since they might support certain Node APIs at some point.

[brillout]

Exactly.

We would maintain vite-plugin-cloudflare ourselves for now but eventually it is Cloudflare who will maintain it.

This will benefit both Vite's and Cloudflare's ecosystem.

[brillout]

Btw. you/jplhomer mentioned an upcoming PR for Vite + React Server Components, is it live?

[frandiox]

@brillout yep, it's here: facebook/react#22952
There's also a live demo: https://stackblitz.com/edit/vite-rsc-demo?file=vite.config.js

Beware that this approach is still not validated by the React team, it's just an exploration 😅

[brillout]

That's exciting 👀. I've suscribed to the PR and I'll have a look at the code after Vike's MVP.

Also seeing Shopify/hydrogen#249, which is super exciting as well.

I will have a closer look at Hydrogen after I release Vike's MVP.

[brillout]

@Aslemammad

How about this plan?

1. We explore https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/ in more depth. For example: what are the reasons to use Cloudflare Workers directly instead of Cloudflare Pages?
2. Depending on 1., we build either one or both vite-plugin-cloudflare/pages and vite-plugin-cloudflare/workers.

About the plugin itself:

• It sets ssr: { noExternal: true }.
• It adds shims for Node.js built-ins such as rollup-plugin-node-builtins.
• After #5936 is implemented, we can then hook a deploy script (e.g. wrangler publish).

[Aslemammad]

https://github.com/Aslemammad/vite-plugin-cloudflare-workers going to work on it! Thank you all!

[brillout]

Done by @Aslemammad 💯 https://github.com/Aslemammad/vite-plugin-cloudflare