Building your First Electron App.

Electron is a framework for building cross-platform desktop apps using JavaScript, HTML, and CSS. It embeds Chromium and Node.js, allowing a single JavaScript codebase to run on Windows, macOS, and Linux without native development experience.

To use Electron, you need to install Node.js. It's recommended to use the latest LTS version.

Electron apps follow the same general structure as other Node.js projects. To start, create a folder and initialize an NPM package.

The interactive init command will prompt you to set fields in your config. For this tutorial, please ensure the entry point is set to main.js.

Install the electron package into your app's devDependencies.

In the scripts field of your package.json config, add a start command

The start command allows you to open your app in development mode.

At this stage, your app will immediately throw an error telling you that it cannot find an app to run.

The entry point of an Electron application is its main script, which controls the main process running in a full Node.js environment. This process manages the app's lifecycle, displays native interfaces, performs privileged operations, and handles renderer processes.

Electron locates this script using the main field in the app's package.json, set during app setup. To initialize the main script, create an empty file named main.js in the root of your project.

Create an index.html file in the root folder of your project

The start command allows you to open your app in development mode.

This basic structure will display "Hello World" as a heading in your app's window.

In the next Part, we will make a TODO desktop application. Till then play with Electron.