Difference between revisions of "SBCX-TN-007: Enabling node.js and electron.js for creating Javascript applications"

From DAVE Developer's Wiki
Jump to: navigation, search
(electron.js)
(package version)
(3 intermediate revisions by the same user not shown)
Line 100: Line 100:
 
<pre class="board-terminal">
 
<pre class="board-terminal">
 
root@imx6qdlxelk:~# node --version
 
root@imx6qdlxelk:~# node --version
v12.17.0
+
v12.18.1
 
root@imx6qdlxelk:~# electron --version --no-sandbox
 
root@imx6qdlxelk:~# electron --version --no-sandbox
 
v6.1.5
 
v6.1.5
Line 109: Line 109:
 
And finally get the ''electron'' framework running using:
 
And finally get the ''electron'' framework running using:
  
  /home/root/.nvm/versions/node/v12.17.0/bin/electron --no-sandbox https://www.electronjs.org/
+
  /home/root/.nvm/versions/node/v12.18.1/bin/electron --no-sandbox https://www.electronjs.org/
  
 
and the web site is available on the screen:
 
and the web site is available on the screen:
  
 
[[File:SBCX-electron-web.png|thumb|center|600px|<code>electron</code> web site running on SBCX]]
 
[[File:SBCX-electron-web.png|thumb|center|600px|<code>electron</code> web site running on SBCX]]

Revision as of 14:05, 23 July 2020

Info Box
SBC-AXEL-02.png Applies to SBC AXEL
Axel-04.png Applies to Axel Ultra
Axel-lite 02.png Applies to Axel Lite
Axel-02.png Applies to AXEL ESATTA
Warning-icon.png This technical note was validated against specific versions of hardware and software. It may not work with other versions. Warning-icon.png

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.

(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[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.18.1
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.18.1/bin/electron --no-sandbox https://www.electronjs.org/

and the web site is available on the screen:

electron web site running on SBCX