edmundhung / remix-cloudflare-template

📜 All-in-one remix starter template for Cloudflare Pages

remix-cloudflare-template

Learn more about Remix Stacks.

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

What's included?

• Development with Vite
• Github Actions for CI/CD
• Markdoc for rendering markdown
• Styling with Tailwind
• End-to-end testing with Playwright
• Local third party request mocking with MSW
• Code formatting with Prettier
• Linting with ESLint
• Static Types with TypeScript

Development

Before start, copy .dev.vars.example and name it .dev.vars with the required secrets.

cp .dev.vars.example .dev.vars

To starts the vite dev server:

npm run dev

You can also start the Playwright UI mode to test your application. You will find all the tests defined in the /tests/e2e directory.

npm run test

To test your application on the workerd runtime, you can start the wrangler dev server with:

npm run build && npm run start

New environment variable & secret

To add a new secret, please update the value on the .dev.vars file.

For the rest of the environment variable, you can update the var section on the wrangler.toml file with the new variable:

[vars]
NEW_VARIABLE = "..."

The variables will be available from the env object in the context.

Setup a KV Namespace

To setup a new KV namespace on the development environment, update wrangler.toml with another object similar to the cache namespace as shown below:

kv_namespaces = [
  { binding = "cache", id = "cache" },
  { binding = "new_namespace", id = "new_namespace" }
]

Note that the id has no effect on the dev environment. You can use the same name for both id and binding. The namespace will be available form the env object in the context.

Generate env types

You can generate the types of the env object based on wrangler.toml and .dev.vars with:

npx wrangler types

Deployment

Before your first deployment, make sure all the environment variables and bindings are set properly on the Cloudlfare Dashboard.

Creating a new application

To create a new application on the Cloudflare Dashboard, select Workers and Pages from the menu and click on Create Application. You can then follow the instructions based on your needs.

Setting up environment variables

To set up environment variables, select Workers and Pages from the menu and look for the application details. You will find the environment variables section under the Settings tab.

Setting up KV namespaces

To set up a new KV namespaces, you need to create a new namespace first through the KV menu under Workers and Pages and click Create a namespace.

After creating the namespace, you can bind the namespace to the application from the application details page. You can find the setting from the Functions section under the Settings tab.

Debugging

If your application is not working properly, you can find the real-time logs in the Functions tab from the deployment details page.

remix-cloudflare-template's Issues

Direct routes accessing

Hello, it’s me again ;)

I’m writing some sort of simple marketplace using chakra-ui template, can you take a brief look …

https://ccremix.bzz.workers.dev/dash

This is simple index page without any design and actions, you can access it via link above …

first link - goes to “/“, where in in action: redirect(/list);
second link - just to “/list”

if you go to “/“ or “/list” via links - everything ok. but if you try to just reload this links or another direct access to any link with layout and with or without actions (no matter) - you got Unexpected Server Error
First what I see at console :

GET /list 500 Internal Server Error

…..

TypeError: Cannot read properties of null (reading 'registered')
at /Users/havok/Work/lawsvc/packages/ccremix/dist/worker.mjs:331:15250
at Object.render (/Users/havok/Work/lawsvc/packages/ccremix/dist/worker.mjs:53:94418)
at e.t.render (/Users/havok/Work/lawsvc/packages/ccremix/dist/worker.mjs:1:23821)
at e.t.read (/Users/havok/Work/lawsvc/packages/ccremix/dist/worker.mjs:1:22729)
at Object.l8.renderToString (/Users/havok/Work/lawsvc/packages/ccremix/dist/worker.mjs:3:573)

Do you have any ideas? I can show code, but nothing special there, just design and some fetches to API ….

Sorry for bother you again, and thanks in advance)

Chakra UI integration

And then, i start thinking, that all problems goes from chakra-ui integration…
I tried to do it, perfect guide here https://chakra-ui.com/guides/getting-started/remix-guide
(i found some other examples with chakra, but only for vercel... all my current stack is on cf, very want to make it work on workers....
but i encounter another problems, when i did everything in thus guide…
Because of some packages dependencies (dotenv and some other packages) when i trying to npm run start i got next errors…
Do you have any ideas how can it be fixed?
In old workers version in webpack conf i can simply resolve all modules like fs, stream etc to null … but what I can do in this situation, i tried some options but i didn’t find no real cure… Thanks in advance if you have any thoughts …

✘ [ERROR] Could not resolve "stream"

node_modules/through/index.js:1:21:
  1 │ var Stream = require('stream')
    ╵                      ~~~~~~~~

The package "stream" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "fs"

node_modules/dotenv/lib/main.js:24:19:
  24 │ const fs = require('fs')
     ╵                    ~~~~

The package "fs" wasn't found on the file system but is built into node. Are
you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "stream"

node_modules/multipipe/index.js:7:26:
  7 │ var PassThrough = require('stream').PassThrough;
    ╵                           ~~~~~~~~

The package "stream" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "path"

node_modules/dotenv/lib/main.js:25:21:
  25 │ const path = require('path')
     ╵                      ~~~~~~

The package "path" wasn't found on the file system but is built into node. Are
you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "stream"

node_modules/readable-stream/readable.js:1:21:
  1 │ var Stream = require('stream'); // hack to fix a circular dependenc...
    ╵                      ~~~~~~~~

The package "stream" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "os"

node_modules/dotenv/lib/main.js:26:19:
  26 │ const os = require('os')
     ╵                    ~~~~

The package "os" wasn't found on the file system but is built into node. Are
you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "buffer"

node_modules/readable-stream/lib/_stream_writable.js:29:21:
  29 │ var Buffer = require('buffer').Buffer;
     ╵                      ~~~~~~~~

The package "buffer" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "buffer"

node_modules/readable-stream/lib/_stream_readable.js:30:21:
  30 │ var Buffer = require('buffer').Buffer;
     ╵                      ~~~~~~~~

The package "buffer" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "events"

node_modules/readable-stream/lib/_stream_readable.js:35:17:
  35 │ var EE = require('events').EventEmitter;
     ╵                  ~~~~~~~~

The package "events" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "stream"

node_modules/readable-stream/lib/_stream_readable.js:43:21:
  43 │ var Stream = require('stream');
     ╵                      ~~~~~~~~

The package "stream" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "buffer"

node_modules/core-util-is/lib/util.js:103:27:
  103 │ exports.isBuffer = require('buffer').Buffer.isBuffer;
      ╵                            ~~~~~~~~

The package "buffer" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "events"

node_modules/duplexer2/node_modules/readable-stream/lib/internal/streams/stream-browser.js:1:25:
  1 │ module.exports = require('events').EventEmitter;
    ╵                          ~~~~~~~~

The package "events" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "buffer"

node_modules/safe-buffer/index.js:2:21:
  2 │ var buffer = require('buffer')
    ╵                      ~~~~~~~~

The package "buffer" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "events"

node_modules/duplexer2/node_modules/readable-stream/lib/_stream_readable.js:42:17:
  42 │ var EE = require('events').EventEmitter;
     ╵                  ~~~~~~~~

The package "events" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "stream"

node_modules/readable-stream/lib/_stream_writable.js:40:21:
  40 │ var Stream = require('stream');
     ╵                      ~~~~~~~~

The package "stream" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

✘ [ERROR] Could not resolve "buffer"

node_modules/string_decoder/index.js:22:21:
  22 │ var Buffer = require('buffer').Buffer;
     ╵                      ~~~~~~~~

The package "buffer" wasn't found on the file system but is built into node.
Are you trying to bundle for node? You can use "platform: 'node'" to do that,
which will remove this error.

Unknown error caught during build: Error: Build failed with 16 errors:
node_modules/core-util-is/lib/util.js:103:27: ERROR: Could not resolve "buffer"
node_modules/dotenv/lib/main.js:24:19: ERROR: Could not resolve "fs"
node_modules/dotenv/lib/main.js:25:21: ERROR: Could not resolve "path"
node_modules/dotenv/lib/main.js:26:19: ERROR: Could not resolve "os"
node_modules/duplexer2/node_modules/readable-stream/lib/_stream_readable.js:42:17: ERROR: Could not resolve "events"
...
at failureErrorWithLog (/Users/havok/Work/lawsvc/packages/ccremix/node_modules/esbuild/lib/main.js:1601:15)
at /Users/havok/Work/lawsvc/packages/ccremix/node_modules/esbuild/lib/main.js:1247:28
at runOnEndCallbacks (/Users/havok/Work/lawsvc/packages/ccremix/node_modules/esbuild/lib/main.js:1160:65)
at buildResponseToResult (/Users/havok/Work/lawsvc/packages/ccremix/node_modules/esbuild/lib/main.js:1245:7)
at /Users/havok/Work/lawsvc/packages/ccremix/node_modules/esbuild/lib/main.js:1354:14

How it works your playwright configuration.

I have a question about your playwright configuration.

I see you are using Vite to create a server, I have done something similar but with Express and using the code emitted by Remix's Esbuild.

My two questions are:

• If I'm not mistaken, this configuration doesn't require a previous npm run build because we are using Vite directly.
• Does the actual MSW configuration allow you the following situation?

Test A -> Mock Handler A with response X, B with response Y, C with response Z
Test B -> Mock Handler A with response H, B with response J

Is the package maintained?

Also there doesn't seem to be many examples of Cloudflare Workers + Remix, pls link any other maintained solutions if possible.

process is not defined

can you give me an example how to load env variable from .env ?
already using dotenv but dont know how to use it

thank you

fetch() requests didn't work on workers but working at miniflare local dev

Hello!

I have tested fetch(), and axios request - in routes files - everything same - at worker, any request did't get any response... at local dev (miniflare) everything ok ....
and by the way, how i can use Cloudflare KV read/writ in *.server.ts files? I have added everything as usually but in this template seems like something works bit different...
Can you please show me a way...
Thanks in advance