Electron First App - Step By Step

Electron 1.0

Electron is used to Build cross platform desktop apps with JavaScript, HTML, and CSS. For the last two years, Electron has helped developers build cross platform desktop apps using HTML, CSS, and JavaScript.

If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

Electron uses Chromium and Node.js so you can build your app with HTML, CSS, and JavaScript.

To get started with Electron, check out the resources below.

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

Or dive deeper and read the documentation.

Steps For Creating First App :

First Goto https://nodejs.org/en/ and Dowload it.

Main Process

In Electron, the process that runs package.json’s main script is called the main process. The script that runs in the main process can display a GUI by creating web pages.

Rendered Process

Since Electron uses Chromium for displaying web pages, Chromium’s multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process.
In normal browsers, web pages usually run in a sandboxed environment and are not allowed access to native resources. Electron users, however, have the power to use Node.js APIs in web pages allowing lower level operating system interactions.

Differences Between Main Process and Rendered Process

The main process creates web pages by creating BrowserWindow instances. 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 web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it.
In web pages, calling native GUI related APIs is not allowed because managing native GUI resources in web pages is very dangerous and it is easy to leak resources. If you want to perform GUI operations in a web page, the renderer process of the web page must communicate with the main process to request that the main process perform those operations.
In Electron, we have several ways to communicate between the main process and renderer processes. Like ipcRenderer and ipcMain modules for sending messages, and the remote module for RPC style communication. There is also an FAQ entry on how to share data between web pages.

Installation

Note As of version 1.3.1, this package is published to npm under two names: electron and electron-prebuilt. You can currently use either name, but electron is recommended, as the electron-prebuilt name is deprecated, and will only be published until the end of 2016.
Download and install the latest build of Electron for your OS and add it to your project's package.json as a devDependency:


$ npm install electron --save-dev

This is the preferred way to use Electron, as it doesn't require users to install Electron globally.
You can also use the -g flag (global) to symlink it into your PATH:


$ npm install -g electron

If that command fails with an EACCESS error you may have to run it again with sudo:


$ sudo npm install -g electron

Now you can just run electron to run electron: electron
If you need to use an HTTP proxy you can set these environment variables.
If you want to change the architecture that is downloaded (e.g., ia32 on an x64 machine), you can use the --arch flag with npm install or set the npm_config_arch environment variable:


$ npm install --arch=ia32 electron

Desani Info-Corp