Tag: electron

Error with wrong API version of node module

~ admin ~ Leave a comment

Intro

Some npm packages are not pure javascript. If they have some kind of binary, these binaries have to be compiled against the right nodejs version; or else the ABI is wrong. There are precompiled binaries, but sometimes there aren’t or they doesn’t fit the version you need. Especially with electron, which maybe uses different versions…

Problem

Either way, this was the error message

Error: Cannot find module node_modules/sqlite3/lib/binding/node-v57-linux-x64/node_sqlite3.node

while there was a node_sqlite3.node, but in a different /binding subdirectory.

Solution

This stackoverflow post https://stackoverflow.com/a/39463304 has guided me to a package that can rebuild to the correct ABI used: https://github.com/electron/electron-rebuild

npm install –save-dev electron-rebuild
$(npm bin)/electron-rebuild

And that was another problem fixed. Thanks for reading!

How to start an Electron + Vue + Typescript project

~ admin ~ 3 Comments

Prelude

For a new, to be announced, project, I needed to combine some technologies I am not yet accustomed with.

GUI: I decided to write the GUI in Vue. Vue is a toolkit to write “modern” HTML/CSS/JS front-ends. Why not React you ask? Because be use Vue at work, and it cannot harm knowing it also a bit. Plus it is called beginnner-friendly and looks pretty similar to React.

Backend: Either a dedicated server, or something with integrated browser. I choose the latter, because I want to try Eclipse 🙂 Eclipse has an integrated Browser engine (Blink from the Chromium project), has APIs to interact with the desktop and can also run the “backend” part alongside the front-end.

Language: Typescript, because also want to try it 🙂

How to start an Electron + Vue + Typescript project

There were some problems in getting started, because the three projects evolved pretty rapidly in the last few months. Thus many posts or tutorials were already outdated, as well as popular templated like https://github.com/SimulatedGREG/electron-vue.

install Vue CLI

install Vue CLI with

$ npm install -g @vue/cli

create a new Project

create a Vue project with your project_name

$ vue create project_name

You can now choose between a default plugin preset, or choose manually the ones you need. You can always install missing plugins later, if you are unsure of your needs.

Vue CLI v3.5.5
? Please pick a preset: default (babel, eslint)

install plugin electron-builder

go to the project folder, and install electron-builder with

$ vue add electron-builder

add Typescript support

add typescript support

$ vue add @vue/typescript

That’s it!

you can now run the electron app via

$ npm run electron:serve

Have fun!