#Durable Objects 🤝 Cloudflare Pages

1 messages · Page 1 of 1 (latest)

full stratus
#

Hey hey folks! Just letting you know that we've just shipped a wrangler@beta release which now properly allows you to use Durable Objects with wrangler pages dev.

If you have a Worker service (name-of-service) which defines MyDurableObject, you can run wrangler dev --local as normal. Now, alongside that in another terminal window, you can also run wrangler pages dev ./public --do MY_BINDING=MyDurableObject@name-of-service. They will automatically connect up such that your Remix app now has MY_BINDING which proxies through to the running name-of-service Worker's Durable Object.

This feature is still experimental, so if you find any quirks please file a GitHub issue!

Typically, I'll create a project that looks like this:

app/
  routes/
    index.tsx
  entry.client.tsx
  entry.server.tsx
  root.tsx

durable_objects/
  src/
    index.ts
    User.ts
  package.json
  wrangler.toml

public/
  favicon.ico

.node-version
package.json
remix.config.js
remix.env.d.ts
server.js

where my durable_objects/wrangler.toml looks something like:

name = "durable-service"


[durable_objects]
bindings = [
  { name = "User", class_name = "User" }
]

And then be running wrangler dev --local in the durable_objects directory and wrangler pages dev ./public --do User=User@durable-service in the root. Let us know how you get on!

#

cc @topaz monolith who's asked me about this before 🙂

toxic hemlock
#

wow, that's great, a much welcome feature! 🙌 now I'm gonna get rid of my hacked-together server.js

toxic hemlock
# full stratus cc <@545477066296918026> who's asked me about this before 🙂

just testing this now: found what looks like an issue.

when I'm doing stub.fetch(url) from Remix loader now, formerly it just accepted arbitrary URL, like /main and now wrangler requires it to be valid URI, like http://0.0.0.0/main

okay, so I feed this url even going as far as using URL constructor (stub.fetch(new URL('http://0.0.0.0/main'))).

and it does arrive at the DO's fetch but for some reason the pathname get lost in transit somehow:

    url: URL {
      href: 'http://0.0.0.0:50334/',
      origin: 'http://0.0.0.0:50334',
      protocol: 'http:',
      username: '',
      password: '',
      host: '0.0.0.0:50334',
      hostname: '0.0.0.0',
      port: '50334',
      pathname: '/',
      search: '',
      searchParams: URLSearchParams {},
      hash: ''
    }
full stratus
#

Weird about the pathname getting lost though!

toxic hemlock
#

I have compatibility_date = "2022-07-14" in my wrangler.toml which means durable_object_fetch_requires_full_url is already enabled by default?

full stratus
#

Yes, that’s correct

#

So you need to pass in a full URL, like you described

toxic hemlock
#

another issue: up until now I used to have an upgrade header while doing fetch from a loader

  return stub.fetch('http://0.0.0.0/main', {
    headers: { Upgrade: 'websocket' }
  })

and now wrangler errors with TypeError: fetch failed cause: InvalidArgumentError: invalid upgrade header however this is required to work in production

#

I guess both are Miniflare issues, which I likely have to file

full stratus
#

I'm looking into the pathname issue right now, but won't get to the WebSocket one until next week, I'm afraid.

toxic hemlock
#

no worries at all!

#

do you want me to file an issue for the pathname in GitHub?

full stratus
#

Found the bug, don't bother 🙂

toxic hemlock
#

cool!

#

since I have a moment now, just wanted to say a personal thank you! I am following what you're doing and I'm amazed how much you were already able to achieve.

can speak on behalf of the whole community and say that your hard work is truly appreciated! 👏 🚀

full stratus
#

And thank you for the kind words! I hope we keep it up for y'all 🎉

toxic hemlock
#

checking now...

#

pathname is there!

#

hm... now getting

TypeError: fetch failed
  cause: SocketError: other side closed
    code: 'UND_ERR_SOCKET'
full stratus
#

If you can create a minimal repro example, that would really help for the WebSocket stuf

toxic hemlock
#

yeah, I need to create a repro example for another issue with Miniflare anyway... 🙂 I'll do it

toxic hemlock
#

it used to work with wrangler 2.0.22 but then again I used some server.js hack to make DOs work locally. no Functions. so not ideal

toxic hemlock
#

@full stratus let me know if I need to file a ticket for this

full stratus
#

Ah, yes, please do. I too easily lose track of Discord messages. Having it as a GitHub Issue will mean we can keep track of it as a team.

toxic hemlock
full stratus
#

Thank you very much!

spiral citrus
#

This is so awesome! Thanks @full stratus and the CF Pages team for working on this 🙌

floral egret
#

@full stratus this is great! is there an example repo anywhere with this combo? it would be great to see steps from a remix npx create-remix -> cloudflare pages -> add durable object workflow example

floral egret
#

so does this mean we deploy the worker / durable object separate from the remix/pages app?

floral egret
#

got this working btw, thank you!

full stratus
#

Glad to hear! Hopefully it was just a case of creating a new Worker (can be anywhere you like) which runs your Durable Object, and then calling your Remix worker like wrangler pages dev ./public --do User=User@durable-service as above 🙂