Angular Desktop application with Firebase and Electron

We can create a Firebase project now. It’sfree.

Give your project a name and it will create a unique project id automatically. You can change this project id later if needed.

"angularfire2": "^5.0.0-rc.7",  
"firebase": "^5.0.2",  
"ngx-toastr": "^8.1.0"

We can add the remaining files one by one.

Please download the entire source code from Github and run npm install.

"styles": [  
   "src/styles/main.scss",  
   "node_modules/ngx-toastr/toastr.css"  
],

We will add the firebase database configurations to environment.prod.ts and environment.ts file.

We are controlling our CRUD operations in contact.service.ts (Inside \src\app\contacts\common folder)

contact.service.ts

import { Injectable } from '@angular/core';  
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';  
import { Contact } from './contact.model';  
@Injectable()  
export class ContactService {  
   contactList: AngularFireList<any>;  
   selectedContact: Contact = new Contact();  
   constructor(private firebase: AngularFireDatabase) { }  
   // Getting data from firebase db  
getData() {  
   this.contactList = this.firebase.list('contacts');  
   return this.contactList;  
}  
// Inserting data into firebase db  
insertContact(contact: Contact) {  
   this.contactList.push({  
   firstName: contact.firstName,  
   lastName: contact.lastName,  
   phone: contact.phone,  
   email: contact.email  
   });  
}  
// Updating data in firebase db  
updateContact(contact: Contact) {  
   this.contactList.update(contact.$key, {  
   firstName: contact.firstName,  
   lastName: contact.lastName,  
   phone: contact.phone,  
   email: contact.email  
   });  
}  
// Removing an item in firebase db  
removeContact($key: string) {  
   this.contactList.remove($key);  
   }  
}

We use three components in this app. Component, Components and ComponentList,

We can run the application now.

ng serve

Please note that it is very responsive, when we change the data in firebase console, it will immediately reflect in our app without refreshing. (like SignalR)

For creating an electron app, we must install electron and electron packager in our application.

Add package reference for electron and electron package in package.json and run npm install to install them.

We must modify the package.json with a main entry as below.

We are ready to run our electron app.

npm run electron-build

Our desktop application is ready and opened as below.