Web IDE as an app! (node-webkit / nw.js)

Posted on
of 2
/ 2
  • I just got the Web IDE working with node-webkit (now nw.js) - which means that soon it'll be available as a native (downloadable) app on Windows/Mac/Linux!

    I don't have any packaged versions yet (all I have is x64 Linux, which I bet won't be helpful for many of you!) - unfortunately as it needs the platform-specific node-serialport library I have to work out how to include a build of that for each platform in the package (I wonder if anyone can help here?).

    For now, to make your own package you need to:

    • Install node.js and npm
    • Install node-webkit with sudo npm install -g nw
    • Download the gh-pages branch of the Web IDE
    • Make sure the EspruinoTools submodule was in there (afaik it should be)
    • Install the serialport module with npm install serialport - it turns out there's a bit more to it (see extras/create_nodewebkit.sh for the magic commands)
    • Run extras/create_nodewebkit.sh

    And you now have a node-webkit package that you can run with nw extras/espruino.nw - and it should work just like the normal Web IDE - except hopefully with a working serial port :)

  • Coincidentally, I'd just ordered two more picos so this is great news - will check it out!

  • Thanks - hope it works out for you!

    I just wish I could easily package it up for all platforms, but because serialport needs a binary for each platform, it seems like I'll have to package it up on 3 different PCs (maybe more if I need to handle x64 as well as x32 :( ).

  • Looking in the repo, I'm not seeing the "extras/create_nodewebkit.js" file. There's a bashfile that looks to be misnamed - create_nodewebit.sh. That the one?

  • I think you probably aren't on the gh-pages branch?

  • No, thats not it, I'm looking in that branch. File definitely not there. I think you must mean the bash file, which seems to relate.

    Seems also i'll need to find a version of Xcode that'll install on 10.6.8 - as that is requirement to install the serialport package - which errors for me when I try it.

    I might just put this Mac in the bin ;)

  • Oh, sorry - misread your comment - the .sh file is the right one, was just a typo in the instructions as you said. (I thought you might have found the other .sh file that's in there)

    Really? XCode to install the serial port? That's pretty rough :( I honestly thought that the build process for Node.js on Mac would be nice and easy.

  • Yes. Needs xCode Command Line Tools. No problems will get there.

    One other thing might want to add to the instructions - if cloning need to add the "--recursive" flag to get the submodule, otherwise it comes down with an empty EspruinoTools folder. I guess people might know this - I didn't.

    Assuming I can get XCode, are you wanting the community to build binaries and let you have them?

  • Thanks - i'll update the docs :)

    are you wanting the community to build binaries and let you have them?

    That'd be great - I was hoping there was a better way of doing the builds (like some automated process I could run from my PC that would build all the packages) but it looks like that isn't the case because of the serialport module.

  • Struggling.. so close but so far
    Got XCode command line tools via this route http://kitcambridge.tumblr.com/post/1777­8742499/installing-the-xcode-command-lin­e-tools-on-snow, so not full Xcode but the serialport package says this should be enough(the minimum). I can find GCC.

    My issue seems to be that the instructions and the zip routine imply that after following the process "node_modules/serialport" should exist in the EspruinoWebIDE directory. It doesn't it is installed at ~/

    If I move it in, I can build with the bash file and it does not complain about a missing folder and I can get the the IDE to load but it complains about not being able to find serial.js, so never moves beyond "searching"

    I'm not expecting any help with this, but if someone else on Mac Osx 10.6.8 has the opportunity to compile this I'd love to hear how they went on.

  • @Ducky could work - looks like they use some other service for Windows compiles? I didn't think Travis did Windows VMs?

    @Ollie - sorry to hear that - I'm not sure why node_modules would be in the wrong place. Could be some argument to npm is needed to pull it in...

    Is it actually complaining about serial.js? Or serialport? It's kind of odd if it's missing serial.js as that should be in EspruinoTools/core i think?

  • "serialport" I'm pretty sure now you say. I may have mislead there.

    Re the placement. Should this be an NPM package, do we need to do npm init before all of the above? Would that get the file included in the correct path?

  • I'm not really sure about the paths - I'm not a big node.js user,

    but... serialport should definitely be an npm package - but actually it can be that you get a complaint not because it's not installed, but because the binary version doesn't match the version of nw.js. That extra commented code in the .sh file - it could be that the version of nw.js it's compiling for isn't the version that you have installed?

  • Don't worry - back burnered for the moment.

  • First off, awesome product! I just found out about Espruino and I defo need to order 1 of those Picos! :D

    Back to the topic!

    Could you use serialport2 instead? It says it supports Mac OSX, linux, and Windows and doesn't seem to require the user do any manual preinstalls.

    Also take a look at electron.atom.io. Its got a lot of great features over nw.js :)

  • lol ok, Serialport2 was merged into node-serialport and is being deprecated.

  • Ahh, interesting. I did see serialport2, but I got as far as finding out they'd changed the API for no reason at all and stopped looking :) Good to see the changes have been merged in.

    Looks to me like it still uses native bindings, so would have the same issue.

    Maybe you could try and make a really simple serialport hello world with electron and see if it builds ok? It may suffer from the same issues (I'm struggling to see how it wouldn't unless they build the native parts for you).

    Another option would be to actually distribute an Espruino binary for windows/mac/linux, and serve the Web IDE up via HTTP. It's got a certain appeal to it ;)

  • This is great news for my sysadmin guy right Gordon? Might cut out some of the quirks in Chrome?

  • Yes - it'll just be one application to install, so assuming you can get him to do that it'll be a load better. And it won't randomly break.

    You haven't had any more issues with the IDE have you?

  • It was great thanks! :)

  • I am struggling, as usual.
    https://github.com/espruino/EspruinoWebI­DE wasn't working for me from "source".
    nw was not available.
    I noted from the first post:

    Install node-webkit with sudo npm install -g nw

    Now I am getting a nw (just some missing libraries I need to find)

    Did I miss something obvious in the https://github.com/espruino/EspruinoWebI­DE README.md?

  • Which operating system is this on?

    You might be missing:

    If you're not seeing any options for devices to connect to, it might be because your nw.js and node versions don't match. If that's the case you need to manually rebuild all the 'native' modules.

    I'd work out which version of nw.js you need and install that directly from the nw.js site (not NPM).

  • OS: I did once try with Ubuntu for a week ago with bad results but I was new then. The other day was Bash on Ubuntu on Windows and I will now try again with the reference OS of Ubuntu 16.x and get back on my experience.

  • @Gordon, I was thinking about several similar frameworks with a lot of traction, large communities, and big name sponsorship.

    Have you checked out GitHub's Electron? It's used in building the popular, multi-language Atom editor.

    Also, there is Adobe PhoneGap, which targets iOS and Android devices, wrapping your HTML/JS/CSS in a mobile native app. (Disclosure: I helped create PhoneGap at the iOSDevCamp hackathon in 2008.)

    Additionally, Facebook's React Native might be interesting. Logic is in JavaScript, and UI elements are native to mobile. Adaptations are emerging for desktop macOS & Windows.

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

Web IDE as an app! (node-webkit / nw.js)

Posted by Avatar for Gordon @Gordon