BrowserWindow in ElectronJS

As you may know, in an Electron app, two processes are running simultaneously. One is the main process and the other is the render process. The render process is controlled by the BrowserWindow module, and in this article, we will see how that works and how we can manage the windows we create.

Let’s set up the project:

To get started, we will follow code that you can clone from this repository: https://github.com/thrive-articles/electron-dummy-project. If you have trouble understanding this code, please can read my previous article on ElectronJS here.

Now that you have cloned the app, run the command npm run watch.

You should see something like this.

Now, let’s begin.

Creating multiple windows:

Every time we call the BrowserWindow constructor it creates a new window. This means we can create as many windows as we want by only calling the BrowserWindow constructor.
Modify the createWindow() function like this.

1
2
3
4
5
const createWindow = () => {
  win = new BrowserWindow();
  const extraWindow = new BrowserWindow();
  win.loadFile("index.html");
};

This will create an extra window. Notice that this window is blank and the index.html file loads only in the first window.

Size of the window:

The default size of an Electron window is 800*800. We can change this size by passing a few values in the BrowserWindow constructor.

1
2
3
4
5
6
7
const createWindow = () => {
  win = new BrowserWindow({
    width: 800,
    height: 500
  });
  win.loadFile("index.html");
};

This will launch the app with 800*500 ratio. However, the user still holds the power to resize the window as they wish, though we can set up a few arguments to stop the window from getting too large or small.

1
2
3
4
5
6
7
8
9
10
11
const createWindow = () => {
  win = new BrowserWindow({
    width: 800,
    height: 500,
    minHeight: 400,
    maxHeight: 800,
    minWidth: 400,
    maxWidth: 1500
  });
  win.loadFile("index.html");
};

This is how constraints can be applied to screen sizes.

Using ready-to-show events:

You may be loading something in your page that is an asynchronous process, which means it takes some time to load. So instead of showing the screen right away we’ll only show the window when our content is loaded. Add any image to your HTML file from a URL, by adding this code to the body of your HTML file.

<img src="https://images.unsplash.com/photo-1633114128814-11fac33f707b" alt="" style="max-height: 500px">

The window opens first and then the image loads later. This does not provide a good user experience. So, modify the createWindow() function like this.

1
2
3
4
5
6
7
8
9
const createWindow = () => {
  const win = new BrowserWindow({
    show: false
  });
  win.loadFile("index.html");
  win.once("ready-to-show", () => {
    win.show();
  });
};

Parent and child/modal windows:

We can also create parent and child windows. The child window always stays on top of the parent window.
Write the following code.
const createWindow = () => {
const parent = new BrowserWindow({ title: ‘Parent’ });
parent.loadFile(“index.html”);
const child = new BrowserWindow({title: ‘child’, height: 300, width: 300, parent: ‘parent’ });
};

This will create two windows where one will stay on top of the other like this.

You can also create a child window that will disable parent windows. This is called a modal and is usually used to ask the user to save their work before closing the app.

1
2
3
4
5
6
7
8
9
10
11
12
13
const createWindow = () => {
  const parent = new BrowserWindow({
    title: 'Parent'
  });
  parent.loadFile("index.html");
  const child = new BrowserWindow({
    title: 'child',
    height: 300,
    width: 300,
    parent: 'parent',
    modal: true
  });
};

Loading remote HTML files:

We can also load remote HTML files. Let’s try that on Google. Modify the createWindow() function like this.

1
2
3
4
5
6
7
8
9
const createWindow = () => {
  const win = new BrowserWindow({
    show: false
  });
  win.loadURL("https://www.google.com");
  win.on('ready-to-show', () => {
    win.show();
  })
};

You will see something like this.

Thanks for reading about the Electron BrowserWindow module, hope you liked it.