Overview
This guide will help you set up your local development environment for contributing to UNS. The project uses a multi-layer architecture with Electron, React, and Python components.Prerequisites
Before starting, ensure you have the following installed:Install Node.js 18+
Download and install Node.js from nodejs.org. Verify installation:
The project uses npm for package management. While yarn/pnpm may work, npm is recommended for consistency.
Install Python 3.11+
Clone the Repository
Install Root Dependencies
Install Electron and build tools:This installs:
electron- Desktop app frameworkelectron-builder- Packaging toolconcurrently- Run multiple commandswait-on- Wait for services to be ready
Install Frontend Dependencies
The frontend is a separate React app built with Vite:Key dependencies:
- React 19 + React Router
- Tailwind CSS for styling
- Lucide React for icons
- ePub.js for the built-in reader
Set Up Python Backend
Create a virtual environment and install dependencies:The
requirements.txt includes:fastapi- API frameworkuvicorn- ASGI serverbotasaurus- Web automation utilitiesebooklib- EPUB generationpyinstaller- Python to binary compilerpydantic- Data validationrequests- HTTP client
Running in Development Mode
Build the Python Engine
Before running the app, you need to compile the Python backend into a standalone binary.This creates
This step is required even in development mode because Electron expects a compiled engine binary.
backend/dist/engine (or engine.exe on Windows).macOS Users: Make the binary executable:Start Development Mode
From the project root:This command does the following:
- Starts the Vite dev server on
http://localhost:5173 - Waits for the dev server to be ready
- Launches Electron pointing to the dev server
- Electron automatically starts the Python engine
The first launch may take 10-15 seconds as Electron waits for the Python engine to boot.
Development Scripts
The following npm scripts are available:| Script | Description |
|---|---|
npm run dev | Start full development mode (frontend + Electron) |
npm run start | Run Electron with production build (no hot reload) |
npm run start:frontend | Start only the Vite dev server |
npm run start:electron | Start only Electron (expects frontend running) |
npm run build | Build frontend and package Electron app |
npm run build:frontend | Build only the frontend |
npm run build:electron | Package only the Electron app |
Frontend Scripts
From thefrontend/ directory:
| Script | Description |
|---|---|
npm run dev | Start Vite dev server on port 5173 |
npm run build | Build production frontend to frontend/dist/ |
npm run preview | Preview production build locally |
Development Workflow
Making Frontend Changes
- Run
npm run devfrom the project root - Edit files in
frontend/src/ - Changes hot-reload automatically in Electron
- Check the browser DevTools for errors
Making Backend Changes
- Edit
backend/api.py - Rebuild the engine:
- Restart the Electron app
Using
engine.spec is faster for rebuilds as it caches dependencies.Making Main Process Changes
- Edit
main.jsorpreload.js - Restart Electron (Cmd/Ctrl + Q and re-run
npm run dev) - Changes to main process files require a full restart
Troubleshooting
Engine not starting on macOS
Engine not starting on macOS
Make the binary executable:If you get a security warning, go to System Preferences → Security & Privacy and click “Allow Anyway”.
Port 5173 already in use
Port 5173 already in use
Kill the process using the port:
PyInstaller import errors
PyInstaller import errors
Ensure PyInstaller is running inside the activated virtual environment:If packages are missing, reinstall:
Electron shows blank screen
Electron shows blank screen
- Check if the Vite dev server is running on port 5173
- Open DevTools and check the Console tab for errors
- Verify
ELECTRON_START_URLis set correctly:
Module not found errors
Module not found errors
Try reinstalling dependencies:
Next Steps
Building the App
Learn how to create production builds for distribution
Project Structure
Understand the codebase architecture and file organization
