Use Bun with Astro

Bun is an all-in-one JavaScript runtime & toolkit. See Bun’s documentation for more information.

Create a new Astro project with Bun

Section titled Create a new Astro project with Bun

Create a new Astro project with Bun using the following create-astro command:

Terminal window
bunx create-astro@latest my-astro-project-using-bun

If you’re starting a new project using bunx create-astro, the CLI will automatically use Bun to install dependencies and you can skip this step.

Otherwise, you’ll need to install your dependencies with Bun:

Terminal window
bun install

Bun publishes the bun-types package, containing the runtime types for Bun.

Install bun-types using the following command:

Terminal window
bun add -d bun-types

Add the package to your types in tsconfig.json

tsconfig.json
"compilerOptions": {
"types": ["bun-types"]
}

You can also use any of the official Astro integrations with the astro add command:

Terminal window
bunx astro add react

To run the development server using Bun as the runtime, use the following command:

Terminal window
bunx --bun astro dev

To build your site using Bun as the runtime, use the following command:

Terminal window
bunx --bun astro build

Astro will output your site to the dist/ directory. Then, you can serve your site using the preview command:

Terminal window
bunx --bun astro preview

Add SSR with Bun using @astrojs/node

Section titled Add SSR with Bun using @astrojs/node

Bun features Node.js API compatibility. Using the @astrojs/node adapter you can add server-side rendering to your Astro project using Bun’s runtime as a replacement for Node.

Run the following command to add the Node.js adapter to your Astro project:

Terminal window
bunx astro add node

Build your site again, using the same build command as above:

Terminal window
bunx --bun astro build

Finally, use the following command to run your built site.

Terminal window
bun ./dist/server/entry.mjs

Bun ships with a fast, built-in, Jest-compatible test runner through the bun test command. If you like to use that read bun test documentation.

However, it is also possible to use Cypress or Playwright for a modern approach to testing web apps.

Cypress is a front-end testing tool and is on a mission to “make the testing experience enjoyable and generate developer happiness”. This enables you to write end-to-end tests for your Astro site.

Install Cypress with the following command:

Terminal window
bun add cypress --dev

For the rest of the configuration and to start your first test, follow the rest of Cypress process in the Astro Testing Guide.

Playwright is an end-to-end testing framework that allows you to test your Astro code on all modern rendering engines including Chromium, WebKit, and Firefox.

Install Playwright using the following command:

Terminal window
bun create playwright

To create your first Playwright test, follow the intructions for the rest of the Playwright process in the Astro Testing Guide.

Using Bun with Astro? Add your blog post or video to this page!


More recipes