Skip to main content

Electron.js Hello World

Electron.js, also known as Electron, is an open-source framework that allows developers to build cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript. It was created by GitHub and is currently maintained by a team of developers from GitHub and the open-source community.

With Electron, developers can leverage their existing web development skills to create native-like desktop applications for Windows, macOS, and Linux operating systems. Electron combines the Chromium rendering engine and Node.js runtime, enabling developers to build powerful applications with access to both web APIs and native operating system APIs.

History​

Electron was initially developed by Cheng Zhao as part of the Atom editor project at GitHub. It was released as an open-source project in 2013 and gained popularity due to its flexibility and ease of use. Developers quickly recognized its potential beyond building code editors and started using Electron to create a wide range of desktop applications.

Since its release, Electron has been adopted by many well-known applications, including Visual Studio Code, Slack, Discord, and many others. Its popularity can be attributed to its ability to provide a consistent development experience across multiple platforms and its extensive community support.

Features​

Electron offers several key features that make it a popular choice for desktop application development:

  1. Cross-platform compatibility: Electron allows you to build applications that work seamlessly on Windows, macOS, and Linux operating systems without the need for platform-specific code.

  2. Native-like performance: By leveraging Chromium and Node.js, Electron provides access to powerful APIs and libraries, enabling developers to create high-performance applications.

  3. Easy integration with web technologies: Electron allows developers to use HTML, CSS, and JavaScript to create the user interface of their applications, making it easy for web developers to transition into desktop application development.

  4. Access to native APIs: Electron provides a bridge between web technologies and native operating system APIs, allowing developers to access system-level features, such as file system access, notifications, and more.

  5. Extensive community support: Electron has a large and active community of developers who contribute to its development, provide support, and create plugins and libraries to extend its capabilities.

Hello World Example​

To get started with Electron, let's create a simple "Hello World" application. Follow the steps below:

Step 1: Install Node.js​

Before using Electron, ensure that you have Node.js installed on your machine. You can download and install the latest version from the official Node.js website: https://nodejs.org

Step 2: Create a new directory and initialize a new Node.js project​

Open your terminal or command prompt and create a new directory for your project. Navigate to the project directory and initialize a new Node.js project by running the following command:

mkdir electron-app
cd electron-app
npm init -y

Step 3: Install Electron as a dependency​

Next, install Electron as a dependency for your project by running the following command:

npm install electron

Step 4: Create the main script file​

Create a new file named main.js in your project directory and add the following code:

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Step 5: Create the HTML file​

Create a new file named index.html in your project directory and add the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
  </body>
</html>

Step 6: Update the package.json file​

Open your package.json file and update the scripts section to include the following line:

"scripts": {
  "start": "electron ."
},

Step 7: Run the application​

To run the application, use the following command:

npm start

Congratulations! You have created a simple Electron "Hello World" application. Electron will launch a window with the title "Hello Electron!" and display the heading "Hello Electron!" in the window's body.

Comparison with Alternatives​

Electron is not the only framework available for building desktop applications using web technologies. Here is a brief comparison with some of its alternatives:

  • NW.js (formerly known as node-webkit): NW.js is another popular framework that allows developers to build desktop applications using web technologies. It provides similar features to Electron but has a slightly different architecture. NW.js bundles the Chromium rendering engine and Node.js runtime into a single executable, whereas Electron separates them into separate processes.

  • React Native: React Native is a framework for building mobile applications using JavaScript and React. While it focuses on mobile app development, there are efforts to extend React Native to support desktop application development. React Native for Desktop is an unofficial project that aims to bring React Native to macOS and Windows platforms.

  • NativeScript: NativeScript is a framework that allows developers to build native mobile and desktop applications using JavaScript or TypeScript. It provides access to native APIs and UI components, enabling developers to create high-performance applications. NativeScript supports multiple platforms, including iOS, Android, and Windows.

While these alternatives offer their own unique features and advantages, Electron stands out for its simplicity, extensive community support, and popularity among developers. It provides a well-documented and easy-to-use API, making it an excellent choice for building cross-platform desktop applications using web technologies.

For more information and detailed documentation, visit the official Electron website: https://www.electronjs.org