templates(cloudflare-workers): use static assets #10034

edmundhung · 2024-09-26T23:10:54Z

This PR updates the cloudflare-workers template to use the Static Assets feature announced today.

Note: Static assets is currently in open beta

You can learn more about Static Assets in the documentation.

Closes: #

Docs
Tests

Testing Strategy:

To test, please run create-remix with the template on my fork

npx create-remix@latest --template edmundhung/remix/templates/cloudflare-workers

Then deploy it with wrangler by running:

npm run deploy

Woohoo! Your Remix app is now running on Cloudflare Workers: https://template.remix-run.workers.dev

changeset-bot · 2024-09-26T23:10:57Z

⚠️ No Changeset found

Latest commit: 1b52fe4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

templates/cloudflare-workers/server.ts

templates/cloudflare-workers/wrangler.toml

moishinetzer · 2024-09-27T11:27:37Z

templates/cloudflare-workers/wrangler.toml

@@ -1,12 +1,14 @@
+#:schema node_modules/wrangler/config-schema.json


Where's this coming from?

If you use an IDE extension that support json schema over TOML, this will give you auto completion and validation on your wrangler.toml, like this one.

fabulous - perhaps add it as a comment?

It's generated by the wrangler.

Where's this coming from?

templates/cloudflare-workers/package.json

Co-authored-by: Brooks Lybrand <[email protected]>

tsteckenborn · 2024-09-28T09:39:12Z

@edmundhung while you're on it, shouldn't https://github.com/edmundhung/remix/blob/1b52fe4b118735692b94d5338fca39c1b8bc55ae/templates/cloudflare-workers/app/root.tsx#L8 and https://github.com/edmundhung/remix/blob/workers-assets/templates/cloudflare-workers/app/routes/_index.tsx be from @remix-run/cloudflare?

ayuhito · 2024-09-28T09:46:32Z

I've been testing this template and it's been working flawlessly. However, has anyone else managed to make the asset binding work? I keep getting TypeError: Cannot read properties of undefined (reading 'fetch') when using the Fetcher interface of the asset binding.

This only occurs when running the dev script with remix:vite dev. wrangler dev seems to work, although that requires the whole build step.

tsteckenborn · 2024-09-28T09:48:32Z

@ayuhito are you when running pnpm devalso seeing the state error or is that something on my machine? 😕

So it's showing the page, but I'm seeing the error in the terminal.

> remix vite:dev

Re-optimizing dependencies because lockfile has changed
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
TypeError [ERR_INVALID_STATE]: Invalid state: Controller is already closed
    at ReadableByteStreamController.close (node:internal/webstreams/readablestream:1157:13)

laishere · 2024-09-28T09:51:26Z

@edmundhung while you're on it, shouldn't https://github.com/edmundhung/remix/blob/1b52fe4b118735692b94d5338fca39c1b8bc55ae/templates/cloudflare-workers/app/root.tsx#L8 be from @remix-run/cloudflare?

And this too, they are from the old commits:
https://github.com/edmundhung/remix/blob/1b52fe4b118735692b94d5338fca39c1b8bc55ae/templates/cloudflare-workers/app/routes/_index.tsx#L1

ayuhito · 2024-09-28T09:51:41Z

also seeing the state error or is that something on my machine?

Nope. I've got a different error to that. I was alluding to the fact that cloudflareDevProxyVitePlugin might not perfectly handle the static assets interface in my comment.

FraBle · 2024-10-02T05:54:11Z

Is there any rough timeline for when this PR might land? (excited about using it)

petebacondarwin · 2024-10-03T09:47:07Z

templates/cloudflare-workers/wrangler.toml

-bucket = "./build/client"
+[assets]
+# https://developers.cloudflare.com/workers/static-assets/binding/
+directory = "./build/client"


Should we add an ASSETS binding here too?

@petebacondarwin for the majority of use cases, there’s no need for the binding. the static assets feature intercepts requests and checks if the URL matches anything in the assets directory (source). if it finds a file, it serves that. if not it, invokes your worker. as a result, the ASSETS binding’s only purpose is to provide programmatic access from your worker to the available assets that are already being automatically served when appropriate. i think that’s why the create-cloudflare remix template doesn’t default to including the binding: https://github.com/cloudflare/workers-sdk/blob/main/packages/create-cloudflare/templates-experimental/remix/templates/wrangler.toml

petebacondarwin

This looks good to me. If we can land this we can fix up the create-cloudflare tool to point to it.

focux · 2024-10-04T23:29:22Z

Does this same setup work for SPA mode?

acusti · 2024-10-07T20:18:31Z

Static Assets (aka Workers Assets) is currently in beta, but according to the Wrangler configuration docs, Workers Sites has been deprecated in favor of Workers Assets:

site object optional deprecated

See the Workers Sites section below for more information. Cloudflare Pages and Workers Assets is preferred over this approach.

also, i’ve been using it in production (same as the implementation introduced here) without issue for a few weeks now.

my only comment on this PR is that i’m not sure whether or not it’s worth including the custom getLoadContext pattern for augmenting load context, because it seems like more of an advanced pattern. but it also seems pretty harmless, and maybe it will help template consumers discover the pattern if they find the need for it, so i don’t mind either way.

@focux i haven’t tried it, but i can’t imagine why it wouldn’t work for SPA mode. the static assets feature matches any request to any file in the specified directory (./build/client/ in Remix), so it serves any built JS and HTML (and any other static files placed in the ./public/ directory) automatically.

@FraBle you can use this right away for new projects by using the fork:

npx create-remix@latest --template edmundhung/remix/templates/cloudflare-workers

or just manually apply the diff of this PR to an existing Remix / Cloudflare Workers project if you have one.

MichaelDeBoey · 2024-10-02T22:05:44Z

templates/cloudflare-workers/load-context.ts

+export function getLoadContext({ context }: GetLoadContextArgs) {
+  return context;
+}


Suggested change

export function getLoadContext({ context }: GetLoadContextArgs) {

return context;

}

export const getLoadContext = ({ context }: GetLoadContextArgs) => context;

brookslybrand · 2024-10-18T14:45:18Z

templates/cloudflare-workers/vite.config.ts

-    cloudflareDevProxyVitePlugin(),
+    cloudflareDevProxyVitePlugin({
+      getLoadContext,
+    }),
    remix({
      future: {


@edmundhung let's go ahead and add

v3_lazyRouteDiscovery: true, v3_singleFetch: true,

to the config

brookslybrand · 2024-10-18T14:45:51Z

templates/cloudflare-workers/server.ts

+            // `getPlatformProxy` used during development via Remix's
+            // `cloudflareDevProxyVitePlugin`:
+            // https://developers.cloudflare.com/workers/wrangler/api/#getplatformproxy
+            cf: request.cf,


This causes a type error, should it just be cast to any?

I think we can just set it to

cf: request.cf!

Or, we can change load-context.ts to:

type GetLoadContextArgs = { request: Request; context: { cloudflare: Omit<PlatformProxy<Env, IncomingRequestCfProperties>, "dispose" | "caches" | "cf"> & { caches: PlatformProxy<Env, IncomingRequestCfProperties>['caches'] | CacheStorage; cf: Request['cf']; }; }; }

The first is simpler, but the second is better.

I'd prefer correctness, I'll defer to @edmundhung

remix-cla-bot bot added the CLA Signed label Sep 26, 2024

edmundhung force-pushed the workers-assets branch 2 times, most recently from 0286b11 to 38cd5c9 Compare September 26, 2024 23:29

saaskitten reviewed Sep 27, 2024

View reviewed changes

templates/cloudflare-workers/server.ts Outdated Show resolved Hide resolved

saaskitten reviewed Sep 27, 2024

View reviewed changes

templates/cloudflare-workers/wrangler.toml Show resolved Hide resolved

edmundhung changed the title ~~Update cloudflare worker template to use static assets~~ Update cloudflare-workers template to use static assets Sep 27, 2024

edmundhung force-pushed the workers-assets branch 2 times, most recently from 1e84cba to c59ad09 Compare September 27, 2024 10:38

update cloudflare worker template to use static assets

10776e5

edmundhung force-pushed the workers-assets branch from c59ad09 to 10776e5 Compare September 27, 2024 10:41

moishinetzer reviewed Sep 27, 2024

View reviewed changes

tsteckenborn mentioned this pull request Sep 27, 2024

Wrong template linked? cloudflare/workers-sdk#6847

Closed

brookslybrand added the template:cloudflare-workers label Sep 27, 2024

brookslybrand reviewed Sep 27, 2024

View reviewed changes

templates/cloudflare-workers/package.json Outdated Show resolved Hide resolved

pin wrangler version

1b52fe4

Co-authored-by: Brooks Lybrand <[email protected]>

MichaelDeBoey changed the title ~~Update cloudflare-workers template to use static assets~~ templates(cloudflare-workers): use static assets Sep 29, 2024

zwily mentioned this pull request Sep 30, 2024

templates(classic-compiler/cloudflare-workers): use static assets #10041

Open

petebacondarwin reviewed Oct 3, 2024

View reviewed changes

petebacondarwin approved these changes Oct 3, 2024

View reviewed changes

yusukebe mentioned this pull request Oct 6, 2024

Workers + assets instead of cloudflare pages yusukebe/hono-remix-adapter#14

Closed

MichaelDeBoey approved these changes Oct 9, 2024

View reviewed changes

brookslybrand reviewed Oct 18, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

templates(cloudflare-workers): use static assets #10034

templates(cloudflare-workers): use static assets #10034

edmundhung commented Sep 26, 2024 •

edited

Loading

changeset-bot bot commented Sep 26, 2024 •

edited

Loading

moishinetzer Sep 27, 2024

edmundhung Sep 27, 2024

moishinetzer Sep 27, 2024 •

edited

Loading

laishere Sep 28, 2024

tsteckenborn commented Sep 28, 2024 •

edited

Loading

ayuhito commented Sep 28, 2024

tsteckenborn commented Sep 28, 2024

laishere commented Sep 28, 2024

ayuhito commented Sep 28, 2024

FraBle commented Oct 2, 2024

petebacondarwin Oct 3, 2024

acusti Oct 7, 2024 •

edited

Loading

petebacondarwin left a comment

focux commented Oct 4, 2024

acusti commented Oct 7, 2024

MichaelDeBoey Oct 2, 2024

brookslybrand Oct 18, 2024

brookslybrand Oct 18, 2024

laishere Oct 18, 2024

brookslybrand Oct 18, 2024

		@@ -1,12 +1,14 @@
		#:schema node_modules/wrangler/config-schema.json

templates(cloudflare-workers): use static assets #10034

Are you sure you want to change the base?

templates(cloudflare-workers): use static assets #10034

Conversation

edmundhung commented Sep 26, 2024 • edited Loading

changeset-bot bot commented Sep 26, 2024 • edited Loading

⚠️ No Changeset found

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moishinetzer Sep 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tsteckenborn commented Sep 28, 2024 • edited Loading

ayuhito commented Sep 28, 2024

tsteckenborn commented Sep 28, 2024

laishere commented Sep 28, 2024

ayuhito commented Sep 28, 2024

FraBle commented Oct 2, 2024

Choose a reason for hiding this comment

acusti Oct 7, 2024 • edited Loading

Choose a reason for hiding this comment

petebacondarwin left a comment

Choose a reason for hiding this comment

focux commented Oct 4, 2024

acusti commented Oct 7, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

edmundhung commented Sep 26, 2024 •

edited

Loading

changeset-bot bot commented Sep 26, 2024 •

edited

Loading

moishinetzer Sep 27, 2024 •

edited

Loading

tsteckenborn commented Sep 28, 2024 •

edited

Loading

acusti Oct 7, 2024 •

edited

Loading