remix-service-bindings
This is a plugin for using cloudflare workers service bindings in Remix.
Script size must be kept under 1 megabyte to deploy to Cloudflare Workers. By splitting services and connecting them with service bindings, they are freed from that limitation.
Automatically split scripts during production deployment and deploy to two workers.
One side receives access at the edge. But it does not have loader and action logic, it just SSRs the React component.
The other holds the loader and action logic on behalf of the edge and is called from the edge by the service binding.
In other words, the bundle size per worker can be reduced because it is automatically divided into two groups: workers with design-related libraries, such as UI libraries, and workers with logic and libraries for processing server-side data.
This worker isolation process is handled by esbuild plug-ins, so the developer does not need to be aware of any control over it.
Install
You need wrangler >= 2.0.0.
npm install -D wrangler remix-service-bindings remix-esbuild-override
Setup
// remix.config.js
const { withEsbuildOverride } = require("remix-esbuild-override");
const remixServiceBindings = require("remix-service-bindings").default;
withEsbuildOverride((option, { isServer }) => {
if (isServer) {
option.plugins = [
/**
* remixServiceBindings
* @param isEdgeSide {boolean} - When this is true, the build is for edge (binder) and when false, the build is for bindee.
* (Deployment (build) must be done in two parts.)
* @param bindingsName {string} - The bind name set in toml. This name will be converted to a bind object.
* @param enabled {boolean} - If this is false, this plugin is disabled.
*/
remixServiceBindings(!process.env.BINDEE, "BINDEE", !!process.env.DEPLOY),
...option.plugins,
];
}
return option;
});
/**
* @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/",
};
server.js
import { createEventHandler } from "@remix-run/cloudflare-workers";
import * as build from "@remix-run/dev/server-build";
addEventListener(
"fetch",
createEventHandler({
build,
mode: process.env.NODE_ENV,
getLoadContext: (event) => {
return { event };
},
})
);
wrangler.edge.toml
# wrangler.toml
name = "your-service-name"
compatibility_date = "2022-05-11"
account_id = ""
workers_dev = true
main = "./build/index.js"
[[unsafe.bindings]]
name = "BINDEE"
type = "service"
service = "your-bindee-service-name"
environment = "production"
[site]
bucket = "./public"
[build]
command = "DEPLOY=true npm run build"
wrangler.bindee.toml
# wrangler.bindee.toml
name = "your-bindee-service-name"
compatibility_date = "2022-05-11"
account_id = ""
workers_dev = true
main = "./build/index.js"
[site]
bucket = "./public"
[build]
command = "DEPLOY=true BINDEE=true npm run build"
package.json
"scripts": {
"deploy:edge": "wrangler publish -c wrangler.edge.toml",
"deploy:bindee": "wrangler publish -c wrangler.bindee.toml",
}
Deploy
npm run deploy:bindee
rm -rf public/build
npm run deploy:edge
License
This project is licensed under the MIT License - see the LICENSE file for details
8 Dec 30, 2022
24 Dec 25, 2022
16 Dec 26, 2022
7 Dec 14, 2022
280 Dec 12, 2022
2.1k Jan 8, 2023
1 Nov 1, 2022
1 Nov 11, 2021
2 Jun 7, 2022
178 Jan 2, 2023
1 Dec 29, 2021
1 Jan 2, 2022
130 Dec 10, 2022
128 Dec 21, 2022
1.2k Dec 27, 2022
7.4k Jan 6, 2023
6 Mar 14, 2022
3 Dec 15, 2022
48 Sep 29, 2022