Deploying Dart Code to GitHub Pages

‹prev | My Chain | next›

There are still hundreds of things to do in the Dart version of the ICE Code Editor, but tonight I push to beta anyway.

But first, I am going to check one more time that the Dart version and the JavaScript version can co-exist. I start up the node.js server in the JavaScript version and take a look at the current list of projects in localStorage:



Then I shut down the node.js application server down and start the Dart server on the same port (3000) as the node.js server:

➜  example git:(master) PORT=3000 dart app.dart
Server started on port: 3000

The ports need to be the same so that both ICE versions have access to the same localStorage database.

I compile my Dart frontend app to JavaScript:

➜  public git:(master) dart2js -ofull.dart.js full.dart

And finally load the compiled Dart in Chrome:



Yay! The list of projects remains the same. For good measure, I perform a few updates in both versions and verify that I can see the changes between the two. Everything looks good, so I think that I am good for beta.

The generated JavaScript is quite large:

➜  public git:(master) ls -lh full.dart.js
-rw-r--r-- 1 chris chris 647K Jun  6 17:24 full.dart.js

It will be served with gzip compression, but the --minify option in dart2js should make the payload that much smaller:

➜  public git:(master) dart2js --minify -ofull.dart.js full.dart
➜  public git:(master) ls -lh full.dart.js                      
-rw-r--r-- 1 chris chris 283K Jun  6 20:00 full.dart.js

That is a nice savings. Except the code does not actually work. The ICE buttons show up. The menus seem to work. But the ACE code editor, which is accessed via js-interop does not show up. And, in the console, I see the following unhelpful exception:

Uncaught NoSuchMethodError : method not found: 'giR'
Receiver: Instance of 'pk'
Arguments: [] 

Bummer. I will try that with a newer version of Dart at some point in the future. I am using one from almost a month ago:

➜  public git:(master) dart --version
Dart VM version: 0.5.7.3_r22659 (Mon May 13 20:57:19 2013) on "linux_x64"

For now, I am going to deploy the un-minified version of the application.

The http://gamingjs.com site is published with GitHub pages (currently from a private repository). In my gh-pages branch, I create an ice-beta directory to hold the application. In there, I add a pubspec.yaml to describe my dependencies:

name: full_screen_ice
version: 0.0.1
description: Full screen ICE
author: Chris Strom <chris@eeecomputes.com>
homepage: https://github.com/eee-c/ice-code-editor
dependencies:
 ice_code_editor:
    git:
      url: https://github.com/eee-c/ice-code-editor.git
      ref: gamingjs-beta

I have not published the ICE Code Editor to Dart Pub, so I am using a git dependency. I am going to need the specified gamingjs-beta reference, so back in my ICE repository, I tag the current git HEAD:

➜  ice-code-editor git:(master) git tag -am "Mark beta point" gamingjs-beta
➜  ice-code-editor git:(master) gp origin --tags
Counting objects: 1, done.
Writing objects: 100% (1/1), 174 bytes, done.
Total 1 (delta 0), reused 0 (delta 0)
To git@github.com:eee-c/ice-code-editor.git
 * [new tag]         gamingjs-beta -> gamingjs-beta

Next I pub install to get ICE and all of the other dependencies installed. Unfortunately, I hit a snag here. The packages install fine, but Dart's pub uses a system cache for packages. Normally this is pretty great, but GitHub pages do not support symbolic links:

➜  ice-beta git:(gh-pages) ✗ pub install
Resolving dependencies...
Dependencies installed!
➜  ice-beta git:(gh-pages) ✗ cd packages
➜  packages git:(gh-pages) ✗ ls -l
total 20
lrwxrwxrwx 1 chris chris 64 Jun  6 21:00 browser -> /home/chris/.pub-cache/hosted/pub.dartlang.org/browser-0.5.7/lib
lrwxrwxrwx 1 chris chris 87 Jun  6 21:00 ice_code_editor -> /home/chris/.pub-cache/git/ice_code_editor-f2f091bcf930ba4cb20528805c0dba0663fafe55/lib
lrwxrwxrwx 1 chris chris 60 Jun  6 21:00 js -> /home/chris/.pub-cache/hosted/pub.dartlang.org/js-0.0.22/lib
lrwxrwxrwx 1 chris chris 61 Jun  6 21:00 meta -> /home/chris/.pub-cache/hosted/pub.dartlang.org/meta-0.5.7/lib
lrwxrwxrwx 1 chris chris 65 Jun  6 21:00 unittest -> /home/chris/.pub-cache/hosted/pub.dartlang.org/unittest-0.5.7/lib

I cannot think of any other way to solve this than brute force, so I remove each of those symbolic links and copy the actual package source in their place:

rm browser; cp -r /home/chris/.pub-cache/hosted/pub.dartlang.org/browser-0.5.7/lib browser
rm ice_code_editor; cp -r /home/chris/.pub-cache/git/ice_code_editor-f2f091bcf930ba4cb20528805c0dba0663fafe55/lib ice_code_editor
rm js; cp -r /home/chris/.pub-cache/hosted/pub.dartlang.org/js-0.0.22/lib js
rm meta; cp -r /home/chris/.pub-cache/hosted/pub.dartlang.org/meta-0.5.7/lib meta
rm unittest; cp -r /home/chris/.pub-cache/hosted/pub.dartlang.org/unittest-0.5.7/lib unittest

That is a bit unfortunate. I wonder if a --no-cache option could make its way into pub at some point in the future? I will worry about that another day. For now, I create index.html in ice-beta with the following contents:

➜  ice-beta git:(gh-pages) ✗ cat index.html 
<head>
  <script src="packages/browser/dart.js"></script>
  <script src="main.dart" type="application/dart"></script>
</head>

I then add main.dart and the accompanying main.dart.js (both renamed from the full.dart equivalents from my example directory earlier):

➜  ice-beta git:(gh-pages) ✗ cat main.dart
import 'package:ice_code_editor/ice.dart' as ICE;

main()=> new ICE.Full();
➜  ice-beta git:(gh-pages) ✗ ls -lh main.dart.js 
-rw-r--r-- 1 chris chris 647K Jun  6 21:24 main.dart.js

That does it. I add the new ice-beta directory to my gh-pages branch and push it up to the GitHub repository. Then I load up http://gamingjs.com/ice-beta and…

It works!



The Dart version of the ICE code editor is officially in beta and is very definitely running my Dart code. There is still a ton to be done. In addition to missing features in the editor itself, I need to cut down on the size of everything. This will eventually reside in application cache so it is not a showstopper to be this large, but still, any little bit helps.

I am a little bummed about the non-working --minify option on dart2js. The system cache of pub packages was a nuisance as well. But all-in-all, this was pretty smooth. I am excited to have reached beta. Now to push for 1.0!


Day #774