Xiphe / remix-island

utils to render remix into a dom-node instead of the whole document
MIT License
126 stars 7 forks source link

Cloudflare example server #7

Closed AaronPowell96 closed 1 year ago

AaronPowell96 commented 1 year ago

An attempt to share a Cloudflare example entry.server.tsx

Not sure if it warrants a whole example so feel free to pick it off or refactor it to better suit general needs.

Hoping to help anyone else using a non-node remix environment such as Cloudflare via webstreams.

Note. This is using cloudflare pages as it's what I was familiar with, I think the server would be the same for workers though.

Xiphe commented 1 year ago

Awesome! Thanks for the contribution!

Would you mind splitting the commits up differently?

That would make it a lot easier for ppl see what exactly they'd need to do in their app by looking at the diff and also much easier for me to review since I'm not familiar with cloudflare.

See git history of the node example for reference.

AaronPowell96 commented 1 year ago

Awesome! Thanks for the contribution!

Would you mind splitting the commits up differently?

  • just moving the old example
  • initializing remix cloudflare
  • installing remix-island into cloudflare example
  • ...potential fixes

That would make it a lot easier for ppl see what exactly they'd need to do in their app by looking at the diff and also much easier for me to review since I'm not familiar with cloudflare.

See git history of the node example for reference.

Hey, I have made the above changes and fixed the commits.

Note: The core difference between node example and Cloudflare example is in the entry.server.tsx where we cannot use 'renderToPipeableStream' method as that's only available on a node environment. Instead we use 'renderToReadableStream' using WebStreams.

There may be better implementations of this however, as I faced the react 18 bug and needed this for Cloudflare, it worked for me and have shared with a few others to use remix-island.

In addition to the React 18 bug fix, this library is also great for using StyledComponent with Remix as we can create the stylesheet and pass it to the head which removes a flicker of the wrong styles using the suggested remix method. Not sure if I know of another other fixes than this for StyledComponents + Remix.

Xiphe commented 1 year ago

Awesome 🎉

thanks for the contribution and glad to hear that this is de-blocking your use-cases!