Tron (for Github’s Electron)

I’m a big fan of Github’s Electron lately. Electron is the underlying tech behind Github’s Atom Editor, which they have kindly made open source….YAY!

Electron marries Google’s open source browser Chromium, with IO.js (the fork of Node.js). What you end up having here is a desktop wrapper that lets you do all sorts of HTML5 goodness with the power of Node.js which lets you access your local system, run C++, and everything else Node/IO.js does.

To get started in Electron, you’d need to do several things:

  • Grab the Electron binaries
  • Create some code to run your application and HTML window
  • Find some way to run the app (through the terminal targeting the binaries, or by dragging your files into the released package

None of these are that bad, but like any other ecosystem, you need to know how things work and figure out what pieces of the puzzle need to be in place.

Even for me, who is pretty good with how to scaffold an Electron app, I prefer not having to do the same things over and over again – so my needs are similar to those of a beginner, in that I just want a quick way to create and run an Electron project.

I’m also a big fan of Polymer. The main thing I love about Polymer is how it enforces everything to be a Web Component. You can read all about it’s encapsulation model with the Shadow or Shady DOM elsewhere, but I like the fact that Polymer strongly suggests that each component you have is self-runnable. Of course, this isn’t exclusive to Polymer, but it’s the first time I’ve really seen self-running components en masse.

So, I’ve taken some inspiration from Polymer…

What if you can not only run your main project in Electron, but also run any components you want as standalone Electron applications?

With that, let me tell you about my new CLI tool call “Tron-CLI”. Tron is a tool that you’d install globally under node like so:

npm install -g tron-cli

Once installed, go ahead into a new project directory and type the following into the terminal:

tron create

Tron will download the Electron binaries and create an application folder for you with a fully working dummy application.

To run, you’d typically need to target the Electron executable hidden in the binaries folder and pass in the app folder. I’ve played around with popping these shell commands into a grunt or gulp file (which is a fine way to go). However, with Tron, you’d simply type:

tron run

The Application Javascript I provide also accepts arguments via the Tron CLI. So if you wanted to pop open the Chromium developer tools when you run your app, you’d do this:

tron run -d

And like I said, I’m a fan of self running components. So if you have those, and especially if you’ve created them with the Yeoman Polymer Generator where the demo files are placed in your <yourcomponent>/demo/index.html, you can demo your component in Electron by doing this:

tron comp <yourcomponent>

Of course, if your component structure doesn’t adhere to this scheme, go ahead and tweak the tron.json file.

Yes, your application may quickly grow into something pretty big and you might outgrow Tron. I am to add more features to the application JS as I need them, but for now this is a good quick way to start an app that you can throwaway or mold as you need.

Tron does a few more good things, but the above is mainly what I’m using it for now in combo with my Polymer projects. To deep dive, go ahead and checkout my readme, but in the meantime…it’s super easy to get an Electron project up and running with “tron create” and “tron run”!

ALSO…

I did just recently become aware of Electron-Prebuilt. Great project – it looks like it installs Electron as a global dependency and allows you to use the CLI tool “electron” to run your app. It will assume nothing about your app and lets you author it however you want. My Tron-CLI is more opinionated with how things are setup and scaffolds and app and dev environment for you based on these opinions. Because of these opinions and application code, it does a fair bit more.

Also, Tron lets you have an Electron install per project, whereas Electron-Prebuilt uses a common one. I wouldn’t say that either is right or wrong, just a matter of preference.

Please by all means ignore Tron if it’s not right for you!

2 thoughts on “Tron (for Github’s Electron)”

  1. ~/projects/electron$ sudo npm install -g tron-cli
    Password:
    npm WARN deprecated win-spawn@2.0.0: use [cross-spawn](https://github.com/IndigoUnited/node-cross-spawn) or [cross-spawn-async](https://github.com/IndigoUnited/node-cross-spawn-async) instead.
    npm WARN engine prettyjson@0.8.1: wanted: {“node”:”>= 0.6.0 /usr/local/lib/node_modules/tron-cli/commands/cli
    tron-cli@0.2.4 /usr/local/lib/node_modules/tron-cli
    ├── win-spawn@2.0.0
    ├── commander@2.9.0 (graceful-readlink@1.0.1)
    ├── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, minimist@0.2.0, vinyl@0.2.3, multipipe@0.1.2, through2@0.5.1, chalk@0.5.1, lodash.template@2.4.1, dateformat@1.0.12)
    ├── fs-utils@0.6.5 (lazy-cache@0.2.7, graceful-fs@4.1.3, async@1.5.2, normalize-path@0.3.0, extend-shallow@2.0.1, relative@0.1.6, kind-of@2.0.1, js-yaml@3.5.3, delete@0.2.1, is-absolute@0.2.3, matched@0.3.2)
    └── gulp-download-electron@0.0.5 (progress@1.1.2, async@0.9.2, wrench@1.5.4, decompress-zip@0.0.4, github-releases@0.1.1)
    ~/projects/electron$ mkdir tron-sample
    ~/projects/electron$ cd tron-sample/
    ~/projects/electron/tron-sample$ tron create
    npm
    WARN package.json my-tron-app@0.0.1 No description
    npm WARN package.json my-tron-app@0.0.1 No repository field.
    npm WARN package.json
    my-tron-app@0.0.1 No README data
    npm WARN package.json my-tron-app@0.0.1 No license field.

    tron-app@0.2.1 node_modules/tron-app

    Setup finished. Try running your project – enter ‘tron run’

    /usr/local/lib/node_modules/tron-cli/node_modules/gulp-download-electron/index.js:252
    throw new PluginError(PLUGIN_NAME, error.message);
    ^
    Error: Cannot find electron v0.28.3 from GitHub
    at /usr/local/lib/node_modules/tron-cli/node_modules/gulp-download-electron/index.js:252:13
    at /usr/local/lib/node_modules/tron-cli/node_modules/gulp-download-electron/node_modules/async/lib/async.js:251:17
    at /usr/local/lib/node_modules/tron-cli/node_modules/gulp-download-electron/node_modules/async/lib/async.js:148:21
    at /usr/local/lib/node_modules/tron-cli/node_modules/gulp-download-electron/node_modules/async/lib/async.js:248:21
    at /usr/local/lib/node_modules/tron-cli/node_modules/gulp-download-electron/node_modules/async/lib/async.js:612:34
    at /usr/local/lib/node_modules/tron-cli/node_modules/gulp-download-electron/index.js:191:13
    at /usr/local/lib/node_modules/tron-cli/node_modules/gulp-download-electron/node_modules/github-releases/lib/github.js:35:16
    at Request._callback (/usr/local/lib/node_modules/tron-cli/node_modules/gulp-download-electron/node_modules/github-releases/lib/github.js:78:16)
    at Request.self.callback (/usr/local/lib/node_modules/tron-cli/node_modules/gulp-download-electron/node_modules/github-releases/node_modules/request/request.js:129:22)
    at emitTwo (events.js:87:13)
    ~/projects/electron/tron-sample$

    1. Hey Barton,
      It’s been awhile since I did anything with this project. It’s because when I started it, there wasn’t too many good Electron tools in the ecosystem, but it seems like right after I released it, suddenly everyone’s making some great tools that do similar things. AND they are recommended by Github in their docs. You are more than welcome to use my project, however I think you’ll get much more mileage out of the others and you’ll do stuff in a more accepted/standard toolset. One project that I’d highly recommend over mine is Electron Prebuilt. This and others can be found at https://github.com/electron-userland. My project definitely has some cool JS app helpers. I still occasionally use my https://github.com/bengfarrell/tron-app to get apps started, but not the CLI tool I built anymore.

      In your case, the error seems to be caused by the fact that older versions of Electron are no longer hosted by Github. If you did want to follow through and get my tool running, you could run tron create which will create a tron configuration in your project root. Change Electron 0.28.3 to the latest 0.36.8, and it should fix your issue. But again, I’m really not maintaining this anymore.

Comments are closed.