Remix and Hono run on Bun
Takamichi UrataJS系をほとんどやったことがないので、Remix と Hono を Bun で動かす構成を作るのをやってみる。
タイムリーに yusukebe/hono-remix-adapter: Hono <-> Remix Adapter が公開されていたので、これを利用する。
利用バージョン:
- Bun 1.1.29
- Remix 2.12.1
- Hono 4.6.2
- hono-remix-adapter v0.1.2
Takamichi Urataまずは Bun のインストール。
Macなので今回はHomebrewで、プロジェクトレベルではなくMacにインストール。
brew install oven-sh/bun/bun
インストール後のバージョン確認。
bun --version
# 1.1.29
次にRemixをインストールする。
まずプロジェクトのディレクトリ remix-hono-bun を作成。
mkdir remix-hono-bun
cd remix-hono-bun
bun create remix でRemixのプロジェクト作成をするが、私の環境だと
No version is set for command node
と出て実行されないので、Node.js のインストールを先に行う。
asdf で管理しているので、Nodeのバージョンを選択。
asdf local nodejs 22.9.0
.tool-versions ファイルが作成されたことを確認。
ls -a
# . .. .tool-versions
bun create remix
Where should we create your new project?
./remix
Initialize a new git repository? (recommended)
No
(remix-hono-bun ディレクトリを git リポジトリにする予定なので)
Install dependencies with bun? (recommended)
Yes
Takamichi UrataHono のインストール、の前に環境起因の下準備。
mv ./.tool-versions ./remix/
cd remix
Hono のインストール。
bun add hono-remix-adapter hono
# bun add v1.1.29 (6d43b366)
#
# installed hono-remix-adapter@0.1.2
# installed hono@4.6.2
#
# 11 packages installed [1.76s]
次に hono-remix-adapter のREADMEに沿って
-
remix/vite.config.tsを編集してプラグインにserverAdapterを追加 -
remix/server/index.tsを作成
を行う。
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
+import serverAdapter from "hono-remix-adapter/vite";
export default defineConfig({
plugins: [
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
},
}),
+ serverAdapter({
+ entry: "server/index.ts",
+ }),
tsconfigPaths(),
],
});
import {Hono} from 'hono'
const app = new Hono()
app.use(async (c, next) => {
await next()
c.header('X-Powered-By', 'Remix and Hono')
})
app.get('/api', (c) => {
return c.json({
message: 'Hello',
})
})
export default app
ここまでの状態で bun run dev を実行すると
http://localhost:5173/
と、Remixロゴのファイル(remix/public/logo-dark.png)が 404になりページに表示されなくなるので、Hono に静的ファイルのルーティングを設定して解決する。
Hono のドキュメントに書かれている「Serve static files」を参考に設定を追加。
import {Hono} from 'hono'
+import {serveStatic} from 'hono/bun';
const app = new Hono()
app.use(async (c, next) => {
await next()
c.header('X-Powered-By', 'Remix and Hono')
})
+app.use('/*', serveStatic({root: './public/'}))
app.get('/api', (c) => {
return c.json({
message: 'Hello',
})
})
export default app
上記のように書き換えると
[vite] Error when evaluating SSR module server/index.ts: failed to import "hono/bun"
|- ReferenceError: Bun is not defined
のエラーに変わるので、 bun run dev に --bun をつけて実行する。
bun run --bun dev
ロゴが表示された。
Takamichi Urata
hono-remix-adapter v0.2.0 が出たのでアップデートしたところ、
14 | cf: c.req.raw.cf,
15 | ctx: {
16 | ...c.executionCtx
17 | },
18 | caches
19 | },
^
ReferenceError: Can't find variable: caches
at createGetLoadContextArgs (19:13)
というエラーが発生するようになった。
ここっぽい。
Takamichi Urata
で修正されて ｖ0.2.1 としてリリースされたように見えるけどもエラー変わらず。
npm に上がっている内容は修正されていない？ もしくは別件？
node_modules 内の hono-remix-adapter/dist/remix.js, hono-remix-adapter/dist/dev.js を Pull Request の内容で書き換えるとエラーが解消されたので、npmへの反映待ち。
Takamichi Urata
で修正されて、エラーの解消を確認。
Takamichi UrataWebStorm の設定
Settings | Languages & Frameworks | Node.js で Node interpreter: と Package manager: に bun のバイナリを指定する。
Coding assistance for Node.js のチェックは入れない。
(チェックを入れても Cannot enable Node.js coding assistance というエラーが出てチェックが外れる)