Cross platform desktop apps with Meteor and Electron

Today it’s much more easy than this recipe. Just go here and read the doc ツ or go read this very good post from Jeff Wear @ Mixmax

I saw a question on crater.io and I allready use Atom as my default editor for every Meteor project I work on so it was a tempting challenge (not to mention I need a desktop app for one of my projects).

So we are going to build the leader board app as a desktop app, but only the client part of the Meteor app. Like a cordova app but with Electron if you prefer. It can work offline and get updated by the server.

First in the terminal we create the folder to mess around

mkdir electron-leaderboard && cd electron-leaderboard

Then we create the leaderboard example

meteor create --example leaderboard

As Meteor tell’s you, you have to go in the folder it just created and start it. You can just [ctrl] + [c] out of it and now we are going to deploy the server off the leaderboard app (you might want to change that name since I deployed it first)

meteor deploy electron-leaderboard.meteor.com

Then we need to build the Meteor client and server code

meteor build ../. --server electron-leaderboard.meteor.com

At this point we have an archive that contains the Meteor client and server. We need to decompress it

cd .. && tar xzf leaderboard.tar.gz

and in there we are going to head to the web client

cd bundle/programs/web.browser/

Here we ave our compiled client web application, but it has horrible file names so lets change that (horrible name might defer on your system)

mv 7f34d936fe9105bb301647e4132ec8c80f148a96.js app.js
mv e60597c923303d5681465135816d98a110781aae.css app.css

Now in here for Electron to work we need three files : package.json , main.js and index.html . Good news you don’t need to write the first two files. We can just copy past from the Electron quickstart guide

And the third file you ask ? just go to the web page we did deploy electron-leaderboard.meteor.com do a view page source and copy it into an index.html file here in the web.browser folder. Before you save what you just pasted you need to rewrite the css and js files path to app.css and app.js . Make sure you remove the slash before the file name. Now save this index.html

And now what ? now we are done ☺ just type :

electron .

You need Electron installed with npm for this command to work. If it doesn't, go npm install it with the method describe on Electron first page.

Well that does work and it open an easy start for Meteor and Electron. Now I have to go figure why my complicated project that has a lot of packages crash with this method -_-;

I’ll might tell you more in another post…

TL;DR

If you don't want all the command-line but still want to try, you can install Electron then download this zip extract it somewhere, go in it with a terminal and do :

electron .