Zen Tasker

1. Environment Setup (Node.js)

First, install Node.js and NPM using your distribution's package manager:

• Linux (Debian / Ubuntu / Mint): sudo apt update && sudo apt install nodejs npm
• Linux (Fedora): sudo dnf install nodejs npm
• Linux (Arch / Manjaro): sudo pacman -S nodejs npm
• Linux (openSUSE): sudo zypper install nodejs npm
• Windows: Download and run the .msi installer from nodejs.org.
• macOS: brew install node

2. Project Initialization

Navigate to the project directory and install the necessary dependencies:

# Install project dependencies npm install  # Install development helper tools npm install -D electron electron-builder wait-on concurrently 

3. Configuration Files

To ensure the React app communicates correctly with Electron, verify the following settings:

vite.config.js

Ensure the base path is set to relative. This prevents "White Screen" errors in the built app.

export default defineConfig({   plugins: [react()],   base: './',  }) 

main.js (Electron Entry)

Ensure webPreferences allow for Node integration if your React components need to access system features:

const win = new BrowserWindow({   width: 1000,   height: 800,   webPreferences: {     nodeIntegration: true,     contextIsolation: false   } }); 

package.json (Scripts)

Add these scripts to automate the development process:

{   "name": "zen-tasker",   "private": true,   "version": "0.1.0",   "main": "main.js",   "scripts": {     "dev": "vite",     "build": "vite build",     "electron:dev": "concurrently \"npm run dev\" \"wait-on http://localhost:5173 && electron .\"",     "dist": "npm run build && electron-builder"   },   "dependencies": {     "framer-motion": "^11.0.0",     "lucide-react": "^0.300.0",     "react": "^18.3.1",     "react-dom": "^18.3.1"   },   "devDependencies": {     "@types/react": "^18.3.1",     "@types/react-dom": "^18.3.1",     "@vitejs/plugin-react": "^4.3.1",     "concurrently": "^8.2.2",     "electron": "^31.0.0",     "electron-builder": "^24.13.3",     "vite": "^5.4.1",     "wait-on": "^7.2.0"   },   "build": {     "appId": "com.zentasker.app",     "productName": "ZenTasker",     "files": [       "dist/**/*",       "main.js"     ],     "directories": {       "output": "release"     },     "linux": {       "target": "AppImage",       "category": "Utility"     },     "win": {       "target": "portable"     }   } }

4. Development Workflow

To start the application with Hot Module Replacement (HMR):

npm run electron:dev 

5. Building for Distribution

To package the application into a standalone executable:

• Linux (AppImage): npm run dist -- --linux
• Windows (Portable .exe): npm run dist -- --win (Note: Building for Windows on Linux requires Wine: sudo apt install wine64)
• macOS (.dmg): npm run dist -- --mac (Note: Must be performed on a macOS machine)