Prerequisites
Better Home uses Bun as its package manager and runtime. Ensure you have Bun installed before proceeding.- macOS / Linux / WSL
- Windows (PowerShell)
- via npm
Clone and Install
Development Server
Start the development server with hot module replacement:http://localhost:5173 with hot reload for rapid development.
Build for Production
Build the extension for production:- Runs TypeScript type checking (
tsc -b) - Bundles the extension using Vite
- Outputs production-ready files to the
dist/folder
Load Extension in Browser
After building, load the extension in your Chromium-based browser:- Chrome
- Edge
- Brave
- Navigate to
chrome://extensions - Enable Developer mode (toggle in the top-right corner)
- Click Load unpacked
- Select the
distfolder - Open a new tab - welcome home!
When you first open a new tab after installing, Chrome/Brave may display a warning about the changed new tab appearance. Select “Keep it” as this is the intended behavior for the extension.
Testing Changes
During development:- Make your code changes
- Rebuild the extension:
- Go to your browser’s extensions page (e.g.,
chrome://extensions) - Click the refresh icon on the better-home card
- Open a fresh new tab to see your changes
Additional Commands
Type Checking
Run TypeScript type checking without building:Linting
Check code style with Biome:Auto-fix Issues
Automatically fix linting issues:Preview Build
Preview the production build locally:Common Issues
Bun command not found after installation
Bun command not found after installation
Your shell may not have reloaded the PATH.Fix:
- Close and reopen your terminal completely
- If still not working, manually add Bun to your PATH:
- macOS/Linux: Add to
~/.bashrcor~/.zshrc: - Windows: Ensure
%USERPROFILE%\.bun\binis in your system PATH
- macOS/Linux: Add to
- Verify with
bun --version
Port 5173 already in use
Port 5173 already in use
Another process is using the default Vite port.Fix:
Cannot find module or path alias errors
Cannot find module or path alias errors
This usually means
@/ path aliases aren’t resolving correctly.Fix:- Verify
vite.config.tscontains: - Confirm
tsconfig.jsonmirrors the alias: - Restart the dev server
Extension not updating after changes
Extension not updating after changes
Chrome aggressively caches unpacked extensions.Steps:
- Go to your browser’s extensions page (e.g.,
chrome://extensions) - Click the refresh icon on the better-home card
- Open a fresh new tab
Vite HMR not working / stale cache
Vite HMR not working / stale cache
Try clearing the cache and restarting:If issues persist, delete
node_modules entirely and reinstall: