Electron Example Windows APPlication

Convert your website/blog into Windows Application Build using Electron

Requirements

• Electron
• Electron Packager
• Electron Win Installer

# Install Electrom
sudo npm install -g electron --unsafe-perm=true

# Install Electron Packager
sudo npm install electron-packager -g

Installation

• Clone this Respo

https://github.com/mskian/electron-example-windows.git

• Install dependencies

cd electron-example-windows

yarn

• Build a Package for Windows

yarn package-win

• Build .exe Package

yarn create-installer-win

Customization

Add ICONS

• Add Icons on assets/icons/win Directory
• open https://convertico.com/ and Upload your ICON.Format png & size 512x512
• Convert your png icon to icoFormat
• Rename the icon Icon-512.ico to Icon.ico
• Next Move the Icon to assets/icons/win Folder (PS: Before Adding your Own ICON Cleanup Default icon which already added for example APP)

Convert the website/blog to Desktop APP

• open main.js File
• Find the Below & Update your Blog/website URL

var weburl = 'https://task.santhoshveer.com';

• Add Background Color Find this Line backgroundColor: '#15171A', & Replace it with your Background Color code
• Test your APP

electron main.js

• Open /installers/windows/createinstaller.js File & Update the APP Directory, Author name, Output Directory, Setup exe File Name.

Windows package Setup

• package.json - Open it & replace it with your Name, Description and Version
• Windows Application Packager and Builder Configuration from package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "package-win": "electron-packager . electron-example --overwrite --asar --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=MSKIAN --version-string.FileDescription=MSKIAN --version-string.ProductName=\"Electron Example\"",
    "create-installer-win": "node installers/windows/createinstaller.js"
  },

• electron-example - Replace with your APP Name
• release-builds/electron-example-win32-ia32/ - same Replace electron-example with your APP Name

Learn More about Electron

Special thanks to Christian Engvall for this Awesome Tutorials

#	Topic	Description
01	Hello world tutorial	Get electron running on your computer
02	Testing electron app on Ubuntu	Set up a VirtualBox virtual machine running Ubuntu and share app
03	Electron app icons	Adding icons to the app
04	Electron packager tutorial	Creating packages for mac, windows and linux
05	Electron menu	Adding a main menu to your Electron app
06	Electron asar	Packaging the app with asar
07	DMG Installer	Creating a DMG-installer for macOS
08	Windows installer	Creating a windows installer with electron-winstaller
09	Debian package installer	Create a debian package
10	Update to latest Electron version	Update electron to the latest version using npm

LICENSE

MIT