Desktop Apps using Electron JS with centralized data control

  •        0

We aggregate and tag open source projects. We have collections of more than one million projects. Check out the projects section.

When there is a requirement for having local storage for the desktop application context and data needs to be synchronized to central database, we can think of Electron with PouchDB having CouchDB stack. Electron can be used for cross-platform desktop apps with pouch db as local storage. It can sync those data to centralized database CouchDB seamlessly so any point desktop apps can recover or persist the data.

In this article, we will go through of creation of desktop apps with ElectronJS, PouchDB and show the sync happens seamlessly with remote CouchDB.


Install node and npm latest release with latest distributions. Read the installation guide to install Node.


Build cross-platform desktop apps with Javascript, HTML and CSS with ElectronJS framework. Thanks to chromium rendering engine and nodejs runtime. ElectronJS source code available in github and it is licensed under MIT license. It has been widely used and testimonials like Slack, WhatsApp desktop application built with Electron framework.

ElectronJS can be installed easily through

   npm install --save-dev electron 


PouchDB is a Javascript DBMS with an API inspired by CouchDB. It is a schema free document store for local small storage. It has been developed by Apache Software foundation under Apache License 2.0 and available in github. It supports master-master and master-slave replication with eventual consistency.

It can be installed through npm packages or can be done by simply invoking

   npm install -g pouchdb
   git clone
   cd pouchdb
   npm install


CouchDB can be installed remotely as centralized document store. It will be used to authenticate and complete control of all the desktop data. PouchDB and CouchDB seamlessly replicate bi-directionally with Rest API protocol. It is developed by Apache software foundation and licensed under Apache-2.0 license. Source code is available in Github. The Couch Replication Protocol lets your data flow seamlessly between server clusters to mobile phones and web browsers, enabling a compelling offline-first user-experience while maintaining high performance and strong reliability. CouchDB comes with a developer-friendly query language, and optionally MapReduce for simple, efficient, and comprehensive data retrieval.

Installation will be straight walk through of the installation guide in the CouchDB site.

   sudo apt-get install -y apt-transport-https gnupg ca-certificates 
   echo "deb bionic main" | sudo tee -a /etc/apt/sources.list.d/couchdb.list
   sudo apt-key adv --keyserver --recv-keys 8756C4F765C9AC3CB6B85D62379CE192D401AB61
   sudo apt update
   sudo apt install -y couchdb

After installation, CouchDB can be opened in the browser using Using admin login and create a database as Employee DB.

Build Application

Create a nodejs application with "npm init" with user defined parameters and install Electron and PouchDB. So package.json will look as below

    "name": "firstelectron",
    "version": "0.1.0",
    "description": "first electron for quick start",
    "main": "main.js",
    "scripts": {
          "start": "electron main.js"
   "author": "nagappan subramanian",
   "license": "ISC",
   "devDependencies": {
       "electron": "^6.0.12",
       "pouchdb": "^7.1.1"
  "dependencies": {
      "electron-prebuilt": "^1.4.13",
       "pouchdb-browser": "^7.1.1",
       "pouchdb-find": "^7.1.1"

File: main.js

Create main.js file to open the html page in desktop native window.

 //import statements
 const { app, BrowserWindow } = require('electron')

 const path = require('path')

 const url = require('url')

 //global variables
 let win

function createWindow () {
    // Create the browser window.
     win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true

    // and load the index.html of the app.
         pathname: path.join(__dirname, 'index.html'),
         protocol: 'file:',
         slashes: true})


    win.on('closed', function(){
    win = null;


 app.on('ready', createWindow);

 app.on('window-all-closed', function(){
      //below is for macos to quit all the menu actions also
      if (process.platform!=='darwin') {

 app.on('activate', ()=> {
       //this is also for macos
    if (win==null) {


File: index.html

index.html file will have the display of employee list and it can be added using the add in header nav. Add happens by using input parameters through modal and add in the ui using the html template.

   meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="">
  <link rel="stylesheet" href=",300,400,500,700">
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="employeelist.css">
  <script src="node_modules/pouchdb/dist/pouchdb.min.js"></script>
  <script src="node_modules/pouchdb/dist/pouchdb.find.min.js"></script>
  <script src="employeelist.js"></script>
  <title>Organization CRM</title>
  <body onload="loadEmployees()">
  <header class="navbar-fixed">
  <nav id="nav" class="primary-color">
  <span id="header-title">Employee Directory</span>
  <button onclick="showAddModal()" class="actionBtnClass"><i class="material-icons">add</i></button>
  <button onclick="syncModal()" class="actionBtnClass"><i class="material-icons">sync</i></button>

    <div class="row">

 <!-- card template -->
  <template id="employeeCard">
  <div class="card" style="width: 18rem;">
    <img src="" class="card-img-top" alt="...">
    <a class="btn-floating waves-effect waves-light grey verticaltop" onclick="deleteEmployee(currEmpId)">
       <i class="material-icons">delete</i>
    <div class="card-body">
    <h5 class="card-title">Nagappan Subramanian</h5>
    <h4 class="card-title">Architect</h5>
    <p class="card-text contact"> XXXXX-X0494 | </p>

<!-- modal: add a shopping list form -->
<div class="modal">
  <form id="employee-list-add" class="col s12 white" onsubmit="saveEmployee(event);">
  <div class="modal-content">
  <h5>Add Employee</h5>
  <div class="row">
  <div class="input-field col s12">
     <input name="name" type="text" class="validate" placeholder="Name" required />
  <div class="input-field col s12">
     <input name="mailId" type="text" class="validate" placeholder="EmailId" required />
  <div class="input-field col s12">
     <input name="designation" type="text" class="validate" placeholder="Designation" required />
  <div class="input-field col s12">
    <input name="mobileno" type="text" class="validate" placeholder="Mobile Number" required />
<div class="modal-footer primary-color">
  <button class="btn-flat" type="button" onclick="closeModal()">Cancel</button>
  <button class="btn-flat" type="submit" >Add</button>

<!-- modal: overlay -->
<div class="modal-overlay" onclick="closeModal()"></div>
  <footer class="footerClass">

Employee list modal will create pouch db with remote async setup with CouchDB.

File: employeelist.modal.js

 var PouchDB = require('pouchdb-browser')

 var db = new PouchDB('employeedb')

 const remote_url = 'http://admin:admin@';

 db.sync(remote_url, {live: true}).on('change', function() {
    console.log("change happened");
 }).on('error', function(){
     console.log("error happened");

db.addEmployee = function (employeeObj) {
    employeeObj._id = new Date().toISOString();
    employeeObj.completed = false;
    db.put(employeeObj, function(err, result) {
    if (!err) {
      console.log("successfully add a employee");

module.exports = db;

Employee list having the handlers for add modal, delete employees and load employees.

File: employeelist.js

 const db = require('./employeelist.model.js')

 const remote_url = 'http://admin:admin@';

 const showAddModal = () => {
    let form = document.getElementById('employee-list-add')
    document.body.className += ' ' +

 const deleteEmployee = (empId) => {
    document.querySelector('main .row').innerHTML = '';
  }).catch(function(err) {

const loadEmployees = () => {
   include_docs: true,
 }).then(function(results) {
   let empObj = row.doc;
   let empTemplate = document.querySelector("#employeeCard");
   empTemplate.content.querySelector('h5').innerHTML =;
   if (empObj.designation !== '') {
       empTemplate.content.querySelector('h4').innerHTML = empObj.designation;

   if (empObj.mobileno !== '' && empObj.mailId !== '') {
         let contact = empObj.mobileno + '|' + empObj.mailId;
         empTemplate.content.querySelector('.contact').innerHTML = contact;
   empTemplate.content.querySelector('a').setAttribute("onclick", "deleteEmployee('" + empObj._id + "')");
      let clone = document.importNode(empTemplate.content, true);
      document.querySelector('main .row').appendChild(clone);

    console.log("not able to read the pouch db");

 const saveEmployee = (element) => {
 const elements =;
 const employeeObj = {};
 for (let i = 0; i < elements.length; i++) {
    if (elements[i].tagName.toLowerCase() !== 'button') {
    employeeObj[elements[i].name] = elements[i].value

const closeModal = () => {
   let classNames = document.body.className;
   document.body.className = classNames.replace('employee-list-add', '');;

The App demo is available in the below video.



Source code:



Nagappan is a techie-geek and a full-stack senior developer having 10+ years of experience in both front-end and back-end. He has experience on front-end web technologies like HTML, CSS, JAVASCRIPT, Angular and expert in Java and related frameworks like Spring, Struts, EJB and RESTEasy framework. He hold bachelors degree in computer science and he is very passionate in learning new technologies.

Subscribe to our newsletter.

We will send mail once in a week about latest updates on open source tools and technologies. subscribe our newsletter

Related Articles

Electron JS- Native capabilities

  • electronjs electron desktop-app

Electron is an open source library to build native applications which also works as cross-platform desktop applications. It provision operating system functionalities with help of node integration. In this article, we will go through how to access the Operating System variables, Inter system communication, System dialog, Access files, folders also their statistics.

Read More

Angular Service Workers Usage Guide

  • angular service-worker offline-app

Web developers come across scenarios like web application completely breaks when workstation goes offline. Likewise to get into our application, every time we need to open a browser and then access it. Instead if it is in app, it will be easy to access for end-user. Push notifications similar to email client need to be done through web application. All these are addressed by a magic called service worker.

Read More

Build Consulting Website using Next.js

  • react nextjs website-development ssr

One of the popular web framework for building Single page application (SPA) or static site is React library. Application built with React packages will be rendered completely on the client side browser. If you want to reduce the load on client side browser, we need to pre-render the pages in server (Serer side rendering) and serve it to the client. So the client loads the page like simple html page. Also if the pages are rendered from server then search engine will be able to fetch and extract the pages. To do SSR for React, the best abstraction framework is Next.js. In this blog, we will explain how to build a simple consulting website using NextJS.

Read More

Getting Started on Angular 7

  • angular ui-ux front-end-framework

Angular is a platform for building responsive web, native desktop and native mobile applications. Angular client applications are built using HTML, CSS and Typescript. Typescript is a typed superset of Javascript that compiles to plain Javascript. Angular core and optional modules are built using Typescript. Code has been licensed as MIT License.

Read More

Best open source Text Editors

  • text-editor editor tools dev-tools

Text editors are mainly used by programmers and developers for manipulating plain text source code, editing configuration files or preparing documentation and even viewing error logs. Text editors is a piece of software which enables to create, modify and delete files that a programmer is using while creating website or mobile app.In this article, we will discuss about top 7 all-round performing text editors which is highly supportive for programmers.

Read More

COVID19 Stats using Angular Material Design

  • angular material-design covid covid-stats

Material design is inspired from the real world building architecture language. It is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products. In this article, we will build COVID stats using Angular Material design.

Read More

Push Notifications using Angular

  • angular push-notifications notifications

Notifications is a message pushed to user's device passively. Browser supports notifications and push API that allows to send message asynchronously to the user. Messages are sent with the help of service workers, it runs as background tasks to receive and relay the messages to the desktop if the application is not opened. It uses web push protocol to register the server and send message to the application. Once user opt-in for the updates, it is effective way of re-engaging users with customized content.

Read More

Laravel eCommerce Platform - Bagisto

  • ecommerce shopping laravel php

Nowadays on the web, Shopping is one of the most popular activities. Everyone can shop at their recess, anytime from anywhere. However, this is interesting that anyone can have their pages built to display their favourite products and services.

Read More

New Open Source Web Browser Engine from Google and Mozilla

  • browser browser-engine

Web Browser engine used to render the page from HTML, CSS and Javascript. The browsers are one of the most important tool to view the web and it is must have software in Desktop and Mobile. These new browsers will take advantage of tomorrow’s faster, multi-core, heterogeneous computing desktop and mobile architectures.

Read More

Univention Corporate Server - An open source identity management system

  • ucs identity-management-system

Univention Corporate Server is an open source identity management system, an IT infrastructure and device management solution and an extensible platform with a store-like App Center that includes tested third party applications and further UCS components: This is what Univention combines in their main product Univention Corporate Server, a Debian GNU/Linux based enterprise distribution. This article provides you the overview of Univention Corporate Server, its feature and installation.

Read More

Laravel Paypal Integration - Smart button with server-side integration

  • laravel paypal smart-button

You would have seen a lot of blogs for paypal php integration with REST api which is driven completely in the backend. For checkout, paypal provides an easy way to checkout for client side ready-to-use smart button payment. This approach will work only from the frontend, which will not be safe and difficult to reconcile as the backend does not have any information about it. Server side integration with the paypal smart button will help us to reconcile or track the payments even after some issues in the users payment journey. In this blog, we have walkthrough the paypal smart button with server side php laravel integration.

Read More

ONLYOFFICE Document Server, an online office app for Nextcloud and ownCloud

  • office office-suite word spreadsheet

ONLYOFFICE Document Server is a free collaborative online office suite including viewers and editors for texts, spreadsheets and presentations, fully compatible with Office Open XML formats (.docx, .xlsx, .pptx). This article provides you the overview of ONLYOFFICE Document Server, its features, installation and integration with Nextcloud and ownCloud.

Read More

Build Simple Ecommerce site using React and Jotai

  • ecommerce react jotai

Retail Ecommerce website can be created quickly with React. It can be created using React, Bootstrap, React DOM and Jotai. Data flow within the commerce site is done using Jotai in a light-weight manner. The main workflow of showing all the items in the gallery to user and user adding to the cart will be done as part of this blog.

Read More

LucidWorks Vs SearchBlox - Enterprise Search Solution

  • lucene solr searchblox lucidworks enterprise-search

Enterprise search software should be capable to search the data available in the entire organization or personnel desktop. The data could be in File system, Web or in Database. It should search contents of Emails, file formats like doc, xls, ppt, pdf and lot more. There are many commercial products available but LucidWorks and SearchBlox are best and free.

Read More

Quick Start Programming Guide for redis using java client Jedis

  • redis jedis redis-client programming database java

Redis is an open source (BSD licensed), in-memory data structure store, used also as a database cache and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs, geospatial indexes with radius queries and streams. This article explains about how to communicate with Redis using Java client Jedis.

Read More

Top 3 color quantization algorithms

  • color-optimization color-quantization algorithm

I have been writing on the desktop image processing application. At the version 1.0, I use the octree color quantization algorithm to reduce image to 256 colors, which is highly memory efficient with each pixel assigned the color at the center of the octree bin in which it falls. On the other hand, generates the palette using the distribution of colors in the image, but it does not consider the frequency of color. This means that if an image is composed of similar colors overall but has many different low-frequency colors or noise, octree's results can be very poor.

Read More

JHipster - Generate simple web application code using Spring Boot and Angular

  • jhipster spring-boot angular web-application

JHipster is one of the full-stack web app development platform to generate, develop and deploy. It provides the front end technologies options of React, Angular, Vue mixed with bootstrap and font awesome icons. Last released version is JHipster 6.0.1. It is licensed under Apache 2 license.

Read More

Getting Started With Django Python Web Framework

  • django python web-framework

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. It is pre-loaded with user authentication, content administration, site maps, RSS feeds and many more tasks. Security features provided are cross site scripting (XSS) protection, cross site request forgery protection, SQL injection protection, click-jacking protection, host header validation, session security and so on. It also provides in built caching framework.

Read More

An introduction to web cache proxy server - nuster

  • web-cache proxy-server load-balancer

Nuster is a simple yet powerful web caching proxy server based on HAProxy. It is 100% compatible with HAProxy, and takes full advantage of the ACL functionality of HAProxy to provide fine-grained caching policy based on the content of request, response or server status. This article gives an overview of nuster - web cache proxy server, its installation and few examples of how to use it.

Read More

Angular Security - Authentication Service

  • angular security authentication jwt

Angular is a framework for creating single page web application. Angular facilitates the security feature and protection mechanism. It provides frameworks by verifying all the routing urls with security authguard interface to validate and verify the user and its permissions.

Read More

We have large collection of open source products. Follow the tags from Tag Cloud >>

Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.