I started learning Electron, and this is what I learned so far

Source: Dev.to

The most fascinating thing about learning JavaScript for me was how easy it is to get into developing applications for different platforms. Since I mainly work on my Windows PC, I wanted to create some personalized apps to boost my productivity.

Why I did not choose native development over Electron?

The answer is simple: I’m comfortable with JavaScript. Learning a new language like C has its perks, but I prefer to start with something familiar rather than make the entry point harder.

I began by reading the official documentation: . On the main page you can see the typical file structure, which includes main.js, preload.js, and index.html. The three files we usually focus on are:

main.js

main.js is the heart of the application. It runs in the main process and handles Node.js integration, window creation, and the overall lifecycle of the app.

preload.js

preload.js acts as a bridge between the UI (renderer) and the main process. It exposes a limited, safe API to the renderer for security reasons.

renderer.js

renderer.js runs in the renderer process and manipulates the UI—essentially the “bare‑bones UI script.” When using a framework like React, this file is often unnecessary because React bundles its own HTML, CSS, and JavaScript.

Scaffolding a new project

Using plain HTML, CSS, and JavaScript with Electron

You can build a simple Electron app using the three web fundamentals. A minimal setup might look like this:

In this example I omitted preload.js because it’s optional for very small projects. The app and BrowserWindow modules are required from Electron; app controls the application lifecycle, while BrowserWindow creates and manages windows. app.whenReady() returns a promise that resolves when Electron has finished initializing.

Using React (Vite) and Electron

My preferred workflow is to combine React with Electron. First, scaffold a Vite project, then add Electron as a dev dependency. To avoid module resolution issues, rename the entry files from .js to .cjs and use CommonJS syntax.

This is just an early overview of what I’ve learned so far. I’ll keep sharing my insights as I continue exploring Electron.

Bye 👋