Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 22 additions & 60 deletions src/content/docs/en/recipes/bun.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,12 @@ If you have any problems using Bun, please [open an Issue on GitHub with Bun dir
Create a new Astro project with Bun using the following `create-astro` command:

```bash
bunx create-astro@latest my-astro-project-using-bun
bun create astro my-astro-project-using-bun
```

:::tip
You may also [create a new Astro project from any existing Astro GitHub repository](/en/install-and-setup/#install-from-the-cli-wizard) using the `--template` flag:
```bash
bunx create-astro@latest my-astro-project-using-bun --template eliancodes/brutal
```
:::

## Install dependencies

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:
If you skipped the “Install dependencies?” step during the CLI wizard, then be sure to install your dependencies before continuing.

```bash
bun install
Expand All @@ -52,79 +43,50 @@ Install `@types/bun` using the following command:
bun add -d @types/bun
```

## Using Astro integrations

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

```bash
bunx astro add react
```

## Run Astro with Bun

:::note
Use the [`--bun` CLI flag](https://bun.sh/docs/cli/bunx#shebangs) before every `astro` command to use Bun's own runtime in place of Node.
:::
## CLI installation flags

### Run the development server
### Using integrations

To run the development server using Bun as the runtime, use the following command:
You can also use any of the official Astro integrations with the `astro add` command:

```bash
bunx --bun astro dev
bun astro add react
```

### Building your site with Bun

To build your site using Bun as the runtime, use the following command:
### Use a theme or starter template

```bash
bunx --bun astro build
```
You can start a new Astro project based on an [official example](https://github.com/withastro/astro/tree/main/examples) or the main branch of any GitHub repository by passing a `--template` argument to the `create astro` command.

Astro will output your site to the `dist/` directory. Then, you can serve your site using the `preview` command:
Run the following command in your terminal, substituting the official Astro starter template name, or the GitHub username and repository of the theme you want to use:

```bash
bunx --bun astro preview
# create a new project with an official example
bun create astro@latest --template <example-name>
# create a new project based on a GitHub repository’s main branch
bun create astro@latest --template <github-username>/<github-repo>
```

## Add SSR with Bun
## Develop and build

Since Bun features [Node.js API compatibility](https://bun.sh/docs/runtime/nodejs-apis), you can use any Astro adapter for [on-demand rendering](/en/guides/on-demand-rendering/) with your Astro project:
To run the development server, use following command:

```bash
bunx astro add vercel
bun run dev
```

## Testing in Bun

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](https://bun.sh/docs/cli/test).

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

### Cypress
### Build and preview your site

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:
To build your site, use the following command:

```bash
bun add cypress --dev
bun run build
```

For the rest of the configuration and to start your first test, follow the rest of Cypress process in the [Astro Testing Guide](/en/guides/testing/#configuration).

### Playwright

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.
When the build is finished, run the appropriate preview command (e.g. `bun run preview`) in your terminal and you can view the built version of your site locally in the same browser preview window.

Install Playwright using the following command:

```bash
bun create playwright
```
## Testing

To create your first Playwright test, follow the instructions for the rest of the Playwright process in the [Astro Testing Guide](/en/guides/testing/#create-your-first-playwright-test).
Bun ships with a fast, built-in, Jest-compatible test runner through the [`bun test` command](https://bun.sh/docs/cli/test). You can also use any other [testing tools for Astro](/en/guides/testing/).

## Official Resources

Expand Down