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

{{InfoBoxTop}}
{{AppliesToSBCX}}
{{AppliesToAxel}}
{{AppliesToAxelLite}}
{{AppliesToAxelEsatta}}
{{InfoBoxBottom}}
{{WarningMessage|text=This technical note was validated against specific versions of hardware and software. It may not work with other versions.}}
== History ==
{| class="wikitable" border="1"
!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 [[:Category:SBC-AXEL|SBC Axel]] (SBCX for short) for installing the well known [https://nodejs.org/en/ node.js] runtime and the [https://www.electronjs.org/ 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.

(''[https://www.electronjs.org/docs/tutorial/first-app rif. electron tutorial]'')

More information about '''electron''' can be found on [https://www.electronjs.org/ its web site]. It is useful to follow the [https://www.electronjs.org/docs/tutorial/quick-start Quick start guide] and the complete [https://www.electronjs.org/docs 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: <code>4.14.98-xelk-5.0.0</code> (see [[Axel_Embedded_Linux_Kit_(XELK)#XELK_5.0.0|XELK 5.0.0]])
* Yocto Sumo root file system

== Installation ==
===node.js ===
The ''node.js'' runtime environment can be easily installed using its [https://github.com/nvm-sh/nvm Node Version Manager]. 

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

==== Cloning nvm git repository ====

Just properly configure the environment and start the git clone:

<pre class="board-terminal">
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"
</pre>

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

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

====Installing node.js ====

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

<pre class="board-terminal">
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:~# 
</pre>

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

<pre class="board-terminal">
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.10.0/lib/node_modules/electron
> node install.js

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

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

<pre class="board-terminal">
root@imx6qdlxelk:~# node --version
v12.18.1
root@imx6qdlxelk:~# electron --version --no-sandbox
v6.1.5
root@imx6qdlxelk:~# 
</pre>

== Demo ==
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:

[[File:SBCX-electron-web.png|thumb|center|600px|<code>electron</code> web site running on SBCX]]