Replace vite-node-miniflare with cloudflareDevProxy from @react-router/dev

[ariofrio]

Issues with Cloudflare Templates

1. Duplicate configuration between wrangler.toml and vite.config.ts for dev mode
2. Complex vite.config.ts requiring manual CJS dependency configuration in ssr.optimizeDeps.include to work in dev mode
3. Dependency on unmaintained @hiogawa/vite-node-miniflare for local dev mode
4. Prerendering issues (#31) - to be fixed in PR fix: Cloudflare templates break when prerendering is enabled #45

Solution

Using cloudflareDevProxy from @react-router/dev:

• Automatically pulls config from wrangler.toml for development
• CJS dependencies in dev mode work without manual configuration
• Automatically configures other ssr options or makes them unnecessary
• Both cloudflare and cloudflare-d1 templates updated

@jacob-ebey: Any thoughts on why the templates weren't using cloudflareDevProxy initially?

Note: This supersedes #6 (does this for cloudflare template and also adds wrangler types support). That should be separate since we need to decide on npm scripts and .gitignore handling.

[itxch]

@ariofrio with this change does the d1 example actually still work?
does it pick up "./workers/app.ts"?

[ariofrio]

@ariofrio with this change does the d1 example actually still work? does it pick up "./workers/app.ts"?

Ah, great catch. The cloudflare-d1 example doesn't currently work in this PR.

cloudflareDevProxy actually skips ./worker/app.ts altogether. By default, it passes bindings as loader and action context in the format {cloudflare: {env: {...}}} and allows users to provide a getLoadContext callback to customize that format. This works great if you're willing to use bindings by passing them explicitly as function arguments. This is what I do in my own project.

I'm unsure how to make this work with AsyncLocalStorage.run for implicit dependency injection, though, as the current cloudflare-d1 template does. Some options to consider:

1. Add a callback option to cloudflareDevProxy to wrap execution of the request handler.
2. Figure out if viteDevServer middleware can be used somehow instead of (1).
3. Modify entry.server.tsx and wrap the call to renderToReadableStream.
4. Stop using AsyncLocalStorage in the template in favor of explicit context.

[itxch]

I'm unsure how to make this work with AsyncLocalStorage.run for implicit dependency injection, though, as the current cloudflare-d1 template does. Some options to consider:

Would it be worth in that case, having this PR just updates the cloudflare template, and open an issue with the above?
I'll be looking into ways to get it working with AsyncLocalStorage today too

[WonderPanda]

I'm super new to both Cloudflare and Remix run but am really interested in getting set up with best practices while I'm learning. Seeing all of the complex vite plugin config get removed in this PR definitely seems appealing but I'm not fully understanding how I would go about using D1 with these changes.

[diurivj]

@WonderPanda I opened a PR on react-router-hono plugin that shows how simple is to use cloudflare and react router powered by a hono server, which claims to be the faster server for workers.

Here is the example project
https://github.com/rphlmr/react-router-hono-server/tree/main/examples/cloudflare/d1-drizzle

[WonderPanda]

@WonderPanda I opened a PR on react-router-hono plugin that shows how simple is to use cloudflare and react router powered by a hono server, which claims to be the faster server for workers.

Here is the example project https://github.com/rphlmr/react-router-hono-server/tree/main/examples/cloudflare/d1-drizzle

Thanks, this looks really cool. I'll play around with on my end and see if fixes the issues I've been running into trying to ramp up on this stack.

[diurivj]

Thanks, this looks really cool. I'll play around with on my end and see if fixes the issues I've been running into trying to ramp up on this stack.

Let me know how it goes, also don't hesitate to reach out for any help, good luck!

[brookslybrand]

@ariofrio I went ahead and merged #6 in, which didn't update the cloudflare-d1 template.

If you want to try to update the d1 template that'd be great, but as pointed out this solution does not work as is because it does not actually setup the d1 connection

AsyncLocalStorage doesn't necessarily have to be used, so feel free to to approach it differently. I've messed around with it myself but not landed on something I completely love yet. I think I just want to setup the db client and pass it through getLoadContext. It seems that should be enough

[dan-gamble]

I think a few of these things will end up being dependent on this new WIP plugin from Cloudflare. I believe this works with Vite's new environments API and will allow dev to go through a worker instead of just bindings

[WonderPanda]

I think a few of these things will end up being dependent on this new WIP plugin from Cloudflare. I believe this works with Vite's new environments API and will allow dev to go through a worker instead of just bindings

This looks really promising! Thanks for sharing I'll definitely be keeping an eye on progress here now

[brookslybrand]

Nice, thanks @dan-gamble. Yeah, I'm inclined to close this PR in the meantime and keep #52 open until a better plugin/approach becomes available

@ariofrio I went ahead and opened #63 if you (or anyone) would like to take a look and see if you can suggest improvements