Building & Compiling Guide
This guide covers the build pipeline, development workflow, and compilation process for creating distributable applications.
Development Workflow
tronbun dev
The fastest way to develop. Starts your app with hot reload:
npx tronbun devWhat happens:
- Full build (backend + types + frontend)
- App launches with
TRONBUN_DEV_MODE=true - File watchers start monitoring:
| Watch Target | Extensions | On Change |
|---|---|---|
Backend (src/) | .ts, .js | Rebuild backend + types, restart app |
Frontend (src/web/) | .ts, .tsx, .js, .jsx, .html, .css | Rebuild frontend, hot reload (no restart) |
Public (public/) | All files | Rebuild frontend |
Hot reload works via a .dev-reload timestamp file. When the frontend detects the file has changed, it reloads content without restarting the native process.
Detecting dev mode in your code:
if (process.env.TRONBUN_DEV_MODE === "true") {
// Enable dev tools, verbose logging, etc.
}Build Process
tronbun build
Compiles your TypeScript source into runnable JavaScript:
npx tronbun build
npx tronbun build --watch # Rebuild on changes
npx tronbun build --dev # Skip minificationBuild steps:
Backend build — Compiles
backend.entrytobackend.outDirusingbun build- Target:
bunruntime - Minification: respects
build.minify(skipped in--devmode) - Sourcemaps: respects
build.sourcemap
- Target:
Type generation — Scans for
@windowNameand@mainHandlerdecorators, generatessrc/ipc-types.tsFrontend build — Compiles
web.entrytoweb.outDirusingbun build- Target:
browser - Format: ESM (ES Modules)
- Clears output directory before building
- Target:
Public assets — Copies contents of
web.publicDirtoweb.outDir
tronbun run
Runs the previously built application:
npx tronbun build && npx tronbun runExecutes bun dist/main.js (or whatever your built entry is).
tronbun clean
Removes build artifacts:
npx tronbun cleanDeletes backend.outDir and web.outDir.
Compilation
tronbun compile
Creates a standalone native executable with all assets embedded:
npx tronbun compile
npx tronbun compile -o my-app
npx tronbun compile --platform macos
npx tronbun compile --platform windowsHow Compilation Works
Source files
│
▼
Build (backend + frontend)
│
▼
Collect web assets from dist/web/
│ ├── Skip .map files
│ ├── Remove sourcemap references
│ └── Optionally obfuscate JS
│
▼
Compress (gzip) + base64 encode
│
▼
Generate embedded-assets.ts
│ (registers __TRONBUN_EMBEDDED_FILES_COMPRESSED__)
│
▼
bun build --compile
│
▼
Copy native helpers (webview_main, tray_main, libnotification)
│
▼
Platform packaging (Info.plist, code signing, etc.)
│
▼
Clean up temporary filesmacOS App Bundle
Output structure:
MyApp.app/
├── Contents/
│ ├── MacOS/
│ │ ├── MyApp # Main Bun executable
│ │ ├── webview_main # Native webview process
│ │ ├── tray_main # Native tray process
│ │ └── libnotification.dylib # Notification FFI library
│ ├── Resources/
│ │ ├── icon.icns # App icon
│ │ └── assets/ # Copied from project assets/
│ └── Info.plist # Bundle metadataInfo.plist is generated with:
CFBundleIdentifierfromapp.identifierconfigCFBundleIconFilepointing to icon.icnsLSUIElement = true(no dock icon by default)NSHighResolutionCapable = true(Retina support)- Minimum macOS version: 10.15
- Optional
LSApplicationCategoryTypefromapp.category
The bundle is ad-hoc code signed with codesign --force --deep -s -.
Windows Executable
Output structure:
build/
├── MyApp.exe # Main Bun executable
├── webview_main_win.exe # Native webview process
├── tray_main_win.exe # Native tray process
└── libnotification.dll # Notification FFI libraryAll files in build/ must be distributed together.
Asset Embedding
All web assets are embedded into the executable:
- No external
dist/folder needed in distribution - Assets are gzip-compressed and base64-encoded (40-80% size reduction)
- Available at runtime as
globalThis.__TRONBUN_EMBEDDED_FILES_COMPRESSED__ Window.navigate()auto-detects compiled mode and usessetHtml()with embedded content
Code Obfuscation
Enable in tronbun.config.json to protect frontend code:
{
"build": {
"obfuscation": {
"enabled": true,
"compact": true,
"stringArray": true,
"stringArrayEncoding": ["base64"]
}
}
}Obfuscation is applied only during compilation, not during build or dev.
Warnings:
renameGlobals: truebreakswindow.*IPC APIsselfDefending: truemay cause issues with ReactunicodeEscapeSequence: trueimpacts performance
See Configuration for all options.
Native Prerequisites
Before compiling, you need the native webview components built:
cd webview && make allThis compiles platform-specific binaries:
- macOS:
webview_main,tray_main,TronbunNotifier.app,libnotification.dylib - Windows:
webview_main_win.exe,tray_main_win.exe,libnotification.dll
These are required by the compile step and are copied into the app bundle.
Cross-Compilation
Use --platform to target a specific platform:
# On macOS, target macOS explicitly
npx tronbun compile --platform macos
# Target Windows (requires Windows native binaries)
npx tronbun compile --platform windowsThe default (auto) detects the current platform.
Note: Cross-compilation requires having the target platform's native binaries available. Building Windows binaries on macOS (or vice versa) requires cross-compilation of the native C/C++ components.
Customizing Output
Custom executable name
npx tronbun compile -o "My Cool App"App icon
Set in tronbun.config.json:
{
"app": {
"icon": "assets/icon.icns",
"iconWin": "assets/icon.ico"
}
}Bundle identifier
{
"app": {
"identifier": "com.mycompany.myapp",
"category": "public.app-category.productivity"
}
}See Also
- CLI Reference — Full command documentation
- Configuration — All config options
- Cross-Platform Guide — Platform-specific considerations
