# Bun 1.0 setup for Windows with VSCode and Docker

I’ve been meaning to try Bun for a while now, and after the release of v1.0 I decided to make time for it. But when I finally sat down and started reading the docs, I realized it doesn’t run on Windows [just yet](https://github.com/oven-sh/bun/issues/43).

However, I saw the documentation to run it with Docker, and I thought it could be a cool alternative. After a few hours of research and experimentation, here we are!

By following this guide, you will be able to seamlessly integrate Bun into your development workflow on a Windows machine using VSCode. We will see how to:

* Develop a project with Bun using the same VSCode setup you use every day.
    
* Forward ports so you can test your Websites and APIs in your local browser.
    
* And even Debug with proper breakpoints and everything!
    

## What you'll need

Before we get started, make sure you have the following tools installed:

* Docker
    
* VSCode
    
* Dev Containers VSCode extension
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695425989282/52d70b09-f51b-440d-8501-16455fc37848.png align="center")

## How it works

Through the Dev Containers extension, we’re going to use a container as a development environment.

The Docker image we will use for our container is based on the official Docker image `oven/bun:latest`. This means that once our container is up and running, we will have immediate access to Bun.

The files in our project will be automatically mounted from the local file system. Therefore, while the project will run in the container, the source code will remain updated on our local machine.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426034886/12e2c096-b146-4fa0-b903-adec52b24027.png align="center")

> Image borrowed from [code.visualstudio.com](http://code.visualstudio.com)

## Setting up the Dev Container

Let’s create a directory and open it with VSCode:

```bash
> mkdir bunproject
> code bunproject
```

Create a new Dockerfile in the project directory with the following content:

```docker
# Use the latest version of the bun image as the base image
FROM oven/bun:latest

# Set `DEVCONTAINER` environment variable to help with orientation
ENV DEVCONTAINER=true
```

Now let’s run our Dev Container:

1. Open the command palette in VSCode by pressing `Ctrl + Shift + P` and run the command "Dev Containers: Open folder in container".
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426161922/0412ecdc-1fe9-492e-93e4-fb5d3711a179.png align="center")
    
2. Then, choose the option to create the container using our Dockerfile.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426172259/874b6e0f-266c-44f0-a43d-3762b1900954.png align="center")
    
3. When prompted with the "Select Features" option, just press OK without selecting any additional features.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426191720/a0f553a9-2fb6-4515-825d-10083a6ec5d6.png align="center")
    

VSCode will reload and open your project in a dev container. You should also see a new directory in your project called `.devcontainer`. Within it, there should be a `devcontainer.json` file including our dev container settings.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426217631/715a841b-4902-4654-a1fb-09db4fd06aa8.png align="center")

If you’ve reached this point, you are already running a project within the container as a dev environment. But it’s empty! So let's keep going.

## Setting up the project with Bun

Since our container was created using Bun's official Docker image, Bun is already installed and ready to use.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426240054/e505a250-90e0-4199-90a6-f37c8a6ced85.png align="center")

Follow these steps to set up your project:

1. Open VSCode’s integrated terminal and initialize a Bun project by running the following command:  

  ```bash
  > bun init
  ```

2. Install any necessary dependencies using bun’s package manager:
    
  ```bash
  > bun install chalk
  ```

3. Update the `index.ts` file in VSCode with your desired code. For example:
    
  ```ts
  import chalk from 'chalk';
  console.log(`Hello via ${chalk.yellow.bold('Bun')}!`);
  ```

4. Run the project with Bun using the command:
    
  ```bash
  > bun --hot index.ts
  ```

> The `--hot` flag enables hot reload, allowing you to see changes in real-time while developing.

✅ Done! You are now developing with Bun in Windows.

But there are a couple more cool things we can do with these tools. Let's take a look.

## Forwarding ports

If you're building an HTTP server and want to test your API from your browser, you can forward ports from the container to your local environment. Here's how:

1. Write a simple server in the `index.ts` file, specifying the desired port:
    
  ```ts
  const server = Bun.serve({
      port: 3000,
      fetch(request) {
        return new Response("Welcome to Bun!");
      },
  });
  
  console.log(`Listening on localhost:${server.port}`);
  ```

2. Open the `.vscode/devcontainer.json` file and add the following code:
    
  ```json
  {
      // Other props ...
  
      "forwardPorts": [
          3000
      ]
  }
  ```

3. Rebuild the dev container by opening the command palette and running the "Dev Containers: Rebuild Container" command.
    
4. Once the dev container is running again, you should see your forwarded port in the “Ports” view at the bottom:
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426443731/ffb8745a-789f-4daa-b975-23925b12e296.png align="center")

5. Start the server using Bun:
    
  ```bash
  > bun --hot index.ts
  ```

6. Open your browser and navigate to [http://localhost:3000](http://localhost:3000) to test your API.
    

## Debugging

With this setup you can even debug bun, with breakpoints and everything!

Follow these steps to set it up:

1. Install the official extension “Bun for Visual Studio Code”.
    
  ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426505153/413710eb-f210-45c2-9cf4-dc0b638d188c.png align="center")

2. Now open the command palette and search for the option “Debug: Add Configuration".
    
  ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426584335/6ff36ea0-b204-4b89-a7f3-8a99df73bac9.png align="center")
    
3. When prompted to select a Debugger, choose “Bun” (you should see this option after installing the extension in step 1).
    
  ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426602647/8fbbf406-cb8f-48d9-993a-b3c1baf9bead.png align="center")
    
4. You should now see a new directory and file `.vscode/launch.json`.

  ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426628519/35535b51-8020-4c01-bfb3-95f6d0510a50.png align="center")

5. Open the Debug view, and make sure the current configuration is “Debug file”.

  ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426644312/9af0aa89-6628-4255-8878-cb6679f93cd6.png align="center")

6. Finally, try setting a few breakpoints and press `F5` to start debugging!

  ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695426656660/8008713f-7609-457a-876d-91a3b2455415.png align="center")

## Conclusion

I've been trying this setup for a week, and it feels great. You can even use Docker Compose to combine it with other services or databases! The only slightly annoying thing is having to run Docker for small apps and wait for the container to start. But overall, I think this is a fantastic option for people who want to try Bun on Windows right away.

It's also worth noting that you can use these tools to run other technologies with Dev Containers. In fact, the examples I used as inspiration for this post were for a Node.js dev container.

That’s it for now! Happy coding :)

---

![](https://www.typescriptgamified.com/_app/immutable/assets/banner-01-16795b9b.webp align="left")

Get my book: [typescriptgamified.com](http://typescriptgamified.com)