Ultimate Guide to Building Desktop Apps with Electron.js | Free Tools

Опубликовано: 03 Ноябрь 2024
на канале: gilgeekify programming

343

Learn how to build cross-platform desktop applications using Electron.js, Node.js, and JavaScript with this ultimate guide. Discover free tools and resources to help you get started! We’ll cover packaging your app with Electron Packager and npm, creating one-click installers with Electron Installer, and making a portable version with Enigma Virtual Box.

🎞️ TABLE OF CONTENTS 🎬
0:00 Introduction
0:48 Application Demo
3:20 Install Prerequisites (Node & npm)
4:39 Setup Electron.js Project & Run the App
8:15 Electron.js File Structure Explanation
11:01 Create Electron.js Package with Electron Packager (@electron/packager)
16:20 Build One-Click Installer using Electron Windows Installer (electron-winstaller)
23:31 Build Portable Version of Your App using Enigma Virtual Box
25:41 Size Comparison Between All App Versions
26:27 Open All Application Versions
26:56 How to Uninstall the App
27:41 End Screen

🔴 SPG App Live Demo
🔗 https://saeedkohansal.github.io/Safe-...

✅ Download Safe Password Generator App
🔗 Web App Version: https://github.com/saeedkohansal/Safe...
🔗 Installer Version: https://drive.google.com/file/d/1q0Yj...
🔗 Portable Version: https://drive.google.com/file/d/1qFgA...

📂 Used Scripts
🔗 main.js: https://github.com/saeedkohansal/Safe...
🔗 create-installer.js: https://github.com/saeedkohansal/Safe...

⚛️ Electron JS Documentation
🔗 https://www.electronjs.org/docs/latest/

📜 Use Electron Packager
🔗 https://electron.github.io/packager/m...

⭐ Windows 64-bit Packaging with ASAR and Custom Icon:
✏️ npx @electron/packager . SafePasswordGenerator --platform=win32 --arch=x64 --out=dist --icon="spg-app/assets/icon/logo/128.ico" --asar --overwrite

🛠️ Use Electron Installer
🔗 https://github.com/electron/windows-i...

⬇️ Download Node.js
🔗 https://nodejs.org/en

⬇️ Download npm
🔗 https://docs.npmjs.com/downloading-an...

📦 Download Enigma Virtual Box
🔗 https://enigmaprotector.com/en/downlo...

⭐ Useful Links & Softwares
🔗 https://www.electronjs.org/
🔗 https://www.electronjs.org/docs/lates...
🔗 https://github.com/electron/electron
🔗 https://github.com/electron/electron-...
🔗 https://github.com/electron/packager
🔗 https://github.com/nvm-sh/nvm
🔗 https://www.npmjs.com/package/npm

#electronjs #appdevelopment #nodejs #webdevelopment #gilgeekify