Convert your website to a native desktop application based on the Electron framework.
- About
- Features
- Getting Started
- Usage
- Customization
- Building for Different Platforms
- File Structure
- Contributing
- Contact
WebToDesk is a powerful tool that allows you to convert your website into a native desktop application for macOS, Windows, and Linux. With WebToDesk, you can create a desktop app from your website within minutes, without the need to learn any programming language.
- Convert websites to desktop applications
- Support for macOS, Windows, and Linux
- Customizable menus (main and right-click)
- Ability to hide specific website elements
- Customizable application icons
- Local page support
- Electron-based for native feel and performance
- Node.js (Latest version recommended)
- npm (Comes with Node.js)
-
Clone the repository:
git clone https://github.com/TerminalDZ/WebToDesk.git
-
Navigate to the project directory:
cd WebToDesk
-
Install dependencies:
npm install
To run the application locally:
npm start
Open config.js
and modify the websiteUrl
value:
'websiteUrl': 'http://example.com',
-
In
package.json
, change thename
attribute:"name": "New_App_Name",
-
In
config.js
, modify theappName
value:'appName': 'WebToDesk',
In config.js
, adjust the following values:
'width': 800,
'height': 600,
'minWidth': 400,
'minHeight': 300,
Replace the icon files in the build
folder:
- macOS:
icon.icns
oricon.png
(at least 512x512) - Windows:
icon.ico
oricon.png
(at least 256x256) - Linux: Icons will be generated based on the macOS icon or
icon.png
-
Link local pages to menu: First, create an HTML page in your app's
public
folder. Then, inmenu-config.js
, use the following format:{label: 'Home', click: () => { require('./main')("home") }}, {label: 'About', click: () => { require('./main')("about") }},
-
Add a new menu section: In
menu-config.js
, copy-paste the following code block and replace the values as needed:{ label: 'New_Menu_Name', submenu: [ {role: 'reload'}, {role: 'zoomIn'}, {role: 'zoomOut'}, ] },
-
Available Menu Roles:
undo, redo, cut, copy, paste, pasteAndMatchStyle, delete, selectAll, reload, forceReload, toggleDevTools, resetZoom, zoomIn, zoomOut, togglefullscreen, window, minimize, close, help, about, services, hide, hideOthers, unhide, quit, startSpeaking, stopSpeaking, close, minimize, zoom, front, appMenu, fileMenu, editMenu, viewMenu, recentDocuments, toggleTabBar, selectNextTab
To customize the right-click menu, navigate to the application root and edit right-menu-config.js
.
In config.js
, add class or ID values to hide specific elements:
'hideElementsId': ['id_1', 'id_2', 'id_3'],
'hideElementsClass': ['class_1', 'class_2', 'class_3'],
Install electron-builder globally:
npm i electron-builder -g
Build for all platforms:
electron-builder -mwl
Build for specific platforms:
- macOS:
electron-builder --mac
- Windows:
electron-builder --win
- Linux:
electron-builder --linux
Note: macOS users can build for all platforms. Windows users can only build for Windows and Linux.
node_modules/
: Dependenciespublic/
: Images, stylesheets, and local web pagesbuild/
: Application iconsdist/
: Built package files and applicationsconfig.js
: Main configuration filepackage.json
: Node.js application and package detailsmenu-config.js
: Main menu templateright-menu-config.js
: Right-click menu configuration
Contributions are welcome! Please feel free to submit a Pull Request.
For any queries or support, please contact:
Email: [email protected]