The will-navigate guard compared file URL origins to the literal string file://, but the URL API reports an opaque origin for file pages, so legitimate file navigations were blocked and the window could fail to load reliably on Windows. Import utils/helpers from the renderer entry so esbuild includes window.Helpers in the bundle, restoring formatters and isValidUrl after build:renderer. Documentation: desktop README explains the renderer bundle workflow; Windows desktop troubleshooting covers stuck loading; frontend quality gates table notes the app.js entry and rebuild step.
TimeTracker Desktop App
Electron-based desktop application for TimeTracker.
Building
Prerequisites
- Node.js 18+
- npm
Install Dependencies
npm install
Build for Current Platform
npm run build
Build for Specific Platform
# Windows
npm run build:win
# macOS
npm run mac
# Linux
npm run build:linux
Build for All Platforms
npm run build:all
Code Signing (Windows)
To avoid the "Unknown Publisher" warning, you need to sign the Windows executable with a code signing certificate.
Quick Setup
-
Obtain a Code Signing Certificate:
- Purchase from a CA (Sectigo, DigiCert, etc.) - $150-600/year
- Or create a self-signed certificate for testing
-
Local Build:
# Windows PowerShell $env:CSC_LINK_FILE = "path/to/certificate.pfx" $env:CSC_KEY_PASSWORD = "YourCertificatePassword" npm run build:win -
CI/CD (GitHub Actions):
- Store certificate as Base64 in GitHub Secret:
WINDOWS_CODE_SIGN_CERT - Store password in GitHub Secret:
WINDOWS_CODE_SIGN_PASSWORD - The workflow will automatically sign the executable
- Store certificate as Base64 in GitHub Secret:
For detailed instructions, see Windows Code Signing Guide.
Development
Renderer bundle
The UI is bundled from src/renderer/js/app.js into src/renderer/js/bundle.js with esbuild (npm run build:renderer). Anything the app needs at runtime (including src/renderer/js/utils/helpers.js, which sets window.Helpers) must be imported from app.js so it is included in the bundle. After changing renderer source files, run npm run build:renderer before packaging or committing an updated bundle.js.
Run in Development Mode
npm start
(npm start runs build:renderer first, then launches Electron.)
Run with DevTools
npm run dev
Configuration
Getting an API Token
Before connecting the desktop app, you need to create an API token:
- Log in to TimeTracker Web App as an administrator
- Navigate to Admin > Security & Access > Api-tokens (
/admin/api-tokens) - Click "Create Token"
- Fill in the required information:
- Name: A descriptive name (e.g., "Desktop App - Windows")
- User: Select the user this token will authenticate as
- Scopes: Select the following permissions:
read:projects- View projectsread:tasks- View tasksread:time_entries- View time entrieswrite:time_entries- Create and update time entries
- Expires In: Optional expiration period (leave empty for no expiration)
- Click "Create Token"
- Important: Copy the generated token immediately - you won't be able to see it again!
- Token format:
tt_<32_random_characters> - Example:
tt_abc123def456ghi789jkl012mno345pq
- Token format:
Connecting the App
The desktop app can be configured in multiple ways:
Method 1: In-App Login (Recommended)
- Launch the desktop app
- On the login screen, enter:
- Server URL: Your TimeTracker server URL (e.g.,
https://your-server.com)- Do not include a trailing slash
- Use
http://for local development orhttps://for production
- API Token: Paste the token you copied from the web app
- Server URL: Your TimeTracker server URL (e.g.,
- Click "Login"
- The app will validate your connection and show the main screen if successful
Method 2: Command Line
TimeTracker.exe --server-url https://your-server.com
Then enter your API token in the login screen.
Method 3: Environment Variable
# Windows
set TIMETRACKER_SERVER_URL=https://your-server.com
TimeTracker.exe
# Linux/macOS
export TIMETRACKER_SERVER_URL=https://your-server.com
./TimeTracker
Method 4: Settings Screen
- Launch the app
- Navigate to Settings tab
- Enter your Server URL and API Token
- Click "Save Settings" or "Test Connection" to verify
Connection Status
The app shows a connection status indicator in the header:
- Green dot (●): Connected and authenticated
- Red dot (●): Connection error or authentication failed
- Gray circle (○): Not connected
The connection is automatically checked every 30 seconds.
Troubleshooting
"Invalid API token" error:
- Verify the token starts with
tt_ - Check that the token hasn't expired
- Ensure the token has the required scopes
- Try creating a new token in the web app
"Connection failed" error:
- Verify the server URL is correct and accessible
- Check your internet connection
- Ensure the server is running and the API is accessible
- For local development, use
http://localhost:5000or your local IP address - Check the connection status indicator in the header
Settings not saving:
- Ensure you have write permissions in the app's data directory
- Check that electron-store is working properly
- Try clearing settings and re-entering them
Window stuck on loading, blank content, or unstable navigation (especially Windows):
- Use the latest release or rebuild from source; older builds could mis-handle
file:navigation in the main process or ship a renderer bundle without helpers loaded. - From source, run
npm installandnpm run build:renderer, thennpm startor rebuild the installer. - See Desktop build Windows troubleshooting for environment-specific build issues.
For more details, see Desktop Settings Guide.
Project Structure
desktop/
├── src/
│ ├── main/ # Main process (Electron)
│ ├── renderer/ # Renderer process (UI)
│ └── shared/ # Shared code
├── assets/ # Icons and assets
├── scripts/ # Build scripts
└── dist/ # Build output
Version Management
The version is automatically synced from setup.py before building. The build scripts handle this automatically.
License
MIT