jacob-ebey / remix-cloudflare-demo

A demo of Remix running on Cloudflare workers.

remix-worker-template

The current starter template is based on Remix 0.20.1.

• Remix Docs
• Customer Dashboard

Give it a try

The deploy button will guide you through the setup for CF_API_TOKEN and CF_ACCOUNT_ID on the UI. But you are still required to provide the REMIX_TOKEN as a repository secret yourself for the deploy action to work properly.

Development

To starts your app in development mode, rebuilding assets on file changes, the recommended approach is:

npm run dev

This will run your remix app in dev mode using miniflare with the Cypress test runner opened.

Deployment

First, preview your app with:

npx wrangler preview

When confirmed everythings works, deploy the worker with Wrangler using:

npm run deploy

remix-cloudflare-demo's Issues

Cloudflare Cache does not work

We deploy the site with Remix + Cloudflare worker successfully. But, all static files don't apply cloudflare cache.

As you can see, the response header cf-cache-status: MISS. It takes ~800ms for downloading.

How do we cache all static files in Cloudflare to speed up the site?

Errors on first run

If you clone then install and run yarn dev then you get a whole bunch of errors:

yarn run v1.22.4
$ cross-env NODE_ENV=development concurrently "npm:dev:*"
[dev:*remix] 
[dev:*remix] > dev:remix
[dev:*remix] > remix watch
[dev:*remix]
[dev:*cypress]
[dev:*cypress] > dev:cypress
[dev:*cypress] > cypress open
[dev:*cypress]
[dev:*miniflare]
[dev:*miniflare] > dev:miniflare
[dev:*miniflare] > miniflare --kv REDIRECTS --kv-persist --build-command "npx ts-node ./build.ts" --disable-cache --watch
[dev:*miniflare]
[dev:*tailwind]
[dev:*tailwind] > dev:tailwind
[dev:*tailwind] > tailwindcss -o app/styles/tailwind.css --watch
[dev:*tailwind]
[dev:*remix] Watching Remix app in development mode...
[dev:*cypress] It looks like this is your first time using Cypress: 8.7.0
[dev:*cypress]
[dev:*cypress] [STARTED] Task without title.
[dev:*remix] 
[dev:*remix]  > route-module:C:\dev\me\remix-cloudflare-demo\app\root.tsx:21:30: error: Could not resolve "./styles/tailwind.css"    
[dev:*remix]     21 │ import tailwindStylesUrl from "./styles/tailwind.css";
[dev:*remix]        ╵                               ~~~~~~~~~~~~~~~~~~~~~~~
[dev:*remix] 
[dev:*remix]
[dev:*remix] Build failed with 1 error:
[dev:*remix] route-module:C:\dev\me\remix-cloudflare-demo\app\root.tsx:21:30: error: Could not resolve "./styles/tailwind.css"       
[dev:*remix] 💿 Built in 879ms
[dev:*cypress] [TITLE]  Verified Cypress! C:\Users\mikec\AppData\Local\Cypress\Cache\8.7.0\Cypress
[dev:*cypress] [SUCCESS]  Verified Cypress! C:\Users\mikec\AppData\Local\Cypress\Cache\8.7.0\Cypress
[dev:*cypress]
[dev:*cypress] Opening Cypress...
[dev:*cypress] 
[dev:*tailwind] 
[dev:*tailwind] warn - You have enabled the JIT engine which is currently in preview.
[dev:*tailwind] warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.       
[dev:*tailwind]
[dev:*tailwind] Rebuilding...
[dev:*tailwind] 
[dev:*tailwind] 🌼 daisyUI components 1.16.6  https://github.com/saadeghi/daisyui
[dev:*tailwind]   ✔︎ Including:  base, components, themes[22], utilities
[dev:*tailwind]
[dev:*tailwind] Done in 325ms.
[dev:*remix] 💿 File created: app\styles\tailwind.css
[dev:*miniflare] [Worker] Running esbuild in development mode
[dev:*miniflare]  > worker/index.ts:5:23: error: Could not resolve "../build/index.js"
[dev:*miniflare]     5 │ import * as build from "../build/index.js";
[dev:*miniflare]       ╵                        ~~~~~~~~~~~~~~~~~~~
[dev:*miniflare]
[dev:*miniflare] C:\dev\me\remix-cloudflare-demo\node_modules\esbuild\lib\main.js:1493
[dev:*miniflare]   let error = new Error(`${text}${summary}`);
[dev:*miniflare]               ^
[dev:*miniflare] Error: Build failed with 1 error:
[dev:*miniflare] worker/index.ts:5:23: error: Could not resolve "../build/index.js"
[dev:*miniflare]     at failureErrorWithLog (C:\dev\me\remix-cloudflare-demo\node_modules\esbuild\lib\main.js:1493:15)
[dev:*miniflare]     at C:\dev\me\remix-cloudflare-demo\node_modules\esbuild\lib\main.js:1151:28
[dev:*miniflare]     at runOnEndCallbacks (C:\dev\me\remix-cloudflare-demo\node_modules\esbuild\lib\main.js:1069:65)
[dev:*miniflare]     at buildResponseToResult (C:\dev\me\remix-cloudflare-demo\node_modules\esbuild\lib\main.js:1149:7)
[dev:*miniflare]     at C:\dev\me\remix-cloudflare-demo\node_modules\esbuild\lib\main.js:1258:14
[dev:*miniflare]     at C:\dev\me\remix-cloudflare-demo\node_modules\esbuild\lib\main.js:629:9
[dev:*miniflare]     at handleIncomingPacket (C:\dev\me\remix-cloudflare-demo\node_modules\esbuild\lib\main.js:726:9)
[dev:*miniflare]     at Socket.readFromStdout (C:\dev\me\remix-cloudflare-demo\node_modules\esbuild\lib\main.js:596:7)
[dev:*miniflare]     at Socket.emit (node:events:394:28)
[dev:*miniflare]     at Socket.emit (node:domain:475:12) {
[dev:*miniflare]   errors: [
[dev:*miniflare]     {
[dev:*miniflare]       detail: undefined,
[dev:*miniflare]       location: [Object],
[dev:*miniflare]       notes: [],
[dev:*miniflare]       pluginName: '',
[dev:*miniflare]       text: 'Could not resolve "../build/index.js"'
[dev:*miniflare]     }
[dev:*miniflare]   ],
[dev:*miniflare]   warnings: []
[dev:*miniflare] }
[dev:*remix] 💿 Rebuilding...
[dev:*miniflare] [mf:err] Build failed with exit code 1
[dev:*miniflare] [mf:err] Unable to read worker.js: Error: ENOENT: no such file or directory, open 'C:\dev\me\remix-cloudflare-demo\worker.js' (defaulting to empty string)
[dev:*miniflare] [mf:inf] Worker reloaded! (0B)
[dev:*miniflare] [mf:inf] Listening on :8787
[dev:*miniflare] [mf:inf] - http://172.21.0.1:8787
[dev:*miniflare] [mf:inf] - http://192.168.86.161:8787
[dev:*miniflare] [mf:inf] - http://192.168.216.1:8787
[dev:*miniflare] [mf:inf] - http://192.168.222.1:8787
[dev:*miniflare] [mf:inf] - http://127.0.0.1:8787
[dev:*remix] 💿 Rebuilt in 99ms

If you yarn dev again then there are no more errors.

Not a big issue but I thought I would raise it.

Hot Reloading

Is it possible to enable Hot Reloading?

Durable Objects?

I have tried to adapt your sample to use Durable Objects but am struggling to get it to work. Seems like issues around building and mini-flare, any ideas?

Windicss

Windicss is tailwind compatible faster framework.