Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aiji42/remix-service-bindings
https://github.com/aiji42/remix-service-bindings
Last synced: 24 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/aiji42/remix-service-bindings
- Owner: aiji42
- License: mit
- Created: 2022-05-13T13:18:34.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-05-17T14:44:09.000Z (over 2 years ago)
- Last Synced: 2024-10-10T09:49:45.521Z (29 days ago)
- Language: TypeScript
- Size: 154 KB
- Stars: 17
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# remix-service-bindings
This is a plugin for using cloudflare workers [service bindings](https://developers.cloudflare.com/workers/learning/using-services/) 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`.
```bash
npm install -D wrangler remix-service-bindings remix-esbuild-override
```
## Setup
```js
// 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
```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
```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
```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
```json
"scripts": {
"deploy:edge": "wrangler publish -c wrangler.edge.toml",
"deploy:bindee": "wrangler publish -c wrangler.bindee.toml",
}
```
## Deploy
```bash
npm run deploy:bindee
rm -rf public/build
npm run deploy:edge
```
## License
This project is licensed under the MIT License - see the [LICENSE](https://github.com/aiji42/remix-service-bindings/blob/main/LICENSE) file for details