Skip to content
Electrobun Docs

Hello World

Step 0: Init templates

This guide will walk you through building a hello world from scratch.

If you’d prefer to be up and running in seconds we offer starter templates including a hello-world, photo-booth, and multi-tabbed web-browser. If you have bun installed and want to get started in a few clicks.

Just run bunx electrobun init and choose the starter template you want to explore.

Step 1: Initialize your project folder

Create a new folder for your project. Let’s call it /electrobun-test.

In your electrobun-test folder run bun init . You’ll be prompted to enter a package name, let’s use my-app and an entrypoint which we don’t need so just hit enter.

Step 2: Install Electrobun as a dependency

Let’s install electrobun. Just run: bun install electrobun to add it as a dependency.

Step 3: Add package.json scripts to build and run your app

Open your package.json in a code editor and add a build:dev script and a start script so that your package.json looks like this:

{
  "name": "my-app",
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  },
  "dependencies": {
    "electrobun": "^0.0.1"
  },
  "scripts": {
    "start": "electrobun dev",
    "dev": "electrobun dev --watch"
  }
}

Step 4: Hello World

We now have electrobun installed and a way to build and run our hello world app, let’s add some code.

Create a file in src/bun/index.ts with the following contents:

import { BrowserWindow } from "electrobun/bun";
const win = new BrowserWindow({
  title: "Hello Electrobun",
  url: "https://electrobun.dev",
});

Step 5: Configure Electrobun

One last thing, we need to a way to let the Electrobun cli know where our bun entrypoint file is and how to build it. We do that by creating an electrobun.config.ts file in the root of the project.

export default {
  app: {
    name: "My App",
    identifier: "dev.my.app",
    version: "0.0.1",
  },
  build: {
    bun: {
      entrypoint: "src/bun/index.ts",
    },
  },
};

Step 6: Run your app

With this we can now go back to our terminal and run bun start and you should see a window pop up and load the site.

To stop running the app just hit cmd+c