RemixをBunで動かしてみる

RemixをBunで動かしてみる

Clock Icon2023.09.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Remix v2,Bun v1 がリリースされました。 BunはJavaScriptの高速なランタイムです。年々Nodeが複雑になり、遅くなりなってきました。速くてAll in OneなJavascriptランタイムとして開発されました。Nodeとの互換性があるため、今までの資産も使え、置き換え比較的簡単です。 パッケージ管理やworkspaceもnpm互換で特にBun用になにか設定する必要はありません。

このブログではBunでRemixを作ってみます。

Remixでプロジェクトを作成する

このあとのブログでCloudflare Pagesにsデプロイする予定なので、Cloudflare PagesテンプレートでRemixを作成します。

Remixテンプレートを作成する

npmでとりあえずプロジェクトを作ってしまいます。

$ npm create cloudflare@latest image-upload-samples -- --framework=remix

基本的にyesで進めていき作成しました。npmを使うかもYesにしています。のちにこのサンプルで画像アップロードを作る予定なので、image-upload-samplesとしておきます。

とりあえず動作確認してみます。

$ cd image-upload-samples
$ npm run dev

http://localhost:8788/ にブラウザでアクセスと無事に表示されました。

以降コマンドはimage-upload-samples 以下で実行したものとします。

❯ tree -L 1
.
├── README.md
├── app
├── functions
├── node_modules
├── package-lock.json
├── package.json
├── public
├── remix.config.js
├── remix.env.d.ts
├── server.ts
└── tsconfig.json

bunをインストールする

$ curl -fsSL https://bun.sh/install | bash

参考までに、私はasdfを使っていますので、asdf-bunプラグインでインストールしています。

npmからbunに変更

一旦 lockファイルなどを削除して、bunでインストールしなおします。

$ rm -rf node_modules/
$ rm package-lock.json
$ bun install
$ bun run dev

http://localhost:8788/ にブラウザでアクセスと無事に表示されました。

コマンド名がnpmからbunに変わったぐらいで特に以降するために必要なものはありません。

まとめ

bunになっても特にやることもなく素直に動いてくれました。 npmでパフォーマンス比較はこのブログではやりませんでしたが、とりあえず動作上動いてくれる感じでこのまま技術の素振りをやっていきたいと思います。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.