99 lines
2.9 KiB
Plaintext
99 lines
2.9 KiB
Plaintext
---
|
|
title: Build an app with Remix and Bun
|
|
sidebarTitle: Remix with Bun
|
|
mode: center
|
|
---
|
|
|
|
[Remix 3](https://github.com/remix-run/remix) is a web framework built from standalone packages: a router, HTML rendering, sessions, form parsing, and more. These packages are distributed together as the `remix` package. Remix 3 is published under the `next` tag on npm while it is in beta. Its server runs on Bun as-is.
|
|
|
|
<Note>This guide covers Remix 3. To create a Remix 2 project, use `create-remix` instead.</Note>
|
|
|
|
---
|
|
|
|
Scaffold a new project with the Remix CLI.
|
|
|
|
```sh terminal icon="terminal"
|
|
bunx remix@next new my-remix-app
|
|
```
|
|
|
|
```txt
|
|
• Prepare target directory...
|
|
✓ Prepare target directory
|
|
• Generate scaffold files...
|
|
✓ Generate scaffold files
|
|
• Finalize package.json...
|
|
✓ Finalize package.json
|
|
|
|
Created My Remix App at my-remix-app
|
|
```
|
|
|
|
Then install its dependencies.
|
|
|
|
```sh terminal icon="terminal"
|
|
cd my-remix-app
|
|
bun install
|
|
```
|
|
|
|
---
|
|
|
|
The generated `server.ts` creates a `node:http` server that hands every request to the app's router. Bun runs it directly; pass `--watch` to restart the server whenever a file it imports changes.
|
|
|
|
```sh terminal icon="terminal"
|
|
bun --watch server.ts
|
|
```
|
|
|
|
```txt
|
|
Server listening on http://localhost:44100
|
|
```
|
|
|
|
Open [http://localhost:44100](http://localhost:44100) to see the starter page. The routes live in `app/routes.ts` and `app/router.ts`. `app/actions/home-page.tsx` renders the starter home page.
|
|
|
|
---
|
|
|
|
The `scripts` generated in `package.json` run the server with Node.js and the `remix/node-tsx` TypeScript loader. Bun runs TypeScript itself, so point the scripts at `bun` instead.
|
|
|
|
```json package.json icon="file-json"
|
|
{
|
|
"scripts": {
|
|
"dev": "NODE_ENV=development node --watch --import remix/node-tsx server.ts", // [!code --]
|
|
"dev": "bun --watch server.ts", // [!code ++]
|
|
"start": "NODE_ENV=production node --import remix/node-tsx server.ts", // [!code --]
|
|
"start": "NODE_ENV=production bun server.ts" // [!code ++]
|
|
}
|
|
}
|
|
```
|
|
|
|
```sh terminal icon="terminal"
|
|
bun run dev
|
|
```
|
|
|
|
```txt
|
|
$ bun --watch server.ts
|
|
Server listening on http://localhost:44100
|
|
```
|
|
|
|
<Note>
|
|
The generated `hmr` script (`hmr.ts`) also loads `remix/node-tsx`, which relies on `module.registerHooks()`. Bun does
|
|
not implement that API yet, so the script fails under Bun. See [Node.js
|
|
compatibility](/runtime/nodejs-compat#node-module). `bun --watch` restarts the server on changes instead.
|
|
</Note>
|
|
|
|
---
|
|
|
|
The router is a `fetch` handler, so you can also serve the app with [`Bun.serve()`](/runtime/http/server) instead of `node:http`.
|
|
|
|
```ts server.ts icon="/icons/typescript.svg"
|
|
import { router } from "./app/router.ts";
|
|
|
|
const server = Bun.serve({
|
|
port: 44100,
|
|
fetch: request => router.fetch(request),
|
|
});
|
|
|
|
console.log(`Server listening on ${server.url}`);
|
|
```
|
|
|
|
---
|
|
|
|
See the Remix [documentation](https://github.com/remix-run/remix/tree/main/docs) to learn more.
|