Thursday, June 6, 2013

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: (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 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 <>
      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)
 * [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/
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/
lrwxrwxrwx 1 chris chris 61 Jun  6 21:00 meta -> /home/chris/.pub-cache/hosted/
lrwxrwxrwx 1 chris chris 65 Jun  6 21:00 unittest -> /home/chris/.pub-cache/hosted/
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/ 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/ js
rm meta; cp -r /home/chris/.pub-cache/hosted/ meta
rm unittest; cp -r /home/chris/.pub-cache/hosted/ 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 
  <script src="packages/browser/dart.js"></script>
  <script src="main.dart" type="application/dart"></script>
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 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

No comments:

Post a Comment