SBCX-TN-007: Enabling node.js and electron.js for creating Javascript applications

Info Box Applies to Axel Ultra Applies to AXEL ESATTA Applies to Axel Lite Applies to AXEL Lite Technical Notes Applies to SMARX Technical Notes Applies to SBC AXEL Applies to SBC Axel Technical Notes

This technical note was validated against specific versions of hardware and software. It may not work with other versions.

History

Version	Date	Notes
1.0.0	July 2020	First public release

Introduction

Nowadays several designs are based on latest Javascript technologies available for implementing advanced (Industrial) Graphical User Interface in a easy way.

This Technical Note illustrates how to use the SBC Axel (SBCX for short) for installing the well known node.js runtime and the electron.js application framework.

Both node.js and electron.js allows to create desktop applications in JavaScript, HTML, and CSS.

Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.

(rif. electron tutorial)

More information about electron can be found on its web site. It is useful to follow the Quick start guide and the complete documentation.

Testbed configuration

Regarding the hardware, the testbed used for this Technical Note (TN) consists of an SBCX single-board computer equipped with a quad-core i.MX6Q system-on-chip (SoC).

For what concerns software, the following configuration was used:

• Linux kernel: 4.14.98-xelk-5.0.0 (see XELK 5.0.0)
• Yocto Sumo root file system

Installation

node.js

The node.js runtime environment can be easily installed using its Node Version Manager.

The nvm package manager allows to install multiple node instances and manage them. It is possibile to install the package manager simply cloning its git repository in the following way:

Cloning nvm git repository

Just properly configure the environment and start the git clone:

export NVM_DIR="$HOME/.nvm" && (
  git clone https://github.com/nvm-sh/nvm.git "$NVM_DIR"
  cd "$NVM_DIR"
  git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" $(git rev-list --tags --max-count=1)`
) && \. "$NVM_DIR/nvm.sh"

Once installed, it should be enough to setup nvm adding to your ~/.profile the following lines:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Installing node.js

Once nvm is installed, simply ask it for installing the latest LTS version of node.js:

root@imx6qdlxelk:~# nvm install --lts
Installing latest LTS version.
Downloading and installing node v12.17.0...
Downloading https://nodejs.org/dist/v12.17.0/node-v12.17.0-linux-armv7l.tar.gz...
####################################################################################################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v12.17.0 (npm v6.14.4)
Creating default alias: default -> lts/* (-> v12.17.0)
root@imx6qdlxelk:~# 

electron.js

Then, using npm, it is possible to install the electron framework, just execute the following command:

root@imx6qdlxelk:~# npm install -g electron@6.1.5 --unsafe-perm=true
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
/home/root/.nvm/versions/node/v12.17.0/bin/electron -> /home/root/.nvm/versions/node/v12.17.0/lib/node_modules/electron/cli.js

> electron@6.1.5 postinstall /home/root/.nvm/versions/node/v12.17.0/lib/node_modules/electron
> node install.js

+ electron@6.1.5
added 145 packages from 143 contributors in 36.605s
root@imx6qdlxelk:~# 

package version

For checking the installed version, just execute the binaries like:

root@imx6qdlxelk:~# node --version
v12.17.0
root@imx6qdlxelk:~# electron --version --no-sandbox
v6.1.5
root@imx6qdlxelk:~# 

Demo

And finally get the electron framework running using:

/home/root/.nvm/versions/node/v12.17.0/bin/electron --no-sandbox https://www.electronjs.org/

and the web site is available on the screen:

electron web site running on SBCX