remix-bun
v1.1.0
Published
Bun server request handler for Remix
Downloads
86
Maintainers
Readme
remix-bun
Bun server adapter for remix
Get Started
Prerequirements
- Install bun
Now either
- Use the example in
examples/basic
(Easiest way!) - Setup a new remix project
- Add
remix-bun
to your existing remix project:
Create a new remix app
Use the example in examples/basic
(Easiest way!)
$ git clone [email protected]:patlux/remix-bun.git
$ cd remix-bun/examples/basic
$ bun install
You are ready to go!
Just run bun run dev
to start the development server.
Use create-remix
Create a new project with the following commands:
$ bunx create-remix@latest --no-install --typescript
# Where would you like to create your app?
# -> my-remix-bun-app
# What type of app do you want to create?
# -> Just the basics
# Where do you want to deploy? Choose Remix App Server if you're unsure; it's easy to change deployment targets.
# -> Remix App Server
# 💿 That's it! `cd` into "<..>/my-remix-bun-app" and check the README for development and deploy instructions!
$ cd my-remix-bun-app
Continue with the steps below in Add to existing project
Add to existing project
Add remix-bun
to your existing project with the following commands:
$ bun add remix-bun
$ bun add -d bun-types npm-run-all
# See below in "Setup project" for further instructions
Setup project
Make sure you followed the instructions above before you continue.
- Add
server.ts
in the root of your project:
// <root-folder>/server.ts
import type { ServeOptions } from "bun";
import { createRequestHandler } from "remix-bun";
setInterval(() => Bun.gc(true), 9000);
const bunServeOptions: ServeOptions = {
port: parseInt(process.env.PORT ?? "3000", 10),
fetch:
process.env.NODE_ENV === "production"
? createRequestHandler({
build: require("./build"),
mode: "production",
})
: async (request: Request) => {
const build = require("./build");
const requestHandler = createRequestHandler({
build,
mode: "development",
});
return requestHandler(request);
},
};
export default bunServeOptions;
tsconfig.json
Make the following changes:
diff --git a/tsconfig.json b/tsconfig.json
index 20f8a38..92db692 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,13 +1,14 @@
{
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
"compilerOptions": {
- "lib": ["DOM", "DOM.Iterable", "ES2019"],
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "esnext",
+ "target": "esnext",
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"resolveJsonModule": true,
- "target": "ES2019",
"strict": true,
"allowJs": true,
"forceConsistentCasingInFileNames": true,
@@ -15,7 +16,6 @@
"paths": {
"~/*": ["./app/*"]
},
// Remix takes care of building everything in `remix build`.
"noEmit": true
}
remix-env.d.ts
Make the following changes:
diff --git a/remix.env.d.ts b/remix.env.d.ts
index dcf8c45..a2385a1 100644
--- a/remix.env.d.ts
+++ b/remix.env.d.ts
@@ -1,2 +1,4 @@
+/// <reference lib="DOM" />
+/// <reference lib="DOM.Iterable" />
+/// <reference types="bun-types" />
/// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/node" />
package.json
Add the following scripts to your package.json
:
diff --git a/package.json b/package.json
index fb04c8d..c1b8e17 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,10 @@
"private": true,
"sideEffects": false,
"scripts": {
+ "dev:remix": "bun run node_modules/@remix-run/dev/dist/cli.js watch",
+ "dev:server": "NODE_ENV=development bun --hot ./server.ts",
+ "dev": "run-p dev:*",
"build": "remix build",
- "dev": "remix dev",
- "start": "remix-serve build",
+ "start": "NODE_ENV=production bun run ./server.ts",
"typecheck": "tsc -b"
},
<root-folder>/app/entry.server.ts
Check the content of your <root-folder>/app/entry.server.ts
.
If you are using renderToString
, you are fine but you can replace it as below if you want.
If you are using renderToPipeableStream
then replace your entry.server.ts
with the following:
import type { EntryContext } from "@remix-run/node";
import { Response } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import isbot from "isbot";
import { renderToReadableStream } from "react-dom/server";
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return isbot(request.headers.get("user-agent"))
? handleBotRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
)
: handleBrowserRequest(
request,
responseStatusCode,
responseHeaders,
remixContext
);
}
function handleBotRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return new Promise(async (resolve, reject) => {
const stream = await renderToReadableStream(
<RemixServer context={remixContext} url={request.url} />,
{
onError(error) {
console.error(error);
reject(error);
},
}
);
resolve(
new Response(stream, {
status: responseStatusCode,
headers: responseHeaders,
})
);
});
}
function handleBrowserRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
return new Promise(async (resolve, reject) => {
const stream = await renderToReadableStream(
<RemixServer context={remixContext} url={request.url} />,
{
onError(error) {
console.error(error);
reject(error);
},
}
);
resolve(
new Response(stream, {
status: responseStatusCode,
headers: responseHeaders,
})
);
});
}
Development
From your terminal:
bun run dev
This starts your app in development mode, rebuilding assets on file changes.
Troubleshooting
TypeError: undefined is not a function (near '...(0 , import_server.renderToPipeableStream)...')
You need to adjust the entry.server.ts
as suggested in "Setup project".
TODO
Support remix's --template
bunx create-remix@latest --template patlux/remix-bun --typescript
Would be nice for a better way of bootstraping new remix projects with bun.
But it's currently not possible because bun
doesn't support the bun config get
command like npm or yarn.
$ bunx create-remix@latest --template patlux/remix-bun --typescript
# Where would you like to create your app? ./my-remix-app
# Do you want me to run `bun install`? Yes
# ⠏ Creating your app…error: script not found "config"
# Command failed: bun config get @remix-run:registry
# error: script not found "config"
# error: "create-remix" exited with code 1 (SIGHUP)
Release
bunx changeset
Enter a summary for the changes.
bunx changeset version
git add .
git commit -m "chore(release): vX.X.X"
Credits
Created by @de_patwoz