How to identify and work with OS platforms conditionally in Electron JS?

Electron JS | identify and work with OS platforms conditionally: In this tutorial, we are going to quickly work on identifying the different variety of platforms and work with them conditionally.
Submitted by Godwill Tetah, on June 15, 2020

We all know Electron JS is used to build native desktop applications using HTML, CSS, and JavaScript, so we must have a way to handle different platforms. The fact that you are using windows 10 * 64 does not mean all your application users equally use the same operating system.

If this is your first time here, consider checking out my recent articles on Electron JS. You may also want to add some differences in the user interface on different platforms. This is important because not all platforms have the same functionalities. Electron js works on windows, Mac, and Linux platforms.

In this tutorial, we will use conditional statements for different platforms. We will simply create an empty browser window with its default menu, and console.log a sentence depending on the different platforms.

Open your main JavaScript file and type this,

const electron = require ('electron')  // imports electron
const {app} = electron // imports menu and tray modules
const BrowserWindow = electron.BrowserWindow // calls brower window for use
if (process.platform !== 'win32' ) {  // checks type of windows OS
    console.log ("running on win32")
  } else {
      console.log("running on win64") 
  }
  if (process.arch === 'x64') {     // checks windows architecture
            console.log('win 64 arch')  
        } else {
    console.log ('win32 arch')
  }

let mainWindow;
app.on('ready', _ => {
    // create browser window and set browser window dimensions
    mainWindow = new BrowserWindow({ 
        height : 600,
        width : 600,
        icon: 'src/Tray.ico'     // sets window icon
    })
})
  • As clearly seen above, the operating system can be figured out using the process.platform and process.arch for the architecture.
  • Yes! true I was selfish in this tutorial and only thought of windows, but you can always replace with the platform or operating system of your choice;
    • Mac OS could be Darwin
    • Linux
  • You can read more on some of the properties and methods on process in their official documentation.

Finally, run your code and check the output.

Identify and work with OS platforms conditionally in Electron JS

And there it is, the output!. The code simply says if the operating system is windows 64, let a statement be printed on the console, and so on!...

Thanks for reading.

Drop your comments if in need of help.



Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.