This is a plugin for using cloudflare workers service bindings in Remix.

Overview

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

{ 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/", };">
// 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

{ return { event }; }, }) );">
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

You might also like...
Website to provide Service for Finances App Expense and Revenue Management. Developed using ViteJS, TypeScript, ReactJS, Styled-Components and Framer Motion.
Website to provide Service for Finances App Expense and Revenue Management. Developed using ViteJS, TypeScript, ReactJS, Styled-Components and Framer Motion.

Website to provide Service for Finances App Expense and Revenue Management. Developed using ViteJS, TypeScript, ReactJS, Styled-Components and Framer Motion.

React Test Shop Using Remix
React Test Shop Using Remix

React Test Shop Using Remix Development Build React Test Shop makes API calls to an external server. First set up this server by cloning the React Tes

👜 Next-gen e-commerce built using Remix, Chakra UI, GraphQL and web3
👜 Next-gen e-commerce built using Remix, Chakra UI, GraphQL and web3

👜 Future Store Here at New Store, we have the best in women's, men's, bags, shoes, accessories and more. Unmissable discounts and installments. Buy a

Example using preact-compat with Remix

Welcome to Remix! Remix Docs Development From your terminal: npm run dev This starts your app in development mode, rebuilding assets on file changes.

A ReactJS clone application of the popular Spotify music streaming service. This application utilizes the Spotify API and the Spotify Web Playback SDK
A ReactJS clone application of the popular Spotify music streaming service. This application utilizes the Spotify API and the Spotify Web Playback SDK

Spotify Clone Front-End A front-end clone project of the Spotify web player. The project was created using the create-react-app CLI. The app is meant

Flagsmith is an open source, fully featured, Feature Flag and Remote Config service
Flagsmith is an open source, fully featured, Feature Flag and Remote Config service

Flagsmith is an open source, fully featured, Feature Flag and Remote Config service. Use our hosted API, deploy to your own private cloud, or run on-premise.

Apollo Client service for React applications

graphql-react-client Apollo Client service for React applications Installing Using npm: npm i -s graphql-react-client Using yarn: yarn add graphql-rea

 Simple Page of 'Health Related Service' (City Psyciatric Hospital) - Assignment (Milestone - 10)
Simple Page of 'Health Related Service' (City Psyciatric Hospital) - Assignment (Milestone - 10)

Assignment of Milestone 10 , Making an Website (Health Care Service) with Firebase , Private React Router, JavaScript (ES6) , Custom JSON & Tailwind Etc.

This uses Azure AI Text Analytics services to teach on how to connect an AI service to a web-based system

Azure AI: Text Analytics services using react This app uses the Azure text analytics services to call various services such as sentiment analysis, ent

Comments
  • The automated release is failing 🚨

    The automated release is failing 🚨

    :rotating_light: The automated release from the main branch failed. :rotating_light:

    I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

    You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

    Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

    Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

    If you are not sure how to resolve this, here are some links that can help you:

    If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


    Invalid npm token.

    The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

    If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default " Authorization and writes" level.

    Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.


    Good luck with your project ✨

    Your semantic-release bot :package::rocket:

    semantic-release 
    opened by github-actions[bot] 2
Releases(v1.1.1)
  • v1.1.1(May 14, 2022)

  • v1.1.0(May 14, 2022)

  • v1.0.0(May 13, 2022)

    1.0.0 (2022-05-13)

    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.

    Features

    • make remixServiceBindingsPlugin (a6b996f)
    Source code(tar.gz)
    Source code(zip)
Owner
Aiji Uejima
I'm working for an IT company in Nagoya, Japan on web development
Aiji Uejima
Remix-graphql - Utilities for using GraphQL with a Remix app

remix-graphql Remix and GraphQL can live together in harmony ❤️ This package con

Thomas Heyenbrock 172 Nov 29, 2022
为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers

Qwerty Learner English 为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 ?? 在线访问 Vercel: https://qwerty.kaiyi.cool/ , https://qwerty-learner.vercel.app/ GitHub Pages: https://

Kaiyi 6.7k Dec 5, 2022
Jot notes and ideas; Share & Collaborate with your co-workers.

iNotesPress - WordPress Note Taking plugin for teams A Noteworthy and the most beautiful note taking plugin for WordPress. Notes for resources like Po

kamesh sethupathi 6 Mar 14, 2022
Frontend for Reguleque, a search engine for chilean public workers records' as obtained through transparency databases.

Frontend for Reguleque, a search engine for chilean public workers records' as obtained through transparency databases.

América Transparente 3 Oct 21, 2022
Remix-code-snippets - Speed up your Remix development with dynamic code snippets

remix-code-snippets Speed up your Remix development with dynamic code snippets.

Dylan Blokhuis 1 Dec 29, 2021
Project Remix Blog - A Simple blog built with Remix (A Full Stack React Framework) and Prisma DB

Project Remix Blog - A Simple blog built with Remix (A Full Stack React Framework) and Prisma DB

Devanshu Vashishtha 1 Jan 2, 2022
Remix Fundamentals: Get a jumpstart on Remix with this workshop

?? Remix Fundamentals Build Better websites with Remix Remix enables you to buil

Kent C. Dodds 129 Nov 30, 2022
Remix-seo - Collection of SEO utilities like sitemap, robots.txt, etc. for a Remix Application

Remix SEO Collection of SEO utilities like sitemap, robots.txt, etc. for a Remix

Balavishnu V J 126 Nov 15, 2022
Remix Auth is a complete open-source authentication solution for Remix.run applications.

Remix Auth Simple Authentication for Remix Features Full Server-Side Authentication Complete TypeScript Support Strategy-based Authentication Easily h

Sergio Xalambrí 1.2k Dec 5, 2022
🎵 The frontend of Oud, an online music streaming service that is a high quality clone of Spotify with all its functionalities built using ReactJS, React-Router, Bootstrap.

Oud Front-End Table of Contents About the Project Build with Getting Started Installation Running Screenshots Videos File Structure Unit Testing Runni

Ahmed Ashraf 48 Sep 29, 2022