Electron Installation

Posted on

Electron is a framework for creating native applications with web technologies like Javascript, HTML and CSS. It takes care of the hard parts so you can focus on the core of your application. This information can be derived from its official website in http://electron.atom.io

To be able to install electron, npm which is a default package manager for the JavaScript runtime environment Node.js

is needed. Below is the command which is needed to be executed :

npm install --save electron-prebuilt

This is the output of the display from executing the above command :

username@hostname:/var/www/html/laravel-electron$ npm install --save electron-prebuilt
> electron-prebuilt@1.3.4 postinstall /var/www/html/laravel-electron/node_modules/electron-prebuilt
> node install.js

Downloading electron-v1.3.4-linux-x64.zip
[============================================>] 100.0% of 42.62 MB (173.96 kB/s)
laravel-electron@1.0.0 /var/www/html/laravel-electron
└─┬ electron-prebuilt@1.3.4
├─┬ electron-download@2.1.2
│ ├─┬ debug@2.2.0
│ │ └── ms@0.7.1
│ ├── home-path@1.0.3
│ ├── minimist@1.2.0
│ ├─┬ mkdirp@0.5.1
│ │ └── minimist@0.0.8
│ ├─┬ mv@2.1.1
│ │ ├── ncp@2.0.0
│ │ └─┬ rimraf@2.4.5
│ │ └─┬ glob@6.0.4
│ │ ├─┬ inflight@1.0.5
│ │ │ └── wrappy@1.0.2
│ │ ├─┬ minimatch@3.0.3
│ │ │ └─┬ brace-expansion@1.1.6
│ │ │ ├── balanced-match@0.4.2
│ │ │ └── concat-map@0.0.1
│ │ ├── once@1.3.3
│ │ └── path-is-absolute@1.0.0
│ ├─┬ nugget@1.6.2
│ │ ├─┬ pretty-bytes@1.0.4
│ │ │ ├── get-stdin@4.0.1
│ │ │ └─┬ meow@3.7.0
│ │ │ ├─┬ camelcase-keys@2.1.0
│ │ │ │ └── camelcase@2.1.1
│ │ │ ├── decamelize@1.2.0
│ │ │ ├─┬ loud-rejection@1.6.0
│ │ │ │ ├─┬ currently-unhandled@0.4.1
│ │ │ │ │ └── array-find-index@1.0.1
│ │ │ │ └── signal-exit@3.0.0
│ │ │ ├── map-obj@1.0.1
│ │ │ ├─┬ normalize-package-data@2.3.5
│ │ │ │ ├── hosted-git-info@2.1.5
│ │ │ │ ├─┬ is-builtin-module@1.0.0
│ │ │ │ │ └── builtin-modules@1.1.1
│ │ │ │ ├── semver@5.3.0
│ │ │ │ └─┬ validate-npm-package-license@3.0.1
│ │ │ │ ├─┬ spdx-correct@1.0.2
│ │ │ │ │ └── spdx-license-ids@1.2.2
│ │ │ │ └── spdx-expression-parse@1.0.3
│ │ │ ├── object-assign@4.1.0
│ │ │ ├─┬ read-pkg-up@1.0.1
│ │ │ │ ├─┬ find-up@1.1.2
│ │ │ │ │ └── path-exists@2.1.0
│ │ │ │ └─┬ read-pkg@1.1.0
│ │ │ │ ├─┬ load-json-file@1.1.0
│ │ │ │ │ ├── graceful-fs@4.1.6
│ │ │ │ │ ├─┬ parse-json@2.2.0
│ │ │ │ │ │ └─┬ error-ex@1.3.0
│ │ │ │ │ │ └── is-arrayish@0.2.1
│ │ │ │ │ ├── pify@2.3.0
│ │ │ │ │ └─┬ strip-bom@2.0.0
│ │ │ │ │ └── is-utf8@0.2.1
│ │ │ │ └── path-type@1.1.0
│ │ │ ├─┬ redent@1.0.0
│ │ │ │ ├─┬ indent-string@2.1.0
│ │ │ │ │ └─┬ repeating@2.0.1
│ │ │ │ │ └─┬ is-finite@1.0.1
│ │ │ │ │ └── number-is-nan@1.0.0
│ │ │ │ └── strip-indent@1.0.1
│ │ │ └── trim-newlines@1.0.0
│ │ ├─┬ progress-stream@1.2.0
│ │ │ ├── speedometer@0.1.4
│ │ │ └─┬ through2@0.2.3
│ │ │ ├─┬ readable-stream@1.1.14
│ │ │ │ └── isarray@0.0.1
│ │ │ └─┬ xtend@2.1.2
│ │ │ └── object-keys@0.4.0
│ │ ├─┬ request@2.74.0
│ │ │ ├── aws-sign2@0.6.0
│ │ │ ├── aws4@1.4.1
│ │ │ ├─┬ bl@1.1.2
│ │ │ │ └─┬ readable-stream@2.0.6
│ │ │ │ └── isarray@1.0.0
│ │ │ ├── caseless@0.11.0
│ │ │ ├─┬ combined-stream@1.0.5
│ │ │ │ └── delayed-stream@1.0.0
│ │ │ ├── extend@3.0.0
│ │ │ ├── forever-agent@0.6.1
│ │ │ ├─┬ form-data@1.0.1
│ │ │ │ └─┬ async@2.0.1
│ │ │ │ └── lodash@4.15.0
│ │ │ ├─┬ har-validator@2.0.6
│ │ │ │ ├─┬ chalk@1.1.3
│ │ │ │ │ ├── ansi-styles@2.2.1
│ │ │ │ │ ├── escape-string-regexp@1.0.5
│ │ │ │ │ ├─┬ has-ansi@2.0.0
│ │ │ │ │ │ └── ansi-regex@2.0.0
│ │ │ │ │ ├── strip-ansi@3.0.1
│ │ │ │ │ └── supports-color@2.0.0
│ │ │ │ ├─┬ commander@2.9.0
│ │ │ │ │ └── graceful-readlink@1.0.1
│ │ │ │ ├─┬ is-my-json-valid@2.13.1
│ │ │ │ │ ├── generate-function@2.0.0
│ │ │ │ │ ├─┬ generate-object-property@1.2.0
│ │ │ │ │ │ └── is-property@1.0.2
│ │ │ │ │ ├── jsonpointer@2.0.0
│ │ │ │ │ └── xtend@4.0.1
│ │ │ │ └─┬ pinkie-promise@2.0.1
│ │ │ │ └── pinkie@2.0.4
│ │ │ ├─┬ hawk@3.1.3
│ │ │ │ ├── boom@2.10.1
│ │ │ │ ├── cryptiles@2.0.5
│ │ │ │ ├── hoek@2.16.3
│ │ │ │ └── sntp@1.0.9
│ │ │ ├─┬ http-signature@1.1.1
│ │ │ │ ├── assert-plus@0.2.0
│ │ │ │ ├─┬ jsprim@1.3.0
│ │ │ │ │ ├── extsprintf@1.0.2
│ │ │ │ │ ├── json-schema@0.2.2
│ │ │ │ │ └── verror@1.3.6
│ │ │ │ └─┬ sshpk@1.9.2
│ │ │ │ ├── asn1@0.2.3
│ │ │ │ ├── assert-plus@1.0.0
│ │ │ │ ├─┬ dashdash@1.14.0
│ │ │ │ │ └── assert-plus@1.0.0
│ │ │ │ ├── ecc-jsbn@0.1.1
│ │ │ │ ├─┬ getpass@0.1.6
│ │ │ │ │ └── assert-plus@1.0.0
│ │ │ │ ├── jodid25519@1.0.2
│ │ │ │ ├── jsbn@0.1.0
│ │ │ │ └── tweetnacl@0.13.3
│ │ │ ├── is-typedarray@1.0.0
│ │ │ ├── isstream@0.1.2
│ │ │ ├── json-stringify-safe@5.0.1
│ │ │ ├─┬ mime-types@2.1.11
│ │ │ │ └── mime-db@1.23.0
│ │ │ ├── node-uuid@1.4.7
│ │ │ ├── oauth-sign@0.8.2
│ │ │ ├── qs@6.2.1
│ │ │ ├── stringstream@0.0.5
│ │ │ ├── tough-cookie@2.3.1
│ │ │ └── tunnel-agent@0.4.3
│ │ ├── single-line-log@0.4.1
│ │ └── throttleit@0.0.2
│ ├── path-exists@1.0.0
│ └─┬ rc@1.1.6
│ ├── deep-extend@0.4.1
│ ├── ini@1.3.4
│ └── strip-json-comments@1.0.4
└─┬ extract-zip@1.5.0
├─┬ concat-stream@1.5.0
│ ├── inherits@2.0.1
│ ├─┬ readable-stream@2.0.6
│ │ ├── core-util-is@1.0.2
│ │ ├── isarray@1.0.0
│ │ ├── process-nextick-args@1.0.7
│ │ ├── string_decoder@0.10.31
│ │ └── util-deprecate@1.0.2
│ └── typedarray@0.0.6
├── debug@0.7.4
├─┬ mkdirp@0.5.0
│ └── minimist@0.0.8
└─┬ yauzl@2.4.1
└─┬ fd-slicer@1.0.1
└── pend@1.2.0

username@hostname:/var/www/html/laravel-electron$

After Electron has successfully installed, it need to be tested. Below is the command which can be executed to run Electron :

./node_modules/.bin/electron [your_electron_app_path]

In this case, since the electron application path is in the current working directory, the command will turn out to be as follow :

./node_modules/.bin/electron .

So, the final output of the execution is shown below :

username@hostname:/var/www/html/laravel-electron$ ./node_modules/.bin/electron .
App threw an error during load
Error: Cannot find module 'laravel-elixir'
at Module._resolveFilename (module.js:440:15)
at Function.Module._resolveFilename (/var/www/html/laravel-electron/node_modules/electron-prebuilt/dist/resources/electron.asar/common/reset-search-paths.js:35:12)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/var/www/html/laravel-electron/gulpfile.js:1:93)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module 'laravel-elixir'
at Module._resolveFilename (module.js:440:15)
at Function.Module._resolveFilename (/var/www/html/laravel-electron/node_modules/electron-prebuilt/dist/resources/electron.asar/common/reset-search-paths.js:35:12)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/var/www/html/laravel-electron/gulpfile.js:1:93)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
^C
username@hostname:/var/www/html/laravel-electron$ ls -al

So, the error is clearly stated ‘laravel-elixir’ module cannot be found. Well then, install laravel elixir which is written in another article in this site or find it by beloved search engine for example : Google, Bing, etc.

After successfully installing ‘laravel-elixir’ module get back to re-execute the previous command in bash prompt :

./node_modules/.bin/electron

We just want to check whether electron has already successfully installed regardless if there is an electron application exist. So the above command didn’t specify the electron application path. And the following output will be displayed if only electron has successfully installed :

running-electron-defaullt
Default display of Electron executed after fresh installation.

Leave a Reply