We aren't going to repeat the project setup procedure. By now, you should already know how to bootstrap an Electron application using multiple frameworks, or even plain JavaScript. If you want a recap, please refer to Chapter 3, Integrating with Angular, React, and Vue.

Let's use the React library to create a React app utility so that we can build a screenshot snipping tool.

As you already know, Electron applications can also display remote websites. This gives a remote web page access to your local resources and potentially allows them to perform malicious activities. That is why Node.js integration is disabled. For fully offline applications, we need to enable Node.js support explicitly.

We are going to be using local resources and assets, so you should use the webPreferences object to allow window.require and other Node.js features to be used in the web renderer process. You can enable all the necessary features by using the following code:

webPreferences: {
  nodeIntegration: true
}

Please refer to the following code and update the createWindow function in your main.js file accordingly:

function createWindow() {
  win = new BrowserWindow({
    transparent: true,
    frame: false,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadURL(`http://localhost:3000`);

  win.on('closed', () => {
    win = null;
  });
}

There are many other options you can toggle or tune. You can find the full list at https://electronjs.org/docs/api/browser-window.

Now that we have prepared our project, let's move on to the first step of creating our application. Let's see what it takes to create a frameless window with Electron.