Electron JS | BrowserWindow

Electron JS | BrowserWindow: In this tutorial, we are going to learn about the BrowserWindow, how to use, and implement it in Electron JS?
Submitted by Godwill Tetah, on June 15, 2020

Just like any other desktop software application, Electron JS also makes use of "Desktop Windows" as its user interface.

We must understand that Electron JS uses web pages as its graphical user interface. BrowserWindow enables us to see the user interface.

Let us ride on to our first code and build a browser window.

Note: Ensure you have Node.Js and Electron JS installed.

Create a new JavaScript file App.js

const electron = require ('electron')

const app = electron.app // import electron module
const BrowserWindow = electron.BrowserWindow //enables UI
let mainWindow
app.on ('ready', _ => {
    mainWindow = new BrowserWindow({
        height : 400,
        width : 400
    })

    mainWindow.loadFile('src/index.html')

    mainWindow.on ('closed', _ => { //detect if window is closed.
        console.log ('closed!')
        mainWindow = null
    })
})

Firstly, we import electron whenever we are starting an electron application.
We equally import all necessary modules or APIs needed it our application.
We also notice that it's imported using the Common JS format or syntax.
let mainWindow keeps a global reference of the window object where windows may automatically close when the JavaScript object is garbage collected.
app.on creates a new window when the app is initialized and is ready to create a browser window. The width and height values determine the size of the window.
loadFile method reads and displays the HTML / CSS / JavaScript file to be used as a user interface.
LoadURL method can also be used as an alternative to loadFile.
Notice that ready and closed options are used to detect if the app is ready or closed.

Place your HTML, CSS, and JavaScript files in the src folder.

Finally, start your app and see the output.

You can always check out the Electron JS official documentation on their website.