Building an Electron Desktop Application with React and Node.js

Electron is an open‑source framework from GitHub that combines Chromium and Node.js, allowing developers to write desktop applications with HTML, CSS, and JavaScript that run on macOS, Windows, and Linux.

The framework consists of three core parts: Chromium for rendering web content, Node.js for providing a runtime API, and Electron’s built‑in APIs that abstract platform differences such as menus, shortcuts, and dialogs.

Electron applications have two main processes: the Main Process , which creates windows and handles global events, and one or more Renderer Processes , which render the UI like a browser tab. The Main Process uses BrowserWindow to spawn Renderer windows.

Prerequisites

Create a project directory and initialize it with npm:

mkdir electron-demo
cd electron-demo
npm init -y

Install Electron (optionally using a domestic mirror for faster downloads):

npm install electron --save

Optionally add a .npmrc file to set the mirror:

electron_mirror=https://mirrors.huaweicloud.com/electron/

The demo project uses React for the UI. The directory structure includes src/App.js , src/main.js , a webpack configuration, and a simple test/content.txt file that the renderer reads via Node’s fs module.

Example of reading a file in the renderer:

import React, { useEffect, useState } from "react";
import fs from "fs";
const App = () => {
  const [content, setContent] = useState("");
  useEffect(() => {
    const fileContent = fs.readFileSync('./test/content.txt', "utf-8");
    setContent(fileContent);
  }, []);
  return (
You read the file with Electron:
{content}
);
};
export default App;

The main entry electron.main.js creates a BrowserWindow with nodeIntegration: true and loads either a development server URL or the built HTML file based on process.env.NODE_ENV :

const { app, BrowserWindow } = require('electron');
function createWindow() {
  let win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: { nodeIntegration: true, webSecurity: false, enableRemoteModule: true }
  });
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:9090');
  } else {
    win.loadFile('./dist/index.html');
  }
}
app.whenReady().then(createWindow);

During development the did-fail-load event is listened to so the window reloads until the dev server is ready.

The package.json scripts combine the webpack dev server and Electron start using concurrently :

"scripts": {
  "start": "NODE_ENV=development concurrently \"npm run serve\" \"npm run electron\"",
  "serve": "node script/serve.js",
  "electron": "electron ."
}

For packaging, the tutorial recommends electron-builder and shows a minimal build configuration in package.json , including Windows and macOS targets, icons, and installer options.

Example build script for macOS:

npm run compile:mac

After running the build, a DMG installer is produced, demonstrating that Electron enables JavaScript to access system APIs and simplifies multi‑platform desktop development.

References: Electron main/renderer process documentation and electron‑builder configuration guide.