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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

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

Published at DZone with permission of Swathi Prasad, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}