Start your first Electron Project

date

Jun 7, 2023

slug

electron

author

status

Public

What is the Electron framework?

The Electron framework is an open-source project developed by GitHub. It's a framework for developing desktop applications with web technologies: JavaScript, HTML, and CSS. Electron achieves this by combining Chromium (for rendering web pages) and Node.js (for executing JavaScript on the backend) into a single runtime, enabling you to package your web application into a desktop application.

Advantages of the Electron

Electron is used when developers want to create a desktop application that works across multiple platforms (Windows, macOS, Linux) without needing to write a separate codebase for each. It simplifies the development process and allows for faster, more efficient deployment and updates.

One of the main advantages of using Electron is its cross-platform compatibility. Developers can create one application and distribute it across different operating systems, saving both time and resources. It's also advantageous because it allows developers to use familiar web development technologies, reducing the learning curve for creating desktop applications.

Moreover, Electron has strong community support, with many developers contributing to its development and a large number of libraries and tools available to simplify the development process. Some notable applications built with Electron include Microsoft's Visual Studio Code, Slack, and GitHub's own Atom text editor.

💡

However, it's also worth mentioning that Electron applications can be more resource-intensive than native applications due to the overhead of running a full Chromium instance. This has led some to criticize Electron for contributing to software bloat. But in many cases, the advantages in terms of cross-platform compatibility and ease of development outweigh this downside.

Start your first Electron project

To get started with an Electron project, you need to have Node.js and npm (Node Package Manager) installed on your system. If you don't already have them, you can download Node.js (which comes with npm) from https://nodejs.org.

STEP 1: Setting Up Your Project

First, you'll need to create a new folder for your project. You can do this and navigate into it using the following commands in your terminal:


mkdir my-electron-app
cd my-electron-app

STEP 2: Initializing Your Project

Next, you'll need to initialize your project, creating a new package.json file:


npm init -y

The -y flag will automatically fill out the package.json file for you.

STEP 3: Installing Electron

Now, you'll install Electron in your project as a development dependency:


npm install --save-dev electron

STEP 4: Creating Your Application

At this point, you'll need to create two files in your project directory: index.html (the web page) and main.js (the main application script).

You can create and edit these files using any text editor you prefer. Here are simple examples of what the contents of these files might look like:


<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, Electron!</h1>
  </body>
</html>

index.html


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)

main.js

STEP 5: Adding a Start Script

Next, you'll need to add a start script to your package.json file. Open this file and find the "scripts" field. It should look something like this:


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

package.json

This tells npm how to start your application.

STEP 6: Running Your Application

Finally, you can run your Electron application with the following command:


npm start

This will start the Electron runtime and open a window with your web page displayed.

Start quickly with the ‘electron-quick-start’

the 'electron-quick-start' is a minimal Electron application that you can clone and get started with immediately.

Step 1: Clone the Quick Start Repository

First, you'll need to clone the repository from GitHub. Open your terminal and navigate to the location where you want to put the project, then run the following command:


git clone https://github.com/electron/electron-quick-start

Step 2: Navigate into the Project Directory

Change to the new electron-quick-start directory that was just created by the git clone command:


cd electron-quick-start

Step 3: Install the Dependencies

The project comes with a package.json file, so you just need to install the required dependencies using npm (Node Package Manager):


npm install

Step 4: Start the Application

Now you can start the application with the following command:


npm start

And you should see a new Electron window open with a basic application running. This application will simply display a web page that says "Hello World! This is the electron-quick-start application.”

From here, you can start modifying the main.js, renderer.js, and index.html files to develop your application. The main.js file is the entry point into your app and starts the main process. It creates a browser window with the webpage loaded from the index.html file. renderer.js is loaded into index.html and can use Node.js APIs and Electron APIs in addition to browser APIs.