Development Workflow

If you’re developing the Runbooks tool itself, this guide covers the day-to-day workflow.

Prerequisites

All tools are managed via mise. Install mise, then run:

mise install

This installs everything you need: Node.js, bun, and just (command runner).

Running the Dev Server

A single command starts the full Electron development environment:

just dev

This runs electron-vite in dev mode with hot module replacement (HMR) for the renderer process.

Making Changes

Frontend (web/src/):

• Edit files in web/src/
• Changes auto-reload in the Electron renderer via HMR
• No restart needed

Backend (src/):

• Edit files in src/
• Triggers a main process rebuild and restart

Electron main process (electron/):

• Edit files in electron/
• Triggers a rebuild and restart of the main process

Runbook changes:

• Edit the runbook file you’re testing with
• Refresh the window
• No restart needed

Testing

# Run all tests
just test

# Unit tests (Vitest)
just test-unit

# End-to-end tests (Playwright)
just test-e2e

Building

# Build the app (electron-vite build)
just build

# Package distributable (electron-builder)
just package

Code Quality

# Lint (oxlint)
just lint

# Type checking (tsc)
just typecheck

Adding shadcn/ui Components

This project uses shadcn/ui for UI components.

To add a new component:

cd web
bunx shadcn@latest add <component-name>

For example:

bunx shadcn@latest add dialog
bunx shadcn@latest add dropdown-menu

Components are added to /web/src/components/ui/.