Packaging and build for electron app

Posted By : Md Imroz Alam | 27-Sep-2017

Sample demo app using electron http://www.oodlestechnologies.com/blogs/Develop%20desktop%20app%20using%20html,%20css%20and%20javascript

1) After creating sample demo app using electron. we have to add squarrel code for packaging and build in the main.js 

if (handleSquirrelEvent(app)) {

// squirrel event handled and app will exit in 1000ms, so don't do anything else

return;

}

function handleSquirrelEvent(application) {
    if (process.argv.length === 1) {
        return false;
    }

    const ChildProcess = require('child_process');
    const path = require('path');

    const appFolder = path.resolve(process.execPath, '..');
    const rootAtomFolder = path.resolve(appFolder, '..');
    const updateDotExe = path.resolve(path.join(rootAtomFolder, 'Update.exe'));
    const exeName = path.basename(process.execPath);

    const spawn = function(command, args) {
        let spawnedProcess, error;

        try {
            spawnedProcess = ChildProcess.spawn(command, args, {
                detached: true
            });
        } catch (error) {}

        return spawnedProcess;
    };

    const spawnUpdate = function(args) {
        return spawn(updateDotExe, args);
    };

    const squirrelEvent = process.argv[1];
    switch (squirrelEvent) {
        case '--squirrel-install':
        case '--squirrel-updated':
            // Optionally do things such as:
            // - Add your .exe to the PATH
            // - Write to the registry for things like file associations and
            //   explorer context menus

            // Install desktop and start menu shortcuts
            spawnUpdate(['--createShortcut', exeName]);

            setTimeout(application.quit, 1000);
            return true;

        case '--squirrel-uninstall':
            // Undo anything you did in the --squirrel-install and
            // --squirrel-updated handlers

            // Remove desktop and start menu shortcuts
            spawnUpdate(['--removeShortcut', exeName]);

            setTimeout(application.quit, 1000);
            return true;

        case '--squirrel-obsolete':
            // This is called on the outgoing version of your app before
            // we update to the new version - it's the opposite of
            // --squirrel-updated

            application.quit();
            return true;
    }
};
       

 

2)  we need to install electron-packager globally

npm install electron-packager -g
       

 

3) These are following command to create package of desktop for different platform
 

i)for windows 32 bit 

run following command on root folder of app

electron-packager src testApp --overwrite --platform=win32 --arch=ia32 --electron-version=1.6.8 --prune=true --asar=true --win32metadata.CompanyName=testApp --win32metadata.ProductName=testApp  --win32metadata.FileDescription=testApp --win32metadata.OriginalFilename=testApp.exe --win32metadata.InternalName=testing --icon=test.ico Test
       

 

ii) for windows 64 bit(change only arch parameter value as 'x64')

electron-packager src testApp --overwrite --platform=win32 --arch=x64 --electron-version=1.6.8 --prune=true --asar=true --win32metadata.CompanyName=testApp --win32metadata.ProductName=testApp  --win32metadata.FileDescription=testApp --win32metadata.OriginalFilename=testApp.exe --win32metadata.InternalName=testing --icon=test.ico Test
       

iii) for mac

electron-packager . --overwrite --platform=darwin --arch=x64 --icon=icon.icns --prune=true --out=release-builds

       


    
iv) for Linux

electron-packager . --overwrite --platform=linux --arch=x64 --icon=icons.png --prune=true --asar=true --out=release-builds
       

 

After creating package, a new directory name as Test-win32-x64 a one exe file name testApp.exe on clicking on this app will be open

4) for creating installable setup for windows for this package

run the following script as build.js

 a) build.js 

var electronInstaller = require('electron-winstaller');


var settings = {
    appDirectory: './belfrics-win32-x64',
    outputDirectory: './belfrics-installers',
    authors: 'Testing',
    exe: './testApp.exe'
};
console.log("building................................");
resultPromise = electronInstaller.createWindowsInstaller(settings);
resultPromise.then(() => {
    console.log("The installers of your application were succesfully created !");
}, (e) => {
    console.log(`Well, sometimes you are not so lucky: ${e.message}`)
});
       

 

 b) node build.js
it will take 10 to 15 minute for build setup depend on package size.

Thanks

I hope it will be helpful

About Author

Author Image
Md Imroz Alam

Md. Imroz Alam is a bright Web App Developer, he has good knowledge of Java, J2SE, Jsp, Servlet, jdbc. His hobbies are watching movie, playing carom.

Request for Proposal

Name is required

Comment is required

Sending message..