this is the sample blog

Electron is an open-source framework that lets you build cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript. [1, 2, 3, 4, 5]

It essentially combines the Chromium rendering engine (the core of Google Chrome) with the Node.js runtime. This means your app runs inside a dedicated web browser window but has full access to the user's operating system. [1, 2, 3, 4, 5]

1. The Core Architecture

An Electron app relies on a two-process model to keep the application secure and stable. [1]

• The Main Process:

  • Runs in a Node.js environment.

  • Acts as the orchestrator of your application.

  • Controls the app lifecycle (starting, quitting).

  • Creates and manages native operating system windows.

  • Has full access to operating system APIs (file system, system tray, notifications). [1, 2, 3, 4, 5]

• The Renderer Process:

  • Runs inside a Chromium browser window instance.

  • Responsible for rendering the web page (your user interface).

  • By default, it does not have direct access to Node.js or native OS APIs for security reasons.

  • You can have multiple renderer processes if your app has multiple windows. [1, 2, 3, 4, 5]

2. The Bridge (Preload Scripts)

Because the Renderer cannot touch the file system and the Main process cannot touch the UI, they need a safe way to talk to each other. [1, 2]

• Preload Scripts: This script acts as an isolated bridge. It runs before the web page loads but has access to both Node.js APIs and the browser context. [1, 2, 3, 4]

• Context Isolation: It securely exposes specific, safe shortcuts (like a function to save a file) from the Main process to the Renderer process without exposing raw Node.js capabilities to the internet.

3. Communication (IPC)

The processes talk to each other using Inter-Process Communication (IPC). It works like an event listener system: [1, 2]

• ipcRenderer.send(): The UI sends a message or request to the background logic (e.g., "User clicked the save button").

• ipcMain.on(): The background logic listens for that message, runs the Python code or touches the file system, and handles the action. [1]

4. Minimal File Structure

A basic Electron project requires only three core files: [1]

1. package.json: Configures your project dependencies and points to your main script.

2. main.js: Contains the Main Process code to open your app window.

3. index.html: The actual web page interface that users will see. [1, 2, 3, 4, 5]

To help you get started with your project, I can provide the exact code for these three fundamental files so you can run a "Hello World" Electron window on your computer. Would you like the code boilerplate, or should we look at how FastAPI will connect to this setup?

28 sites

• What is Electron.js? Empowering Cross-Platform Development with a Robust Framework

  13 Oct 2023 — Definition: Electron ( Electron framework ) is an open-source framework that facilitates the development of cross-platform desktop...

  

  Medium

• Top 25+ Electron App Examples for Desktop to See 2026

  14 Apr 2026 — Electron combines Node. js and Chromium to simplify development and let web technologies build cross platform desktop apps with na...

  

  eSparkBiz

• Creating a Desktop App with Electron, Typescript, and Angular | Tutorials

  5 Jan 2024 — An Electron app is a desktop application that is built using web technologies such as HTML, CSS, and JavaScript. It allows develop...

  

  buddy.works

Show all

You said: yes give me the hellow world code then how do we run it like simply run dev ?? and it we make a project then how can we manage the proper folder structure for it.

1. Hello World Boilerplate

Create a new folder on your computer, open your terminal inside it, and initialize a Node project by running npm init -y. Then, install Electron as a development dependency: [1, 2, 3, 4, 5]

bash

npm install electron --save-dev

Use code with caution.

Now, create the following three core files in your root directory:

package.json

Update your existing package.json to include "main": "main.js" and add a start script. [1, 2, 3, 4]

json

{
  "name": "electron-fastapi-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^31.0.0" 
  }
}

Use code with caution.