Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app.

Don't miss a moment with The Replay, a curated newsletter from LogRocket.The renderer process defines what to render inside the windows as the name suggests, and the main process defines what windows to create, as well as the interactions with them and other back-end related things. You can think of them as client and server side, respectively. npm run build to build for production and npm run dist to distribute the executables.īefore we start, let’s quickly go over how Electron is structured.Įlectron has two processes: renderer and main. Transpiling JS and Style linting CSS modules support Sass compiler SVG loader URL Loader for files npm run client to run the renderer process and then npm run server to run the main process. You can clone or download it to start the project, or you can use your own favorite boilerplate instead.įind mine here: GitHub – dbilgili/minimal-electron-react-boilerplate To make it fast and easy for those who are not sure how to configure the project, I have prepared a boilerplate for Electron with React.js.

So, if you want to try this tutorial on another operating system, such as Windows or Linux, you might need to do small tweaks in the code due to the fact that the Electron API shows differently on different operating systems. Moreover, the target operating system in this tutorial is macOS. In this article, I am going to cover how to implement a menu bar application by using Electron.js along with React in a detailed manner.Īlthough I chose to use React, the client side can of course use any of the other frameworks or just vanilla JavaScript. Building a menu bar application with Electron and React Doğacan Bilgili Follow A software developer who is also into 3D-modeling and animation.

Electron js download