Web-Electron CLI 🚀

A powerful command-line tool that automatically converts web projects into native desktop applications using Electron. Supports multiple frameworks and build systems with intelligent detection and configuration.

✨ Features

• 🔍 Intelligent Framework Detection - Automatically detects React projects and build systems
• ⚡ Multiple Build System Support - Works with Vite, Create React App, and custom Webpack configurations
• 📦 Smart Package Management - Supports npm, yarn, pnpm, and bun
• 🛠️ TypeScript Ready - Full TypeScript support with proper type generation
• 🎯 Zero Configuration - Works out of the box with sensible defaults
• 🔧 Customizable Templates - Framework-specific Electron configurations
• 📊 Project Validation - Comprehensive project analysis and validation

🚀 Quick Start

Installation

npm install -g web-electron

Convert Your Web Project

Navigate to your web project directory and run:

web-electron convert

Or specify a project path:

web-electron convert /path/to/your/project

📋 Commands

Convert Command

Convert a web project to an Electron desktop application:

web-electron convert [project-path] [options]

# Aliases
web-electron c [project-path] [options]

Options:

• -y, --yes - Skip all prompts and use defaults
• --no-install - Skip npm install

Examples:

# Convert current directory with prompts
web-electron convert

# Convert with auto-confirmation
web-electron convert -y

# Convert specific project without installing dependencies
web-electron convert ./my-react-app --no-install

Validate Command

Analyze and validate a web project for Electron conversion:

web-electron validate [project-path]

# Aliases
web-electron v [project-path]

Examples:

# Validate current directory
web-electron validate

# Validate specific project
web-electron validate ./my-project

Frameworks Command

Display all supported frameworks and build systems:

web-electron frameworks

# Aliases
web-electron f

🎯 Supported Frameworks

| Framework | Icon | Build Systems | Status | | ----------- | ---- | -------------------------------------- | ------------------ | | React | ⚛️ | Vite, Create React App, Custom Webpack | ✅ Fully Supported | | Next.js | ⚡ | Next.js CLI, Vite | 🚧 Coming Soon | | Vue | 🖖 | Vite, Vue CLI | 🚧 Coming Soon | | Nuxt | 💚 | Nuxt CLI, Vite | 🚧 Coming Soon |

React Support Details

• ✅ Create React App - Full support with automatic configuration
• ✅ Vite + React - Optimized build configuration and hot reload
• ✅ Custom Webpack - Manual webpack configurations
• ✅ TypeScript - Full TypeScript support across all React variants

🏗️ What Gets Generated

When you convert your project, the tool creates:

your-project/
├── electron/
│   ├── main.js (or .ts)      # Main Electron process
│   ├── preload.js (or .ts)   # Preload script for security
│   ├── handlers/             # IPC handlers directory
│   │   └── app-handlers.js   # Application-specific handlers
│   └── builder.js            # Electron builder configuration
├── package.json              # Updated with Electron scripts
└── [your existing files]     # Your web app remains unchanged

Updated Scripts

Your package.json gets new scripts for Electron development:

{
  "scripts": {
    "electron": "electron electron/main.js",
    "electron:dev": "concurrently \"npm run dev\" \"wait-on http://localhost:3000 && electron electron/main.js\"",
    "electron:build": "npm run build && electron-builder",
    "electron:dist": "npm run build && electron-builder --publish=never"
  }
}

🔧 Configuration

Framework Detection

The tool automatically detects your framework by analyzing:

• package.json dependencies
• Configuration files (vite.config.js, next.config.js, etc.)
• Project structure and build patterns
• Development server configuration

Build System Detection

Supports detection of:

• Vite - Modern build tool with HMR
• Create React App - React's official create-app tool
• Custom Webpack - Manual webpack configurations

Package Manager Detection

Automatically detects and uses:

• npm - Node.js default package manager
• yarn - Fast, reliable package manager
• pnpm - Efficient package manager
• bun - Ultra-fast JavaScript runtime and package manager

🎨 Customization

Template Customization

The generated Electron files are based on framework-specific templates that can be customized:

• Main Process - Handles app lifecycle and window management
• Preload Script - Secure bridge between main and renderer processes
• IPC Handlers - Communication between processes
• Builder Config - Electron packaging and distribution settings

Development Workflow

1. Development Mode: Runs your web dev server alongside Electron
2. Hot Reload: Changes to your web app automatically reload in Electron
3. TypeScript Support: Full IntelliSense and type checking
4. Debugging: Chrome DevTools integration for both processes

🔍 Project Validation

The validation feature provides detailed analysis:

• ✅ Framework Detection - Identifies your web framework
• ✅ Build System Analysis - Detects build tools and configuration
• ✅ Dependency Check - Validates required dependencies
• ✅ TypeScript Detection - Checks for TypeScript usage
• ✅ Development Server - Analyzes dev server configuration
• ✅ Build Output - Validates build output structure

🚨 Requirements

• Node.js 16.0.0 or higher
• npm/yarn/pnpm/bun for package management
• React-based web project (Create React App, Vite + React, or custom Webpack setup)

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Development Setup

# Clone the repository
git clone https://github.com/your-username/web-electron-cli.git

# Install dependencies
npm install

# Link for local development
npm link

# Test the CLI
web-electron --help

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

• 📖 Documentation: Full documentation
• 🐛 Bug Reports: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📧 Email: [email protected]

🎯 Roadmap

• [ ] Next.js Support - SSR/SSG conversion, API route handling, and routing integration
• [ ] Vue.js Framework - Vue 3 support with Vite and Vue CLI
• [ ] Nuxt.js Support - Vue meta-framework with SSR/SSG capabilities
• [ ] Angular Framework - Angular CLI and standalone component support
• [ ] Svelte/SvelteKit - Compile-time optimization and routing support
• [ ] Electron auto-updater integration
• [ ] Cross-platform build optimization
• [ ] Plugin system for custom frameworks
• [ ] GUI version of the CLI tool

Made with ❤️ for the web development community