View source for MISC-TN-013: Enabling node.js and electron.js for creating Javascript applications

{{InfoBoxTop}}
{{AppliesToMito8M}}
{{InfoBoxBottom}}
{{WarningMessage|text=This technical note was validated against specific versions of hardware and software. What is described here may not work with other versions.}}
[[Category:MISC-AN-TN]]
[[Category:MISC-TN]]

== History ==
{| class="wikitable" border="1"
!Version
!Date
!Notes
|-
|1.0.0
|July 2020
|First public release
|}

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

Mito8M is the first DAVE Embedded Systems' product based on a core implementing the [https://en.wikipedia.org/wiki/ARM_architecture#64/32-bit_architecture ARMv8-A] architecture. 
Specifically, it is built upon the [https://www.nxp.com/products/processors-and-microcontrollers/arm-processors/i.mx-applications-processors/i.mx-8-processors/i.mx-8m-family-armcortex-a53-cortex-m4-audio-voice-video:i.MX8M NXP i.MX8M] system-on-chip (SoC).

Similarly to the Technical Note written for the [[:Category:SBC-AXEL|SBC Axel]] platform using the [[:Category:AxelLite|AXEL Lite SOM]], this Technical Note (TN) describes how to install 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===
Due to the '''Mito8M electrical and mechanical compatibility with [[:Category:AxelLite|AXEL Lite]]''', the testbed used for this TN is pretty similar to the one described [[SBCX-TN-007:_Enabling_node.js_and_electron.js_for_creating_Javascript_applications|here]]. Even though the SBCX carrier board is designed to host Axel Lite, in fact, '''it supports Mito8M as well'''.


[[File:SBCX-Mito8M.jpg|thumb|center|500px|Mito8M SoM on SBCX carrier board]]


For what concerns software, the following configuration was used:
* Linux kernel: <code>4.14.78-mito-0.9.0</code>
* 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. 

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

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

<pre class="board-terminal">
root@imx8mmevk:~# nvm install --lts
Installing latest LTS version.
Downloading and installing node v12.18.2...
Downloading https://nodejs.org/dist/v12.18.2/node-v12.18.2-linux-arm64.tar.gz...
######################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v12.18.2 (npm v6.14.5)
Creating default alias: default -> lts/* (-> v12.18.2)
root@imx8mmevk:~#
</pre>

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

<pre class="board-terminal">
root@imx8mmevk:~# 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.18.2/bin/electron -> /home/root/.nvm/versions/node/v12.18.2/lib/node_modules/electron/cli.js

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

Downloading tmp-4481-1-SHASUMS256.txt-6.1.5
[============================================>] 100.0% of 5.15 kB (5.15 kB/s)
[  186.578462] audit: type=1006 audit(1595331007.192:3): pid=4492 uid=0 old-auid=4294967295 auid=0 tty=(none) old-ses=4294967295 ses=2 res=1
+ electron@6.1.5
added 145 packages from 143 contributors in 109.345s
root@imx8mmevk:~#
</pre>

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

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

== Demo ==
And finally get the ''electron'' framework running using:

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

and the web site is available on the screen:

[[File:SBCX-Mito8M-electron.jpg|thumb|center|800px|<code>electron</code> running running on SBCX with Mito8M SOM and Full HD HDMI monitor]]