Use Bun with Astro

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

• Bun installed locally on your machine. See the installation instructions in Bun’s official documentation.

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

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:

bun install

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

Install bun-types using the following command:

bun add -d bun-types

Add the package to your types in tsconfig.json

  "compilerOptions": {
    "types": ["bun-types"]
  }

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

bunx astro add react

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

bunx --bun astro dev

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

bunx --bun astro build

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

bunx --bun astro preview

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:

bunx astro add node

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

bunx --bun astro build

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

bun ./dist/server/entry.mjs

• Build an app with Astro and Bun

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

• Building a Cloudflare Pages site with Bun - blog post

More recipes