Electron windows installer app with Syncfusion components

Electron is a popular framework to create cross platform apps using single JavaScript application. Follow the steps to create windows installer of Electron App with Syncfusion Essential JS1 components.

1. Create the Electron based application by refer to Electron documentation: https://github.com/electron/electron-quick-start
2. Render Syncfusion DatePicker control by refer corresponding CSS and scripts from this  UG documentation.
3. Run the app using ‘npm start’ command and ensure whether Syncfusion DatePicker control render.
4. Essential JS1 controls use jQuery library. So, declare the following code in head section of index.html file.

   <script>
         window.nodeRequire = require;
         delete window.require;
         delete window.exports;
         delete window.module;
    </script>
   

For more details, refer to this documentation -  https://www.electronjs.org/docs/latest/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

5. Install and package the application using Electron Packager.
   

   npm install --save-dev electron-packager

   npx electron-packager ./ ElectronJS1 --platform=win32 --arch=x64

6. Install the Winstaller through npm command by refer to this Electron windows Installer.
   

   npm install --save-dev electron-winstaller

7. Open the main.ts file and include the below code. The function must be defined as `async` operations.

   …
   app.whenReady().then(() => {
     createWindow()
     createSyncfusionJS1Installer();
     app.on('activate', function () {
       // On macOS it's common to re-create a window in the app when the
       // dock icon is clicked and there are no other windows open.
       if (BrowserWindow.getAllWindows().length === 0) createWindow()
     });
    
    
   })
    
   async function createSyncfusionJS1Installer() {
     try {
       await electronInstaller.createWindowsInstaller({
         appDirectory: './ElectronJS1-win32-x64',
         outputDirectory: './ElectronJS1-win32-x64/build/installer64',
         authors: 'Syncfusion Inc.',
         exe: 'ElectronJS1.exe',
         name: 'eletronjs1'
       });
       console.log('It worked!');
     } catch (e) {
       console.log(`No dice: ${e.message}`);
     }
   }
   …
   

8. Now, run the Electron app using ‘npm start’ command. The app will be launched, and windows installer will be created under ‘electron-quick-start\ElectronJS1-win32-x64\build\installer64’ location.

For more details, refer to this GitHub repository that created and configured with electron js.

https://github.com/SyncfusionExamples/ej1-electron-windows-installer