Skip to content

Commit 4eec025

Browse files
yusukebeyusukebe
authored
feat: introduce Node.js handler (#26)
* [WIP] feat: introduce Node.js handler * add example for node * add `node` to `format` command * add load-context for the node example * add e2e test * update readme
1 parent 1e50149 commit 4eec025

22 files changed

+1157
-202
lines changed

‎README.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# hono-remix-adapter
22

3-
`hono-remix-adapter` is a set of tools for adapting between Hono and Remix. It is composed of a Vite plugin and handlers that enable it to support platforms like Cloudflare Workers. You can create an Hono app, and it will be applied to your Remix app.
3+
`hono-remix-adapter` is a set of tools for adapting between Hono and Remix. It is composed of a Vite plugin and handlers that enable it to support platforms like Cloudflare Workers and Node.js. You just create Hono app, and it will be applied to your Remix app.
44

55
```ts
66
// server/index.ts
@@ -120,6 +120,42 @@ import server from '../server'
120120
export const onRequest = handle(build, server)
121121
```
122122

123+
## Node.js
124+
125+
If you want to run your app on Node.js, you can use `hono-remix-adapter/node`. Write `main.ts`:
126+
127+
```ts
128+
// main.ts
129+
import { serve } from '@hono/node-server'
130+
import { serveStatic } from '@hono/node-server/serve-static'
131+
import handle from 'hono-remix-adapter/node'
132+
import * as build from './build/server'
133+
import { getLoadContext } from './load-context'
134+
import server from './server'
135+
136+
server.use(
137+
serveStatic({
138+
root: './build/client',
139+
})
140+
)
141+
142+
const handler = handle(build, server, { getLoadContext })
143+
144+
serve({ fetch: handler.fetch, port: 3010 })
145+
```
146+
147+
Run `main.ts` with [`tsx`](https://github.com/privatenumber/tsx):
148+
149+
```bash
150+
tsx main.ts
151+
```
152+
153+
Or you can compile to a pure JavaScript file with `esbuild` with the command below:
154+
155+
```bash
156+
esbuild main.ts --bundle --outfile=main.mjs --platform=node --target=node16.8 --format=esm --banner:js='import { createRequire as topLevelCreateRequire } from "module"; const require = topLevelCreateRequire(import.meta.url);'
157+
```
158+
123159
## `getLoadContext`
124160

125161
If you want to add extra context values when you use Remix routes, like in the following use case:

‎examples/node/.gitignore

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
node_modules
2+
3+
test-results
4+
5+
/.cache
6+
/build
7+
.env
8+
.dev.vars
9+
10+
.wrangler

‎examples/node/app/entry.client.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* By default, Remix will handle hydrating your app on the client for you.
3+
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
4+
* For more information, see https://remix.run/file-conventions/entry.client
5+
*/
6+
7+
import { RemixBrowser } from '@remix-run/react'
8+
import { startTransition, StrictMode } from 'react'
9+
import { hydrateRoot } from 'react-dom/client'
10+
11+
startTransition(() => {
12+
hydrateRoot(
13+
document,
14+
<StrictMode>
15+
<RemixBrowser />
16+
</StrictMode>
17+
)
18+
})

‎examples/node/app/entry.server.tsx

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/**
2+
* By default, Remix will handle generating the HTTP Response for you.
3+
* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
4+
* For more information, see https://remix.run/file-conventions/entry.server
5+
*/
6+
7+
import { PassThrough } from 'node:stream'
8+
9+
import type { AppLoadContext, EntryContext } from '@remix-run/node'
10+
import { createReadableStreamFromReadable } from '@remix-run/node'
11+
import { RemixServer } from '@remix-run/react'
12+
import { isbot } from 'isbot'
13+
import { renderToPipeableStream } from 'react-dom/server'
14+
15+
const ABORT_DELAY = 5_000
16+
17+
export default function handleRequest(
18+
request: Request,
19+
responseStatusCode: number,
20+
responseHeaders: Headers,
21+
remixContext: EntryContext,
22+
// This is ignored so we can keep it in the template for visibility. Feel
23+
// free to delete this parameter in your app if you're not using it!
24+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
25+
loadContext: AppLoadContext
26+
) {
27+
return isbot(request.headers.get('user-agent') || '')
28+
? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
29+
: handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext)
30+
}
31+
32+
function handleBotRequest(
33+
request: Request,
34+
responseStatusCode: number,
35+
responseHeaders: Headers,
36+
remixContext: EntryContext
37+
) {
38+
return new Promise((resolve, reject) => {
39+
let shellRendered = false
40+
const { pipe, abort } = renderToPipeableStream(
41+
<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
42+
{
43+
onAllReady() {
44+
shellRendered = true
45+
const body = new PassThrough()
46+
const stream = createReadableStreamFromReadable(body)
47+
48+
responseHeaders.set('Content-Type', 'text/html')
49+
50+
resolve(
51+
new Response(stream, {
52+
headers: responseHeaders,
53+
status: responseStatusCode,
54+
})
55+
)
56+
57+
pipe(body)
58+
},
59+
onShellError(error: unknown) {
60+
reject(error)
61+
},
62+
onError(error: unknown) {
63+
responseStatusCode = 500
64+
// Log streaming rendering errors from inside the shell. Don't log
65+
// errors encountered during initial shell rendering since they'll
66+
// reject and get logged in handleDocumentRequest.
67+
if (shellRendered) {
68+
console.error(error)
69+
}
70+
},
71+
}
72+
)
73+
74+
setTimeout(abort, ABORT_DELAY)
75+
})
76+
}
77+
78+
function handleBrowserRequest(
79+
request: Request,
80+
responseStatusCode: number,
81+
responseHeaders: Headers,
82+
remixContext: EntryContext
83+
) {
84+
return new Promise((resolve, reject) => {
85+
let shellRendered = false
86+
const { pipe, abort } = renderToPipeableStream(
87+
<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
88+
{
89+
onShellReady() {
90+
shellRendered = true
91+
const body = new PassThrough()
92+
const stream = createReadableStreamFromReadable(body)
93+
94+
responseHeaders.set('Content-Type', 'text/html')
95+
96+
resolve(
97+
new Response(stream, {
98+
headers: responseHeaders,
99+
status: responseStatusCode,
100+
})
101+
)
102+
103+
pipe(body)
104+
},
105+
onShellError(error: unknown) {
106+
reject(error)
107+
},
108+
onError(error: unknown) {
109+
responseStatusCode = 500
110+
// Log streaming rendering errors from inside the shell. Don't log
111+
// errors encountered during initial shell rendering since they'll
112+
// reject and get logged in handleDocumentRequest.
113+
if (shellRendered) {
114+
console.error(error)
115+
}
116+
},
117+
}
118+
)
119+
120+
setTimeout(abort, ABORT_DELAY)
121+
})
122+
}

‎examples/node/app/root.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Outlet, Scripts } from '@remix-run/react'
2+
3+
export function Layout({ children }: { children: React.ReactNode }) {
4+
return (
5+
<html lang='en'>
6+
<head>
7+
<meta charSet='utf-8' />
8+
<meta name='viewport' content='width=device-width, initial-scale=1' />
9+
</head>
10+
<body>
11+
{children}
12+
<Scripts />
13+
</body>
14+
</html>
15+
)
16+
}
17+
18+
export default function App() {
19+
return <Outlet />
20+
}

‎examples/node/app/routes/_index.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { LoaderFunctionArgs } from '@remix-run/node'
2+
import { useLoaderData } from '@remix-run/react'
3+
4+
export const loader = (args: LoaderFunctionArgs) => {
5+
const extra = args.context.extra
6+
const url = args.context.url
7+
return { extra, url }
8+
}
9+
10+
export default function Index() {
11+
const { extra, url } = useLoaderData<typeof loader>()
12+
return (
13+
<div>
14+
<h1>Remix and Hono</h1>
15+
<h2>URL is {url}</h2>
16+
<h3>Extra is {extra}</h3>
17+
</div>
18+
)
19+
}

‎examples/node/e2e.test.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { expect, test } from '@playwright/test'
2+
3+
test('Should return 200 response - /', async ({ page }) => {
4+
const response = await page.goto('/')
5+
expect(response?.status()).toBe(200)
6+
7+
const headers = response?.headers() ?? {}
8+
expect(headers['x-powered-by']).toBe('Remix and Hono')
9+
10+
const contentH1 = await page.textContent('h1')
11+
expect(contentH1).toBe('Remix and Hono')
12+
13+
const contentH2 = await page.textContent('h2')
14+
expect(contentH2).toMatch(/URL is http:\/\/localhost:\d+/)
15+
16+
const contentH3 = await page.textContent('h3')
17+
expect(contentH3).toBe('Extra is stuff')
18+
})
19+
20+
test('Should return 200 response - /api', async ({ page }) => {
21+
const response = await page.goto('/api')
22+
expect(response?.status()).toBe(200)
23+
expect(await response?.json()).toEqual({ message: 'Hello' })
24+
})

‎examples/node/load-context.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
type GetLoadContextArgs = {
2+
request: Request
3+
}
4+
5+
declare module '@remix-run/node' {
6+
interface AppLoadContext extends ReturnType<typeof getLoadContext> {
7+
url: string
8+
extra: string
9+
}
10+
}
11+
12+
export function getLoadContext(args: GetLoadContextArgs) {
13+
return {
14+
url: args.request.url,
15+
extra: 'stuff',
16+
}
17+
}

‎examples/node/main.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// main.ts
2+
import { serve } from '@hono/node-server'
3+
import { serveStatic } from '@hono/node-server/serve-static'
4+
import handle from 'hono-remix-adapter/node'
5+
import * as build from './build/server'
6+
import { getLoadContext } from './load-context'
7+
import server from './server'
8+
9+
server.use(
10+
serveStatic({
11+
root: './build/client',
12+
})
13+
)
14+
15+
const handler = handle(build, server, { getLoadContext })
16+
17+
serve({ fetch: handler.fetch, port: 3010 })

‎examples/node/package.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "example-node",
3+
"private": true,
4+
"sideEffects": false,
5+
"type": "module",
6+
"scripts": {
7+
"build": "remix vite:build",
8+
"dev": "remix vite:dev",
9+
"start": "remix-serve ./build/server/index.js",
10+
"start-with-adapter": "tsx main.ts",
11+
"test:e2e:vite": "playwright test -c playwright-vite.config.ts e2e.test.ts",
12+
"test:e2e:node": "npm run build && playwright test -c playwright-node.config.ts e2e.test.ts",
13+
"typecheck": "tsc"
14+
},
15+
"dependencies": {
16+
"@hono/node-server": "^1.13.7",
17+
"@remix-run/node": "^2.14.0",
18+
"@remix-run/react": "^2.14.0",
19+
"@remix-run/serve": "^2.14.0",
20+
"hono": "^4.6.11",
21+
"isbot": "^4.1.0",
22+
"react": "^18.2.0",
23+
"react-dom": "^18.2.0"
24+
},
25+
"devDependencies": {
26+
"@playwright/test": "^1.48.2",
27+
"@remix-run/dev": "^2.14.0",
28+
"@types/react": "^18.2.20",
29+
"@types/react-dom": "^18.2.7",
30+
"autoprefixer": "^10.4.19",
31+
"playwright": "^1.47.0",
32+
"tsx": "^4.19.2",
33+
"typescript": "^5.1.6",
34+
"vite": "^5.1.0",
35+
"vite-tsconfig-paths": "^4.2.1"
36+
},
37+
"engines": {
38+
"node": ">=20.0.0"
39+
}
40+
}

0 commit comments

Comments
 (0)