Deploying Remix Vite to Cloudflare Pages

[shripadk]

Hi! Thank you for providing the example Remix vite app along with vite-node-miniflare. It works flawlessly in development environment and has way better DX than the Remix Cloudflare Pages starter kit. But one thing is lacking: instructions on how to deploy the project to Cloudflare Pages. What should the build command look like before using wrangler to deploy? Should I just add this line to my package.json:

"scripts": {
    ...
    "build": "vite build --config vite.config.vite-node.ts && vite build --ssr --config vite.config.vite-node.ts",
}

And deploy the resulting build directory to Cloudflare Pages? Or am I missing something?

Please guide.

Thanks!

[hi-ogawa]

Hey, first of all, thanks for trying it out!

However vite-node-miniflare package was currently only meant for technical showcase of vite-node, vite, miniflare, workerd, etc... So I cannot really recommend anyone to consume this package right now.

I got some feedback from Cloudflare team here https://github.com/dario-piotrowicz/vite-workerd-ssr-request-handler-experimentation/pull/1#issuecomment-1871004369 if you're interested in some details.

Essentially, Cloudflare team (and probably also Remix team) are not going for this approach as a initial step. I think their first integration plan would look more like my other experiments:

• https://github.com/hi-ogawa/demo-remix-unstable-vite-cloudflare-workers
• https://github.com/hi-ogawa/remix-vite-deployment-examples

I have a demo app for Cloudflare Pages in the 2nd repo. Could you try that out instead?

[shripadk]

Thank you so much for the response! Yes I actually went through your other repositories before deciding to try this experiment. The reason I skipped the other ones and narrowed down to this experiment is because I did not find an example of using bindings (kv/r2/d1) in the Cloudflare Pages experiment - and since Miniflare isn't being used I am assuming it won't work in that experiment at least for now. Happy to stand corrected.

So I was wondering if I could just build this and then deploy the build/client folder to Cloudflare Pages (similar to your remix-vite-deployment-examples. Specifically release-cloudflare-pages script)?

[hi-ogawa]

I did not find an example of using bindings (kv/r2/d1) in the Cloudflare Pages experiment

I think extending remix-vite-deployment-examples to support bindings should not be so complicated.

Essentially, you want to add these two tricks from demo-remix-unstable-vite-cloudflare-workers repo:

• https://github.com/hi-ogawa/demo-remix-unstable-vite-cloudflare-workers/blob/928aa50c7988cd27d77157209afffede93ca2568/app/entry.server.tsx#L10-L13
• https://github.com/hi-ogawa/demo-remix-unstable-vite-cloudflare-workers/blob/928aa50c7988cd27d77157209afffede93ca2568/app/miniflare.ts#L1-L28

But actually I'm not really familiar with Cloudflare Pages (which is, to me, a little convoluted wrapper over Cloudflare Workers), so I'm not comfortable to provide an advice on that.

(Especially things around bindings? https://developers.cloudflare.com/pages/functions/bindings/#interact-with-your-kv-namespaces-locally they don't seem to use wrangler.toml based configuration at all...)

[shripadk]

Thanks for the pointers @hi-ogawa. I was able to get it work by doing the reverse: porting the build-cloudflare-pages and release-cloudflare-pages scripts from remix-vite-deployment-examples as I liked the simplicity of this experiment. I just had to modify the app/adapters/cloudflare-workers.ts file to:

import { remixHandler } from "./base.js";

export default {
--fetch: remixHandler,
++fetch: createFetchHandler(),
};

++function createFetchHandler() {
++  return async (request: Request, env: any) => {
++    Object.assign(globalThis, { env })
++    return remixHandler(request, env)
++  }
++}

The package.json file:

  "scripts": {
    "dev": "vite dev --config vite.config.vite-node.ts",
    "build": "vite build && vite build --ssr && bash scripts/build.sh",
    "publish": "wrangler pages deploy ./scripts/build/client --commit-dirty --branch main --project-name remix-vite-deploy-pages"
  },

You can try the demo here:

https://3d27ba5b.remix-vite-deploy-pages-dkv.pages.dev/demo-kv

If you want me to, I can provide the entire source code as a repo or maybe push the changes I made to the example here so it can be deployed to Cloudflare Pages. Tried with binding to R2, D1, KV and it works flawlessly!

Really liked your experiment. It is viable already and will only consider switching from this to the future official version if it actually works better than this.

Thank you so much @hi-ogawa for this wonderful work! Really grateful!

[hi-ogawa]

Awesome! I'm glad you figured it out and thanks for pushing the demo further!

If you want me to, I can provide the entire source code as a repo or maybe push the changes I made to the example here so it can be deployed to Cloudflare Pages.

I'm still a little hesitant to include Cloudflare build/deployment related code on this repo since what I'm doing here is still a completely experimental idea for me and somewhat in-progress (especially because Remix Vite is still "unstable" and things might break depending on how they add features or change some internals). Also again the essence of vite-node-miniflare demo is a integration of local Cloudflare Worked and Vite "development" server.

That said, I'm very curious how you setup Cloudflare Pages and bindings etc... (probably you're more familiar with Cloudflare on this matter), so if you can provide a source code on your public repo, I would be happy to check it out and also add a reference from my repo to yours as an complete example. What do you think?

Really liked your experiment. It is viable already and will only consider switching from this to the future official version if it actually works better than this.

One thing to add on this point, I believe, at the user facing level, these two approaches might not differ significantly, so if things go south with my integration, then switching two wouldn't be so difficult.

Of course, I'm very anxious to see what Remix team would provide eventually, so if they do, I'll compare with their version and also I'll think about how to migrate between their version and my version here.

[shripadk]

That said, I'm very curious how you setup Cloudflare Pages and bindings etc... (probably you're more familiar with Cloudflare on this matter), so if you can provide a source code on your public repo, I would be happy to check it out and also add a reference from my repo to yours as an complete example. What do you think?

Just uploaded the source here: https://github.com/shripadk/remix-vite-cf-pages-example

I'm still a little hesitant to include Cloudflare build/deployment related code on this repo since what I'm doing here is still a completely experimental idea for me and somewhat in-progress (especially because Remix Vite is still "unstable" and things might break depending on how they add features or change some internals). Also again the essence of vite-node-miniflare demo is a integration of local Cloudflare Worked and Vite "development" server.

Totally understand the motivations and agree with you!

One thing to add on this point, I believe, at the user facing level, these two approaches might not differ significantly, so if things go south with my integration, then switching two wouldn't be so difficult.

Yes that is true! It shouldn't be difficult at all to switch as there wouldn't be any significant changes in user facing code.

[shripadk]

Also just wanted to add (will also add to the README in the example). The _PRODUCTION bindings in wrangler.toml file are totally optional. They are only needed if you wish to interact with the production environment using the wrangler CLI tool. But it is definitely needed if you are using D1 as it makes it really easy to apply migrations to the production environment before deployment - else the deployment obviously fails as the schema on the production environment is not synced with the code changes. When setting the binding names in the Cloudflare Dashboard, you will set it to the plain binding name WITHOUT the _PRODUCTION suffix.

And for local environment, the binding name and ID should be the same. This makes it easy to use wrangler CLI tool to also interact with local environment. So if you set KV to be the binding for a KV store, then set id to also be KV.

[shripadk]

Also apologies. I had set the wrong binding names (SESSION and IMAGE_BUCKET) in the README.md in the provided example. Updated the README with the correct bindings. Should have been KV and R2_BUCKET.

[hi-ogawa]

Thanks for putting together the example!

I didn't go through everything yet, but integrating all the bindings (especially d1 migrations) seems more complicated than I thought. It looks like users need to setup bindings/resources from dashboard manually, but in order to manage migrations from wrangler cli, you need to copy the resource ids back to local wrangler.toml.

Interesting stuff nonetheless. I really appreciate you are sharing this. I also want to explore Cloudflare Pages on my own later and your guide would be definitely helpful!

---

Regarding this issue itself, I suppose we can close this since you have figured out the solution yourself. If you have further questions about the plugin, please feel free to open a new issue or continue this thread if something related to deployment.

Thanks for the conversation!

[hi-ogawa]

FYI, I added Cloudflare Pages deployment example to https://github.com/hi-ogawa/demo-remix-unstable-vite-cloudflare-workers by copying scripts from https://github.com/hi-ogawa/remix-vite-deployment-examples