An Electron application is (basically) a web app packaged with a (slightly old) version of
the Chrome browser ...
The Electron application has a copy of the Node.js runtime, which allows you to do many
of the things that a native desktop application can do, but which the security model
of a web browser doesn't allow you to do, including accessing local files,
integrating at a lower level with the Operating System.
- Install stuff:
# if you don't have Node.js, install that
sudo npm install -g @angular/cli@latest
# got "skipping optional dependency fsevents"
# apparently fsevents is for running on OSX
ng --version
# 3/2019: I got "Angular CLI: 7.3.5"
sudo npm install -g typescript
# 3/2019: got "typescript@3.3.3333"
sudo npm install -g electron --unsafe-perm=true --allow-root
# 3/2019: got "electron@4.0.8"
# Name of new app can not have any uppercase letters in it !
# cd to place where you want app dir to be created, and:
ng new matrix-dashboard
# Asked "Would you like to add Angular routing ?"
# This allows user to follow URL links to different parts
# of the one page of your single-page application
# I answered "no"
# Asked "Which stylesheet format ?"
# I picked the default, CSS.
cd matrix-dashboard
# (I didn't realize that ng-bootstrap and ngx-bootstrap
# are different things. Having installed ng-bootstrap,
# I'll stick with it.)
ng add @ng-bootstrap/schematics
# see warnings about peers of jquery and popper not found
# ignore the warnings
# You don't need jQuery / popper to use ng-bootstrap and
# you shouldn't install those manually
# I also saw warnings about peers of angular/common and
# /core and /forms not found. Sounds fatal. But online,
# someone says as long as the installed version of Angular
# is higher than the version in the warning, no problem.
# start development server
ng serve
# saw messages that server is up and compile succeeded
# now app is accessible on http://localhost:4200/
# go there in browser, see default Angular app
# back to CLI window, ctrl-C to kill server
# add electron as a dev dependency
npm i -D electron
# 3/2019: got electron 4.0.8
npm i -D @types/electron
mkdir dist
mkdir dist/matrix-dashboard
# edit tsconfig.json file to add first line:
# /* angular tsconfig.json */
# edit package.json file to add first component:
# "comment": "angular package.json file",
mkdir electron
cd electron
mkdir dist
mkdir dist/matrix-dashboard
Directory structure that resulted:
matrix-dashboard/
angular json files
do "ng build" when in this dir
dist/
matrix-dashboard/
app's angular HTML, JS files
e2e/
end-to-end tests
node-modules/
bootstrap
CSS, JS files
@ng-bootstrap/
JS files
src/
angular CSS, TS, HTML, JSON files
app/
app's CSS, TS, HTML files
electron/
TS, JSON files
dist/
So, some trickiness going on here:
- Build and run Angular web-app:
# cd to main matrix-dashboard/ dir
ng serve
ng generate service file # one-time thing to add a service
ng build
# go to http://localhost:4200/ to see Angular web app running
# page HTML source is src/app/app.component.html
# ctrl-C to kill Angular server
Structure of the Angular application:
Places errors could be flagged/shown:
- Get electron desktop-app going:
Create electron/index.html file:
<html>
<head>
<title>Matrix Dashboard</title>
</head>
<body>
Hello
</body>
</html>
Create electron/tsconfig.json file:
/* electron tsconfig.json */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist",
"sourceMap": true,
"declaration": false,
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": ["../node_modules/@types"],
"lib": ["es2018", "dom"]
}
}
Create electron/main.ts file:
import { app, BrowserWindow } from "electron";
//import { Injectable } from "@angular/core";
//import { ipcMain, IpcRenderer } from "electron";
import * as path from "path";
import * as url from "url";
let win: BrowserWindow;
app.on("ready", createWindow);
app.on("activate", () => {
if (win === null) {
createWindow();
}
});
/*
ipcMain.on("getFiles", (event, arg) => {
const files = fs.readdirSync(__dirname);
win.webContents.send("getFilesResponse", files);
});
*/
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL(
url.format({
pathname: path.join(__dirname, `/../../dist/matrix-dashboard/index.html`),
protocol: "file:",
slashes: true
})
);
//win.webContents.openDevTools();
win.on("closed", () => {
win = null;
});
}
Create electron/package.json file (I added the comment):
{
"comment": "electron package.json file",
"name": "matrix-dashboard",
"version": "0.0.0",
"main": "electron/dist/main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "ng build --base-href ./ && tsc --p . && electron ."
}
}
Build and run electron desktop-app:
cd electron/
npm run electron
# see desktop app window appear !
- Now to use Bootstrap:
Edit Angular's src/styles.css file to add line:
@import "../node_modules/bootstrap/dist/css/bootstrap.css"
Edit src/app/app.component.html file to add:
a bootstrap thing:<br />
<select multiple data-role="tagsinput">
<option value="Amsterdam">Amsterdam</option>
<option value="Washington">Washington</option>
<option value="Sydney">Sydney</option>
<option value="Beijing">Beijing</option>
<option value="Cairo">Cairo</option>
</select>
Build and run Angular web-app:
# cd to main matrix-dashboard/ dir
ng serve
# go to http://localhost:4200/
# see Angular web app running with bootstrap-CSS-influenced "select" in page
Build and run electron desktop-app:
cd electron/
npm run electron
# see new "select" appear in desktop app window
- Now to use ng-bootstrap:
Let's try a simple example widget:
Rating.
Edit src/app/app.component.html file to add:
an ng-bootstrap thing:<br />
<ngb-rating rate="2"></ngb-rating>
Edit src/app/app.module.ts file to add lines:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
// in imports, after BrowserModule:
NgbModule.forRoot()
Build and run Angular web-app:
# cd to main matrix-dashboard/ dir
ng serve
# go to http://localhost:4200/
# see Angular web app running with new widget in page
# ctrl-C to kill Angular server
Edward Jackson's "Debugging Angular CLI Applications in Visual Studio Code"
Build and run electron desktop-app:
cd electron/
npm run electron
# see new widget appear in desktop app window
- Add a new app component that uses ng-bootstrap:
Create src/app/rating-basic.html file containing:
<ngb-rating [(rate)]="currentRate"></ngb-rating>
<br />
<pre>Rate: <b>{{currentRate}}</b></pre>
Create src/app/rating-basic.ts file containing:
import {Component} from '@angular/core';
@Component({
selector: 'ngbd-rating-basic',
templateUrl: './rating-basic.html'
})
export class NgbdRatingBasic {
currentRate = 8;
}
Edit src/app/app.component.html file to add:
app component that references an ng-bootstrap thing:<br />
<ngbd-rating-basic></ngbd-rating-basic>
Edit src/app/app.module.ts file to add lines:
import { NgbdRatingBasic } from './rating-basic';
// in declarations:
NgbdRatingBasic
Build and run Angular web-app:
# cd to main matrix-dashboard/ dir
ng serve
# go to http://localhost:4200/
# see Angular web app running with new widget in page
# ctrl-C to kill Angular server
Edward Jackson's "Debugging Angular CLI Applications in Visual Studio Code"
Build and run electron desktop-app:
cd electron/
npm run electron
# see new widget appear in desktop app window
- Add database connection:
Angular can do HTTP requests, and SQL databases can provide RESTful APIs,
where they accept HTTP requests to do operations.
I wanted to use Node's sql.js module and a local SQLite database, following
patrickmoffitt / local-sqlite-example.
But Angular is in a browser client with no access to filesystem.
And the sql.js module throws errors when added to a TypeScript project.
There used to be an Angular "http" module, but it's been replaced
by an "HttpClient" module.
Started looking into client/server components:
Then someone said just use IndexedDB, a database inside the browser.
A complication for me: often there will be
two browser profiles,
one for daily use and one for web-app testing use. Probably
this app will have to "live" in the testing profile.
MDN's "IndexedDB API
MDN's "Browser storage limits and eviction criteria
Wikipedia's "Web storage"
Works on Firefox, Chrome, Opera.
Data-size limits not a problem for my app.
How to backup or copy to another machine ? On Firefox, the DB is under "<profile>/storage/permanent".
Or I could create export and import features into my app.
But I see some statements:
"IndexedDB is a document-oriented database while SQL is relational database ...
Avoid using multiple tables in IndexedDB and trying to create joins."
"SQL is relational database. IndexedDB is an indexed key/value store similar to a document-oriented database."
Wrapper libraries, or DB engines that use IndexdDB for storage:
SQL-like interface:
AlaSQL (SQL-like interface)
Object interface:
JsStore
Dexie.js
NanoSQL
Lovefield
Firefox uses SQLite to store IndexedDB data, and there's an API directly to SQLite ? Confusing.
Mozilla's "Performance/Avoid SQLite In Your Next Firefox Feature"
Decided to use AlaSQL.
The AlaSQL Wiki
Whoops, better design my database schema first:
| Table Name |
Row Fields |
Example |
| projects: |
project_id, project_name |
Project1 |
| appareas: |
apparea_id, project_id, apparea_name |
Standard |
| appfunctions: |
appfunction_id, project_id, apparea_id, appfunction_name |
Login |
| activities: |
activity_id, project_id, activity_name |
Learn app |
| cells: |
cell_id, project_id, appfunction_id, activity_id |
Learn app / Login |
| tools: |
tool_id, tool_name, tool_path_type, tool_path |
Burp Suite |
| celltools: |
celltool_id, cell_id, tool_id |
Learn app / Login / use Burp Suite |
| cellapppaths: |
cellapppath_id, cell_id, path_name, path_type, path |
app.com/login.html |
| celldocs: |
celldoc_id, cell_id, doctype, docpath |
app.com/howtologin.md |
| roles: |
role_id, role_name |
Admin |
| devicetypes: |
devicetype_id, devicetype_name |
PC |
| ostypes: |
ostype_id, ostype_name |
Windows |
| browsertypes: |
browsertype_id, browsertype_name |
Firefox |
Before I changed to AlaSQL, I started to do:
SQLite Home Page
Create a new file mdschema.sql:
CREATE TABLE "projects" (
"project_id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"project_name" TEXT(255,0) NOT NULL
);
CREATE INDEX "project_name_index" ON projects ("project_name" COLLATE NOCASE ASC);
INSERT INTO `projects` VALUES
(NULL, "Default");
CREATE TABLE "appareas" (
"apparea_id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"project_id" INTEGER NOT NULL,
FOREIGN KEY(project_id) REFERENCES projects(project_id),
"apparea_name" TEXT(255,0) NOT NULL
);
CREATE INDEX "apparea_name_index" ON appareas ("apparea_name" COLLATE NOCASE ASC);
INSERT INTO `appareas` VALUES
(NULL, (SELECT project_id FROM projects WHERE project_name = "Default"), "Standard");
npm install alasql
# gave "3 vulnerabilities found"
Create a new file mdsql.ts (only partial code shown):
import alasql from 'alasql';
...
alasql("SET AUTOCOMMIT ON");
alasql("DROP localStorage DATABASE matrixdashboard");
alasql("CREATE localStorage DATABASE matrixdashboard");
alasql("ATTACH localStorage DATABASE matrixdashboard AS matrixdashboard");
alasql("USE matrixdashboard");
...
var res = alasql('CREATE TABLE projects ( \
project_id INT NOT NULL PRIMARY KEY AUTOINCREMENT, \
project_name TEXT(255,0) NOT NULL \
)');
...
var res = alasql('INSERT INTO projects (?,?)',[0,new_project_name]);
...
var res = alasql("SELECT * FROM projects WHERE project_id=" + project_id);
...
var res = alasql('CREATE TABLE appareas ( \
apparea_id INT NOT NULL PRIMARY KEY AUTOINCREMENT, \
project_id INT REFERENCES projects(project_id), \
apparea_name TEXT(255,0) NOT NULL \
)');
Every time I start up "ng serve", the very first compile fails
with "alasql no default export". Change the source in some tiny way,
recompiles, the compile sucseeds, while STILL saying "alasql no default export".
Got things working, creating a database, using it, closing it, opening it.
But when I quit out of Firefox and launched it again, the database was gone.
Messed around in FF's storage settings, ended up clearing all storage,
and that destroyed everything ! Anything I do in alasql gives
"There is no any AlaSQL databases in localStorage" error message.
Restarted "ng serve" and FF, tried loads of code combinations,
always get that error. Gave up and filed a bug report on GitHub.
An hour later, situation on my machine is fixed. Maybe I forgot to try just
starting with a CREATE after it got into this state ? I quit everything,
did "npm remove alasql", then "npm install alasql", DROP still gave the
error if it was the first operation, but CREATE as first operation worked.
And now the database is persistent across quit/relaunch of Firefox, too.
I must have gotten the storage into some weird state or something.
Tried building in Electron, and that "alasql no default export" error made the build fail every time.
Back to Angular, and tried to eliminate it. Tried all kinds of variations
of the import statement in mdsql.ts and the declare/export statements in
node_modules/alasql/dist/alasql.d.ts, but no luck.
Then started looking at compiler options, and found something. Added
"allowSyntheticDefaultImports": true
to src/tsconfig.app.json, and that killed the error, but caused uses of
"alasql.databases.*" to fail (can import using either
"import alasql from 'alasql';" or "import * as alaSQLSpace from 'alasql';",
same behavior with either). I can do without "alasql.databases.*", I think. Holding my
breath to see if anything else breaks. Build and run in Electron works.
Started wiring the database further into my app. Reached a point where I was
beating my head against a problem for half an hour, finally noticed
compile-time errors from "ng serve", and realized it was using an old copy
of one of the source files. Restarted it and app worked.
Also, if you change a JSON config file, best to kill "ng serve" and restart it.
Built in electron, and app fails with "alasql.min.js: It looks like you
are using the browser version of AlaSQL. Please use the alasql.fs.js file instead.".
Tried adding following to electron/package.json file, later (without "../") in angular.json file, but no change:
"fileReplacements": [
{
"replace": "../node_modules/alasql/dist/alasql.min.js",
"with": "../node_modules/alasql/dist/alasql.fs.js"
}
],
In the app under electron, select View/ToggleDeveloperTools menu item (or ctrl-shift-I)
to see console log and errors.
Got the app to run, despite the "alasql.fs.js" error message.
And got another message in the console:
"This window has node integration enabled by default. In Electron 5.0.0,
node integration will be disabled by default. To prepare for this change,
set {nodeIntegration: true} in the webPreferences for this window ...".
Fixed it; in electron/main.ts, change:
win = new BrowserWindow({ width: 800, height: 600 });
to:
win = new BrowserWindow({ width: 800, height: 600, webPreferences: {nodeIntegration: true} });
Hey, the database is persistent under Electron ! I was trying to get
to that point. I don't see where it's being stored, though; no new
files have popped up in the development tree, that I can see. I thought
it would not be persistent, because Electron provides a fresh copy of
Chromium engine every time it starts ?
Later, found out my database keys are not auto-incrementing. Strange.
Looking in Github, found this issue was reported over 3 years ago and
still not fixed. Bummer. And still seeing occasional hiccups where
AlaSQL gives errors opening the database or a table of it.
Decided to switch from AlaSQL to Dexie.
npm remove alasql
Later was told "Please remember that any interaction with localstorage
is async, so you risk running into problems if you don't handle the
async behavour. I recommend the promise notation from
Async"
So probably I was doing that wrong.
- Switch to Dexie:
npm install dexie --save
npm install webpack -g
Took a few hours to get things to compile, had to rework various constructors
and such. And then started the battle with Promises; I like synchronous
code, but for this I have to use asynchronous.
Took a while just to get
opening the database to work properly. Then I had to rework the
code a couple of times to get Promises working and data going in and out.
Then I still ended up with startup not working: NgInit() requests all
the data, but then the HTML code executes before the data has arrived,
blowing up everything. Consulting with people online, and they're saying
I have to learn about more Angular things, resolvers and services and such.
Beginning to think I shouldn't use Angular.
Yes, the more they explain "reactive programming" to me, the more I think
I want nothing to do with it. I'll have to try a different approach.
