A nodeschool workshop that teaches electron.
Please open issues to propose new exercises if you have some cool ideas.
Run npm install elementary-electron -g
, and then elementary-electron
to start.
NodeSchool workshop for learning Electron
I installed this workshop by npm install -g elementary-electron
but this throw the error.
loint@Ntlzz:~$ npm install -g elementary-electron
npm ERR! tar.unpack untar error /home/loint/.npm/elementary-electron/1.3.3/package.tgz
npm ERR! Linux 3.19.0-59-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "elementary-electron"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! path /usr/local/lib/node_modules/elementary-electron
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! Error: EACCES, mkdir '/usr/local/lib/node_modules/elementary-electron'
npm ERR! at Error (native)
npm ERR! { [Error: EACCES, mkdir '/usr/local/lib/node_modules/elementary-electron']
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! path: '/usr/local/lib/node_modules/elementary-electron',
npm ERR! fstream_type: 'Directory',
npm ERR! fstream_path: '/usr/local/lib/node_modules/elementary-electron',
npm ERR! fstream_class: 'DirWriter',
npm ERR! fstream_stack:
npm ERR! [ '/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:35:25',
npm ERR! '/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:47:53',
npm ERR! 'FSReqWrap.oncomplete (fs.js:95:15)' ] }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! Please include the following file with any support request:
npm ERR! /home/loint/npm-debug.log
loint@Ntlzz:~$ npm install -g elementary-electron
npm ERR! tar.unpack untar error /home/loint/.npm/elementary-electron/1.3.3/package.tgz
npm ERR! Linux 3.19.0-59-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "elementary-electron"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! path /usr/local/lib/node_modules/elementary-electron
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! Error: EACCES, mkdir '/usr/local/lib/node_modules/elementary-electron'
npm ERR! at Error (native)
npm ERR! { [Error: EACCES, mkdir '/usr/local/lib/node_modules/elementary-electron']
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! path: '/usr/local/lib/node_modules/elementary-electron',
npm ERR! fstream_type: 'Directory',
npm ERR! fstream_path: '/usr/local/lib/node_modules/elementary-electron',
npm ERR! fstream_class: 'DirWriter',
npm ERR! fstream_stack:
npm ERR! [ '/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:35:25',
npm ERR! '/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:47:53',
npm ERR! 'FSReqWrap.oncomplete (fs.js:95:15)' ] }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! Please include the following file with any support request:
npm ERR! /home/loint/npm-debug.log
How to fix it?
I get this error when i run electron app.js
but when i run electron index.html
everything works fine
i got this in my app.js file
var electron = require('electron')
electron.app.on('ready', function () {
var mainWindow = new electron.BrowserWindow({width: 600, height: 800})
mainWindow.loadURL('file://' + __dirname + '/index.html')
})
App threw an error when running
[TypeError: Cannot read property 'on' of undefined]
A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: Cannot read property 'on' of undefined
at Object.<anonymous> (/home/jose/electron/app.js:3:13)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at loadApplicationPackage (/usr/local/lib/node_modules/electron-prebuilt/dist/resources/default_app/main.js:257:23)
at Object.<anonymous> (/usr/local/lib/node_modules/electron-prebuilt/dist/resources/default_app/main.js:289:5)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
npm complained on the install:
$ npm install elementary-electron -g
npm WARN deprecated [email protected]: The sprintf package is deprecated in favor of sprintf-js.
/usr/local/bin/elementary-electron -> /usr/local/lib/node_modules/elementary-electron/bin/elementary-electron
+ [email protected]
added 221 packages from 201 contributors in 6.521s
We'll know shortly if this is a technical complaint and everything still works - or not.
It looks like this line is causing the failure:
fsCheck(path.join('.', 'index.js')),
The instructions tell you to create an index.html file. I may do a pull later today to fix.
I see this issue has a pull request pending since a long time now already at #10
How about accepting it?
I had issues every step of the way. Needed to add node support to app.js and made changes to index.js too. I don't know why replacing the callback way of doing it with a promise way worked, but with the following code getting the cat pic, annotating and printing on 'p' press all work.
However, still getting error messages in the console, similar to #32
Tracked them to here:
ladjs/superagent#676
ladjs/superagent#714
but I couldn't figure out where it's being included from to test if upgrading the version fixes it or such.
app.js
var electron = require('electron');
electron.app.on('ready', function () {
var mainWindow = new electron.BrowserWindow({
width: 600,
height: 800,
webPreferences: {
nodeIntegration: true
}});
mainWindow.loadURL('file://' + __dirname + '/index.html');
})
index.js
// Get cat pic src
var catpicture = require('cat-picture');
var src = catpicture.src;
catpicture.remove();
// Get annotation
var image = require('lightning-image-poly');
var viz = new image('#visualization', null, [src], {hullAlgorithm: 'convex'});
// Save pdf
var fs = require('fs');
var remote = require('electron').remote;
function save () {
remote.getCurrentWebContents().printToPDF({portrait: true})
.then( data => {
fs.writeFile('annotation.pdf', data, function (err) {
if (err) {
alert('error generating pdf! ' + err.message);
} else {
alert('pdf saved!');
}
})
})
.catch (err => {
console.log('test');
})
}
window.addEventListener('keydown', function (e) {
if (e.keyCode == 80) save()
})
I'm trying to install on Windows10 using this command:
npm install -g elementary-electron -verbose
It gets stuck forever at the list line of the below output (cheerio unlock) ...
<clipped!>
npm info install [email protected]
npm info postinstall [email protected]
npm verb unlock done using C:\Users\Paul\AppData\Roaming\npm-cache_locks\request-cedffcc9de9447d4.lock for C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\jsdom\node_modules\request
npm verb write writing to C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\jsdom\node_modules\cssstyle\package.json
npm info preinstall [email protected]
npm verb readDependencies loading dependencies from C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\jsdom\node_modules\cssstyle\package.json
npm verb readDependencies loading dependencies from C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\jsdom\node_modules\cssstyle\package.json
npm verb about to build C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\jsdom\node_modules\cssstyle
npm info build C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\jsdom\node_modules\cssstyle
npm info linkStuff [email protected]
npm verb linkBins [email protected]
npm verb linkMans [email protected]
npm verb rebuildBundles [email protected]
npm info install [email protected]
npm info postinstall [email protected]
npm verb unlock done using C:\Users\Paul\AppData\Roaming\npm-cache_locks\cssstyle-757e2d50749b3631.lock for C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\jsdom\node_modules\cssstyle
npm verb about to build C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\jsdom
npm info build C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\jsdom
npm info linkStuff [email protected]
npm verb linkBins [email protected]
npm verb linkMans [email protected]
npm verb rebuildBundles [email protected]
npm verb rebuildBundles [ '.bin',
npm verb rebuildBundles 'abab',
npm verb rebuildBundles 'acorn',
npm verb rebuildBundles 'acorn-globals',
npm verb rebuildBundles 'cssom',
npm verb rebuildBundles 'cssstyle',
npm verb rebuildBundles 'escodegen',
npm verb rebuildBundles 'nwmatcher',
npm verb rebuildBundles 'parse5',
npm verb rebuildBundles 'request',
npm verb rebuildBundles 'sax',
npm verb rebuildBundles 'symbol-tree',
npm verb rebuildBundles 'tough-cookie',
npm verb rebuildBundles 'webidl-conversions',
npm verb rebuildBundles 'whatwg-url-compat',
npm verb rebuildBundles 'xml-name-validator' ]
npm info install [email protected]
npm info postinstall [email protected]
npm verb unlock done using C:\Users\Paul\AppData\Roaming\npm-cache_locks\jsdom-e70a35ec465f8837.lock for C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\jsdom
npm verb write writing to C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\lodash\package.json
npm info preinstall [email protected]
npm verb readDependencies loading dependencies from C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\lodash\package.json
npm verb readDependencies loading dependencies from C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\lodash\package.json
npm verb about to build C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\lodash
npm info build C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\lodash
npm info linkStuff [email protected]
npm verb linkBins [email protected]
npm verb linkMans [email protected]
npm verb rebuildBundles [email protected]
npm info install [email protected]
npm info postinstall [email protected]
npm verb unlock done using C:\Users\Paul\AppData\Roaming\npm-cache_locks\lodash-a6f1af9274513c4a.lock for C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio\node_modules\lodash
npm verb about to build C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio
npm info build C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio
npm info linkStuff [email protected]
npm verb linkBins [email protected]
npm verb linkMans [email protected]
npm verb rebuildBundles [email protected]
npm verb rebuildBundles [ 'css-select',
npm verb rebuildBundles 'dom-serializer',
npm verb rebuildBundles 'entities',
npm verb rebuildBundles 'htmlparser2',
npm verb rebuildBundles 'jsdom',
npm verb rebuildBundles 'lodash' ]
npm info install [email protected]
npm info postinstall [email protected]
npm verb unlock done using C:\Users\Paul\AppData\Roaming\npm-cache_locks\cheerio-7c3f69aebf561707.lock for C:\Users\Paul\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\cheerio
Hi, i was having an issue where electron returns a require('electron').remote
as an undefined,
i searched online, the solution to this is to add to the app.js file inside the webPreferences
enableRemoteModule: true
with this fix, i finally got index.js working, and i succesfully exported the pdf file
Complete code:
electron.app.on('ready', function () {
var mainWindow = new electron.BrowserWindow({
width: 600, height: 800, webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
})
i included the nodeIntegration: true
to fix other issues
I've got an error, when trying to start tutorial.
$ elementary-electron
C:\Users\рорао\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\adventure\lib\menu.js:51
process.stdin.setRawMode(true);
^
TypeError: process.stdin.setRawMode is not a function
at module.exports (C:\Users\рорао\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\adventure\lib\menu.js:51:19)
at Shop.showMenu (C:\Users\рорао\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\adventure\index.js:267:16)
at Shop.execute (C:\Users\рорао\AppData\Roaming\npm\node_modules\elementary-electron\node_modules\adventure\index.js:131:14)
at Object. (C:\Users\рорао\AppData\Roaming\npm\node_modules\elementary-electron\cli.js:21:6)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:134:18)
I followed the exercise strictly, more than one time, but I can't get to get it working.
I have the 4 correct files, and indeed elementary-electron verify
completes with a SUCCES.
But when i execute electron app.js
a blank window appear, if I reload the page (Ctrl+R
) i can briefly see the 'Hello World' text, then it disapper again.
I tried it on different directory, different machines, different OS's, I can't seem to find a solution, nor an error report (the console hangs as soon as I reload the page).
Am I doing something wrong or is something else going on?
app.js
var electron = require('electron')
electron.app.on('ready', function() {
var mainWindow = new electron.BrowserWindow({width: 600, height:800})
mainWindow.loadURL('file://' + __dirname + '/index.html')
})
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js
require('cat-picture')
I'm getting an 'unknown platform' error when attempting to install the electron-prebuilt module for this tutorial.
Any chance of an android version of this requirement?
Does not find electron.
elementary-electron verify
FAIL! Failed to find the command electron in your PATH.
Also has 10 vulnerabilities
Hi kind contributors
Thank you for the easy to follow guide to setting up electron app. Everything worked fine for me in this course except for the bug with the polygon drawing package
I could kinda draw squiggly lines after following the tutorial, but my doodling disappeared the moment I release my mouse. Also, my browser buffer size increase as if there were more elements added to it, which I think is what the code below was trying to do:
var viz = new image('#visualization',null,[src],{hullAlgorithm:'convex'});
Because there was a code that was supposed to delete the original image and re-render it, the new image was taking super long to render while the old image was not deleted either. And the drawing didn't seem to be at the right location.
Please kindly help explain what was going on.
My entire code was:
var picture=require('cat-picture');
var image=require("lightning-image-poly");
var src=picture.src;
picture.remove();
var viz = new image('#visualization',null,[src],{hullAlgorithm:'convex'});
Thank you
Hi,
I'm sort of new to node and getting through this excersise I've seen file index.js being referenced in index.html. index.js is using node's require function. how does this reference work through html. you don't use require.js either...
in the instructions it states to create a index.html
Using a text editor (such as TextEdit, Notepad, etc.), create a file
called index.html in the folder you just created with the following
contents:<!DOCTYPE html> <html> <head> </head> <body> <h1>Hello World</h1> </body> </html>
running verification fails looking for a index.js
$ elementary-electron verify
Checking Requirements:» index.js [?]
» app.js ✔FAIL!
Your app has some issues.
Let me preface this that I am a total newb with all of this.
Simply said, whenever I type 'electron' into my command prompt, nothing happens. There were no issues with installing electron, and it is on my path. It's just that nothing happens.
i am in the "NodeSchool workshop for learning Electron" part 5. i am getting the following error when i click the p button on the keyboard. any ideas on what i could be doing wrong?
C:\Users\ajitg\AppData\Roaming\npm\node_modules\lightning-image-poly\node_modules\superagent\lib\no…:748 Uncaught TypeError: fn is not a function
at Request.callback (C:\Users\ajitg\AppData\Roaming\npm\node_modules\lightning-image-poly\node_modules\superagent\lib\no…:748)
at Request. (C:\Users\ajitg\AppData\Roaming\npm\node_modules\lightning-image-poly\node_modules\superagent\lib\no…:135)
at emitOne (events.js:96)
at Request.emit (events.js:191)
at IncomingMessage. (C:\Users\ajitg\AppData\Roaming\npm\node_modules\lightning-image-poly\node_modules\superagent\lib\no…:938)
at emitNone (events.js:91)
at IncomingMessage.emit (events.js:188)
at endReadableNT (_stream_readable.js:975)
at _combinedTickCallback (internal/process/next_tick.js:80)
at process._tickCallback (internal/process/next_tick.js:104)
Request.callback @ C:\Users\ajitg\AppData\Roaming\npm\node_modules\lightning-image-poly\node_modules\superagent\lib\no…:748
(anonymous) @ C:\Users\ajitg\AppData\Roaming\npm\node_modules\lightning-image-poly\node_modules\superagent\lib\no…:135
emitOne @ events.js:96
emit @ events.js:191
(anonymous) @ C:\Users\ajitg\AppData\Roaming\npm\node_modules\lightning-image-poly\node_modules\superagent\lib\no…:938
emitNone @ events.js:91
emit @ events.js:188
endReadableNT @ _stream_readable.js:975
_combinedTickCallback @ internal/process/next_tick.js:80
_tickCallback @ internal/process/next_tick.js:104
C:\Users\ajitg\AppData\Roaming\npm\node_modules\lightning-image-poly\node_modules\leaflet.freedraw-…:399 setting mode
C:\Users\ajitg\AppData\Roaming\npm\node_modules\lightning-image-poly\node_modules\leaflet.freedraw-…:400 10
Ubuntu 16.04
Node version v6.2.2
npm version 3.10.2.
Electron version 1.2.3 (most recent version tried also)
Browser doesn't open and when I run verify it's missing the index.js.
I´ve ran it on my windows laptop and it works fine so must be OS related.
I have been casually maintaining this project for a while, but I think it would have a better life if we moved it to @electron-userland. @maxogden any objection?
/usr/local/lib/node_modules/electron-prebuilt/dist/electron: error while loading shared libraries: libgtk-x11-2.0.so.0: cannot open shared object file: No such file or directory
Setting the nodeIntegration
option to true does indeed workloads up the cat image, but if I run the annotation challenge the screen goes blank again. All I see is "hello world".
What am I missing?
It (the glitch) seems to me that the automation for verification is lacking. In particular, the lesson entitled 'Hello World' directs the user to generate a simple HTML file (index.html) and a javascript file (app.js); however, the verification just requires the presence of a html.JS and an app.js for a successful pass. Evenmoreso, the resulting run does not appear to work but passes the verification.
-M
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.