Adding a custom title bar to Electron project

Question

I am new to electron and node.js so I have decided to build an app that extracts critical information about the OS, CPU, RAM, GPU, etc. (yes like CPU-Z, GPU-Z and Speccy)

I wanted to use the VS Code custom title bar found here https://github.com/Cristian006/frameless-titlebar. Only problem was that I followed the steps (I think) correctly but the title bar would not load. The repo mentioned adding code on "app's root container render method" but when i installed electron and started it via the command npm init I found no render file whatsoever and despite me creating and adding the code in it (and also trying in the <script> of the HTML file for the main window) I was still unsuccessful.

Due to my inexperience, I think that I am doing something wrong. Could anyone guide me thoroughly on how I can use this library/API step-by-step. I am using JavaScript and HTML/CSS mainly instead of TypeScript.

Answer 1

the link you posted mentions that it is build for react apps in electron. Since you say you have none of these files, I assume you do not have installed react for your project. Another very similar titlebar is custom-electron-titlebar.

A second note is that electron is actually a very glorified browser. This means you will probably show a website or serve an html file to the user that electron will render. For both titlebars, the code need to be placed in the javascript from the shown page, and not in the javascript that gets called by electron. This is for multiple reasons

1. in the main.js electron code, there is no window to show anything in, you need to open a window yourself and then load a file or webpage into it.
2. there is a difference between server and browser javascript, as browsers inject all sorts of global constants that these modules use.