Bluma Electro - VS Code Extension

Bluma Electro is a production-grade VS Code extension that enables you to convert any website URL into a fully featured, cross-platform, security-hardened Electron desktop application in a single click.

With a flat, dark developer dashboard inside VS Code, you can define your application's parameters, watch the real-time build terminal, package your application into a Windows executable, and launch it automatically.

Features

• Activity Bar Sidebar Integration: Opens instantly via the custom monitor icon in VS Code's sidebar. Clicking the icon automatically opens the full-screen dashboard panel.
• Auto Workspace Location: No folder pickers required. The extension automatically targets your active workspace directory in VS Code.
• Poppins Flat Dark UI: Unified #181818 dark charcoal styling with flat layouts (no shadows) and clear text hierarchy.
• Clean Inputs & Radio Buttons: Replaced dropdown combo-boxes with styled, rounded pill radio buttons.
• Default MIT License: Automatically generates the standard MIT License for your desktop application.
• Smart Icon Pipeline: Specify a single PNG logo; the extension automatically compiles Windows .ico and macOS .icns formats using pure JavaScript.
• One-Click Build & Run Pipeline:
  1. Scaffolds files (package.json, preload.js, configurations, and docs).
  2. Invokes npm install inside the project folder.
  3. Transpiles TypeScript files (if TS is enabled).
  4. Packaging of the Windows executable (dist/win-unpacked/{AppName}.exe).
  5. Spawns and launches the built executable automatically.
• Live Terminal Console: Displays the raw compilation, install, and packaging command lines on the right side of the dashboard.

Extension Usage

1. Launch the Extension: Click on the Bluma Electro icon in VS Code's Activity Bar (left sidebar) or run the command:

   Bluma Electro: Create Desktop App
   

2. Configure App Settings:

   • Application Name: Name of your app (e.g., MyApp).
   • Website URL: The URL you want to package (e.g., https://myawesomeapp.com).
   • App Version: Set the initial application version (e.g., 1.0.0).
   • Custom Icon: (Optional) Pick a PNG file. The extension will automatically generate ICO and ICNS files. Leave empty to use default branding assets.
   • Author / Company: Define the owner and copyright fields.
   • Auto Updates: Toggle updater services.

3. Click Generate Project: Watch the installation and build process in the right-side Live Build Terminal. Once scaffolding and dependency installation are completed, the terminal will output clear next steps for running or packaging your application.

Development & Debugging

If you want to run or modify this extension:

1. Open this directory in VS Code.
2. Install dependencies:

   npm install
   

3. Build the extension bundle:

   npm run package
   

4. Press F5 to open the Run & Debug view and click Run Extension. This launches an Extension Development Host window.
5. Click on the Bluma Electro sidebar icon in the development host to test your changes.

Folder Structure of Generated Project

The extension creates a clean, industry-standard Electron project inside your current workspace:

project/
├── .github/
│   └── workflows/
│       └── release.yml     # GitHub Actions Release workflow
├── assets/
│   ├── icon.png            # App branding
│   ├── icon.ico            # Windows icon
│   ├── icon.icns           # macOS icon
│   └── offline.html        # Connection drop fallback screen
├── src/                    # Electron source code files
│   ├── main.ts
│   └── preload.ts
├── package.json            # Build scripts and dependencies
├── electron-builder.yml    # Build options for win, mac, linux
├── tsconfig.json           # TypeScript configuration
├── README.md               # App-specific user guide
└── LICENSE                 # MIT License file

Created by Odireca