Laur IVAN

Consistent Testing
electron-settings

Posted by in Software, Tutorial

TL;DR: Delete the settings file before starting the test. Today I implemented a simple wrapper over the electron-settings functionality to gibe me access to a set of properties via get/set methods. My scenario is simple: I have a property named path.backup and I want to be able to get, set andtest it’s set`. The code is:

Now, my testing code would be something along the lines:

And I was surprised to find the test failed in the second part (can detect it has source paths). Consistently. Then, I…read more

Make Electron Work with Sqlite3

Posted by in Software, Tutorial

The other day I tried to integrate knex with a SQLITE3 back-end. Unfortunately, the instant I’ve tried to instantiate knex, I’ve got a lot of errors. After getting rid of them, I found that I can’t get sqlite3 to work at all, even though I’ve checked the installation and it was OK (got the binary downloaded and even rebuilt it). Uncaught Error: Cannot find module ‘/…/node_modules/sqlite3/lib/binding/node-v51-darwin-x64/node_sqlite3.node’ So, here are the steps that I did to make it work: install electron-rebuild

install sqlite3 using npm

rebuild electron with sqlite3….read more

Make Electron work with Knex.js

Posted by in Software, Tutorial

To make my life easier (and because I hate writing SQL statements), I thought of installing an ORM. After some search, I’ve decided to use knex. Unfortunately, the moment I integrated it into my app, webpack started generating errors like: ERROR in ./~/knex/lib/dialects/maria/index.js Module not found: Error: Can’t resolve ‘mariasql’ in ‘/…/node_modules/knex/lib/dialects/maria’ @ ./~/knex/lib/dialects/maria/index.js 59:11-30 @ ./~/knex/lib/dialects ^\.\/.*\/index\.js$ @ ./~/knex/lib/index.js @ ./~/knex/knex.js @ ./src/main.ts and warnings like: WARNING in ./~/knex/lib/seed/index.js 150:11 Critical dependency: the request of a dependency is an expression Not nice! To get rid of the errors I…read more

Electron App
Send Menu Command to Angular App

Posted by in Software, Tutorial

TL;DR: In the main process use mainWindow.webContents.send(‘cmd’) and in your Angular component (renderer process) bind it to a method with ipcRenderer.on(‘cmd’, this.open.bind(this)) (where open() is a method). I need to make my angular app work when a menu item is clicked (think: I click on “Open” and my angular app needs to perform the actual operation). The problem I’ve encountered is the menu actions happen in the main process while my angular code lives in the renderer process. Thus, I need to make the two communicate :) In my main…read more

Electron and WebPack – Live Reloads

Posted by in Software, Tutorial

I wanted to create a skeleton with Electron, Angular 2, capable of live reload while in development. I’ve settled on the following framework: Electron (d’oh!) Angular 2 Angular CLI (because it makes it easy to generate boilerplate code) SASS (SCSS in fact) Webpack 2 and Babel After a lot of trial and error (and also scouring the internet for solutions), I think I reached a nice-ish solution. Following articles outline the steps and functionalities I implemented. Why angular-cli Is it alive? Use SCSS, Luke! Adding Webpack Electron-ize Send Menu Command…read more

Electron App
. Why angular-cli?

Posted by in Software, Tutorial

The decision has been made for me since I’m new to Angular in general and the CLI offers a package deal particularly where code generation and initial package management is concerned. There’s also the boon of webpack, which is used as engine. Although the balance tilts heavily in favour of using angular-cli, this package also has a bunch of flaws, apparent to me also because of the end target: No multiple webpack configs. Angular CLI only has an optimised configuration and doesn’t expose hooks to be able to alter it…read more

Debug Electron in VS Code

Posted by in Software

TL;DR: You need to follow the server (electron) client (VS code debugger) approach. Be aware of OS specifics! So far, my approach towards development/debugging would be to write some code, test it, rewrite, test… all with a bunch of console.log() statements. That’s not efficient at all and since VS code has debugging capabilities, I’ve decided to find out how. First, when you enter the debug mode, you’re presented with a default configuration containing of two parts: A launch part – designed to launch your application An attach part – designed…read more

Rise and Fall of WebPack Dev Server in My Project

Posted by in Software

Disclaimer: This is a log of my journey developing an electron app. I’m working at a small electron app and I was experimenting with webpack-dev-server, so I can try to do live reloads. First, I’ve started the app as a web app (no electron dependencies whatsoever). At this stage, running:

off npm run would allow me to load and reload every time I did a change. Perfect solution I thought and I started to add electron via a simple app. The idea was to load the scripts off a…read more