SBCX-TN-007: Enabling node.js and electron.js for creating Javascript applications
Info Box
|
![]() |
This technical note was validated against specific versions of hardware and software. It may not work with other versions. | ![]() |
Contents
History[edit | edit source]
Version | Date | Notes |
---|---|---|
1.0.0 | July 2020 | First public release |
Introduction[edit | edit source]
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.
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[edit | edit source]
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[edit | edit source]
node.js[edit | edit source]
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[edit | edit source]
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[edit | edit source]
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[edit | edit source]
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[edit | edit source]
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[edit | edit source]
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: