remix server adapter for cloudflare workers worker module.
You can use remix from the worker module of cloudflare workers.
Implement the worker as follows and call the createFetch function.
worker/index.ts
import { createFetch } from "remix-cloudflare-workers-fetch";
import type { ServerBuild } from "remix-cloudflare-workers-fetch";
import * as build from "../build";
//@ts-ignore
import assetJson from "__STATIC_CONTENT_MANIFEST";
const fetch = createFetch({
build: build as unknown as ServerBuild,
assetJson,
mode: "production",
options: {
cacheControl: {
bypassCache: true,
}
}
});
export default {
fetch,
};
npm install remix-cloudflare-workers-fetch
This section describes the modifications required to call remix from the fetch function.
This article will use as an example a remix project created using the following method.
npx create-remix@latest
? Where would you like to create your app? fetch-example
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix if you're unsure; it's easy to change deployment targets. Cloudflare Workers
? Do you want me to run `npm install`? Yes
...
? TypeScript or JavaScript? TypeScript
cd fetch-example
npm i -D wrangler@latest esbuild ts-node
npx wrangler -v
2.0.5
npm i remix-cloudflare-workers-fetch
Make the following modifications to prevent remix build from creating workers for cloudflare workers.
- Remove server from remix.config.js
/**
* @type {import('@remix-run/dev').AppConfig}
*/
module.exports = {
serverBuildTarget: "cloudflare-workers",
// server: "./server.js",
devServerBroadcastDelay: 1000,
ignoredRouteFiles: ["**/.*"],
// appDirectory: "app",
// assetsBuildDirectory: "public/build",
// serverBuildPath: "build/index.js",
// publicPath: "/build/",
};
Execute the following command.
The remix server module will be created in build directory.
npx remix build
Create worker directory and implement the module worker.
mkdir worker
touch worker/index.ts
worker/index.ts
import { createFetch } from "remix-cloudflare-workers-fetch";
import type { ServerBuild } from "remix-cloudflare-workers-fetch";
import * as build from "../build";
//@ts-ignore
import assetJson from "__STATIC_CONTENT_MANIFEST";
const fetch = createFetch({
build: build as unknown as ServerBuild,
assetJson,
mode: "production",
options: {
cacheControl: {
bypassCache: true,
}
}
});
export default {
fetch,
};
Worker/index.ts is built with esbuild.
Create the following file.
build-worker.ts
import { build } from "esbuild";
build({
entryPoints: ["./worker/index.ts"],
bundle: true,
sourcemap: true,
format: "esm",
outfile: "dist/index.mjs",
minify: true,
external: ["__STATIC_CONTENT_MANIFEST"],
}).catch(() => process.exit(1));
Execute the following command.
A module worker will be created in the dist directory.
npx ts-node build-worker.ts
Change wrangler.toml to the following.
name = "fetch-example"
main = "dist/index.mjs"
workers_dev = true
compatibility_date = "2022-05-15"
[site]
bucket = "./public"
Please confirm that REMIX starts up with the following command.
wrangler login
wrangler dev