Guide for ElectronJs Linux, Window and Mac Executable & Distribution Packages Creation

ElectronJS is an incredible tool for creating cross-platform desktop apps using web technologies like JavaScript, HTML, and CSS. Let’s walk through creating a project named FULLSTACK and packaging it for different platforms, step by step. We'll start by creating and setting up the app and then packaging it for different operating systems.

1. Setting Up the Project

Step 1: Open ElectronJS

Begin by installing ElectronJS if you haven't already.

Step 2: Create a New Folder

Create a new folder for your project. Let’s name it FULLSTACK. This will house all the files for your application.

Step 3: Copy Files

Copy the essential files from your other projects: index.html, error.html, and main.js, and place them inside the FULLSTACK folder.

Step 4: Initialize npm

Open your terminal, navigate to the FULLSTACK folder, and run the following command to initialize npm:

npm init

This command will prompt you to enter the details of your project. Follow the prompts to generate a package.json file.

Step 5: Edit package.json

Edit the package.json file to include a start script for Electron:

"scripts": {
  "start": "electron ."
}

Step 6: Install Electron

Install Electron as a development dependency by running the following command:

npm install electron --save-dev

Note: You may need to use sudo before the command:

sudo npm install electron --save-dev

Current Version: Electron 32.1.2. You can check the latest version on the Electron Releases page.

Step 7: Launch the App

Finally, start your app by running:

npm start

2. Packaging the App

Step 1: Install Electron Packager

To package your app, first install electron-packager:

npm install electron-packager --save-dev

Note: You may need to use sudo before the command:

sudo npm install electron-packager --save-dev

Current Version: Electron Packager 17.1.2. You can check the latest version on the npm page for electron-packager.

Step 2: Update Dependencies

Ensure that electron and electron-packager are listed under devDependencies in your package.json file:

"devDependencies": {
  "electron": "^32.1.2",
  "electron-packager": "^17.1.2"
}

Step 3: Add Packaging Scripts

Edit the package.json file to include scripts for packaging your app for different platforms:

"scripts": {
  "start": "electron .",
  "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=icon.icns --prune=true --out=release-builds",
  "package-win": "electron-packager . FULLSTACK --overwrite --asar=true --platform=win32 --arch=x64 --icon=icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"FULLSTACK\"",
  "package-linux": "electron-packager . FULLSTACK --overwrite --asar=true --platform=linux --arch=x64 --icon=icon.png --prune=true --out=release-builds"
}

Step 4: Package for Different Platforms

Run the respective commands to package your app:

For macOS:

npm run package-mac

For Windows:

npm run package-win

For Linux:

npm run package-linux

Sometimes, you might need to use sudo before the commands:

sudo npm run package-mac
sudo npm run package-win
sudo npm run package-linux

3. Making Executables

Step 1: Install Electron Installer for Debian

For Linux, we can create .deb packages using electron-installer-debian. First, install it globally:

sudo npm install -g electron-installer-debian

Step 2: Create debian.json

Add a debian.json file to your project root with the following content:

{
  "dest": "release-builds/",
  "icon": "assets/icons/linux/icon.png",
  "categories": [
    "Utility"
  ],
  "lintianOverrides": [
    "changelog-file-missing-in-native-package"
  ]
}

Step 3: Create Debian Package

Run the following command to create a Debian package:

electron-installer-debian --src release-builds/FULLSTACK-linux-x64/ --arch amd64 --config debian.json

Find the Linux executable in FULLSTACK/dist/installer.

4. Additional Packaging for Windows and macOS

For Windows:

To get a Windows package builder, use INNO Setup. It’s a separate tool not covered in this guide. You can download it from the official InnoSetup download page.

Note: INNO Setup is only available for Windows. Linux users may need to use Wine to run it.

For macOS:

To create a macOS installer, install electron-installer-dmg:

sudo npm install electron-installer-dmg --save-dev

Add a new script in package.json:

"create-installer-mac": "electron-installer-dmg ./release-builds/FULLSTACK\\ FULLSTACK-darwin-x64/FULLSTACK\\ app.app FULLSTACK --out=release-builds --overwrite --icon=assets/icons/mac/icon.icns"

Run the script to create the macOS installer:

npm run create-installer-mac

Conclusion

By following these steps, you can easily create an ElectronJS project and package it for multiple platforms. This guide provides a structured approach to setting up and deploying your Electron app. Happy coding! 🎉