Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Build Desktop Apps Using Electron: The Beginner’s Guide

DZone's Guide to

Build Desktop Apps Using Electron: The Beginner’s Guide

Learn how to use this framework for creating cross-platform applications, and get your app up and running with JavaScript and JSON.

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Electron is a framework for building cross-platform desktop applications using Node.js and Chromium. Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.

Installing Electron

Before installing electron, make sure that you have installed Node.js on your computer. If you have not installed it already, get the installer from here. Note that this installs npm as well for you. Once the installation is complete, you can confirm that Node and npm are installed by running the following commands in your terminal.

Screen Shot 2017-06-18 at 20.29.09

Install Electron globally by running the following command in the terminal.

npm install -g electron

Tip: If the installation stops on “node install.js” when you try the above command, it means that it is still downloading the Electron package. If you wish to see the progress of the download, type the following command to install Electron.

npm install electron –verbose

You can confirm that Electron is installed by running the following command.

electron -v

Main and Renderer Processes

The main process creates web pages by creating BrowserWindow instances. As the name suggests, the BrowserWindow class gives you the ability to create a browser window.

Each BrowserWindow instance runs the web page in its own renderer process. When a BrowserWindow instance is destroyed, the corresponding renderer process is also terminated.

The main process manages all the renderer processes. Each renderer process is isolated and only cares about the web page running in it.

File Structure

The Electron app mainly requires three files: package.json, main.js, and index.html. The folder structure would be as follows:

electron-app/

  • index.html
  • main.js
  • package.json

Creating Your First Electron App

Create a project folder and let’s create a package.json file. Navigate to the project folder in the terminal and type the following command:

npm init

You will be asked for the following information. Enter main.js in the “entry point” and your name in the “author name” fields. Other fields can be skipped by pressing return.

Screen Shot 2017-06-15 at 11.35.58

Now, create main.js and index.html files in your project folder. Add the following code in main.js file.

const {
    app,
    BrowserWindow
} = require("electron");

const url = require("url");

const path = require("path");

let win;

app.on("ready", function() {

    win = new BrowserWindow({
        width: 400,
        height: 400
    });

    win.loadURL(url.format({

        pathname: path.join("Path to your project folder directory", "index.html"),

        protocol: "file:",

        slashes: true

    }));

});

Add some header and text in your index.html file.

Running Your App

Make sure to navigate to your project directory in the terminal. Type the following command:

electron.

We can also run the app by adding following the script in our package.json file.

"scripts": {

"start": "electron."

}

Then run the following command in the terminal:

npm start

The app should look something like this:

Screen Shot 2017-06-18 at 21.22.23

Wrapping Up

Electron offers a way to create desktop applications with the web technologies that we already know without the need to learn new languages that are specific to operating systems. It also includes automatic app updates, Windows installers, other useful native app features that are exposed through JavaScript APIs.

Read the official Electron documentation for more information and also ways to distribute your application.

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
web dev ,electron ,javascript ,json ,cross-platform app development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}