Build your own cross-platform desktop app using Electron

What is electron?
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. The framework uses front-end and back-end components developed for web applications to develop the desktop GUI applications. For front-end requirements, Chromium is used, while Node.js is for the backend. Electron does this by combining both Node.js and Chromium into a single runtime, and packages multi-platform apps.
Structure of an Electron App
Simplest of Electron apps consist with three main files.
- package.json : Important file in an Electron app. This file contains information about package like name, version, etc. and all other information regarding dependencies.
- main.js : Contain the main functions to run the Electron app.It responsible for creating the browser window, loading the index.html of the app and handle other browser actions.
- index.html : Graphical user interface.Can have multiple .html pages as per as need.
How Electron App Works

The Main Process — This is the entry point of the application. This is the file that will be executed once you run the app.
The Renderer Process — This is the controller for a given window in the application. Each window has its own Renderer process.
Create first Electron App
Electron itself provide a quick-start app.You can simply clone it and run the application.
# 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
$ npm install # Run the application
$ npm start
After cloning the application you will come up with three different files mentioned above and after run first application will look like this.You can customize this as you need according to your requirements.

Create TODO List Electron App
Now I am going to customize the above.Ill keep the package.json and main.js as the same and only I am going to do is use some javascript and css. First ill create my css and Ill keep it in a separate folder.
Then I modify the index.html.In here Ill link my css at the header section which kept separately.
You will come up with a working application like this.

You can find the full project on Github.
More about Electron from official site.
