Helium is a Ruby application for running a Git-backed JavaScript package distribution system and CDN server. It comes with a web frontend that allows Git-hosted projects to be downloaded, built and served from a single domain, allowing any number of other sites to use the projects and receive automatic updates when new versions are deployed.
The deployer is designed to allow JavaScript packages to be easily shared between client websites without the need to copy-paste code from project to project. It allows you to run a centralized server on which JavaScript code is deployed from Git repositories, allowing you to easily push code updates to any sites using the hosted scripts. Client sites are able to specify which branch or tag of a package they wish to use, and code dependencies are transparently handled so that each site loads only the code it needs.
The system is based around the JS.Class package manager (jsclass.jcoglan.com/packages.html), which provides a pure-JavaScript dependency manager for on-demand loading of JavaScript objects. It requires only two files to be loaded initially: the JS.Class package loader and a list of package dependency data. Our deployer programmatically generates this package listing from metadata stored in Git repositories, so that client projects using this system do not have to maintain the list themselves. The only code required in each client project is then:
<!-- Step 1. Load JS.Class and the package listing --> <script type="text/javascript">JSCLASS_PATH = 'http://js.example.com/js/js.class/2.1.x/build/min';</script> <script type="text/javascript" src="http://js.example.com/js/js.class/2.1.x/build/min/loader.js"></script> <script type="text/javascript" src="http://js.example.com/js/packages.js"></script> <!-- Step. 2 Set the load path, and declare which branches to use --> <script type="text/javascript"> Helium.PATH = 'http://js.example.com/js'; Helium.use('ojay', '0.4.1'); Helium.use('panel', 'master'); </script>
After this, the require()
function can be used to load any object deployed to the central server on demand. See the above-linked JS.Class documentation for more info.
Before deploying this app, you will need Ruby, Rubygems, Passenger (mod_rack), and Git installed on your webserver. Helium’s web frontend assumes you will be using Rack to serve the application. You will also need these gems, though Rubygems should install these for you:
sudo gem install hoe grit jake packr oyster sinatra rack
To install from Rubyforge:
sudo gem install hoe helium
To install from GitHub:
sudo gem install hoe git clone git://github.com/othermedia/helium.git cd helium ln -s README.rdoc README.txt rake install_gem
With the gem installed, you can install a copy of the web app anywhere on your system using the +he install+ command with the name of the directory to create:
he install helium-app
This will give you the following files:
helium-app/ public/ style.css etc. access.yml config.ru custom.js deploy.yml
The access.yml
lists IP addresses from which users may make config changes to the app; by default it lists 0.0.0.0
, 127.0.0.1
and localhost
. The files deploy.yml
and custom.js
are editable through the web frontend; attempts to change these files from IPs not listed in access.yml
will be blocked.
To serve this application, just set up an Apache VHost whose DocumentRoot
is the helium-app/public
directory. Passenger should do the rest.
In addition, the Apache user will need read/write access to helium-app/deploy.yml
and helium-app/custom.js
, which are editable through the web frontend. The application will generate a directory at helium-app/lib
, which will be used to check out and build projects from Git, and will copy any generated JavaScript files to helium-app/public/js
– Apache will need read/write access to these directories.
For the rest of this article, we’ll assume the deployment app is running at js.example.com/js, and the app is stored in the directory helium-app
as described above.
To deploy a project using this system, two conditions must be fulfilled: the project must be hosted in a Git repository, and it must have a jake.yml
build file in its root directory. We use Jake (github.com/jcoglan/jake) to build checked-out projects and extract dependency data. Even if your project doesn’t need a complex build process, it must still declare the objects it provides and requires so it can be deployed using the package manager. Each package must provide provides
and (optionally) requires
fields in its metadata. For example, here’s a jake.yml
file for the Panel
package:
--- source_directory: . build_directory: . layout: together builds: min: shrink_vars: true private: true packages: panel: files: - panel meta: provides: - panel - Panel - PanelOverlay requires: - JS.Class - Ojay - Ojay.HTML - Ojay.ContentOverlay
The project must have a build called min
, and may have other builds. This deployment system exports the min
build for public use. You may use whatever compression settings you like for this build, and the project may contain any number of packages. See Jake (github.com/jcoglan/jake) for more documentation on these build files.
Note that objects listed under provides
and requires
should be the runtime reference names of JavaScript objects, and anything in the requires
list should be provided by some other package known to the deploy system.
If you’re starting a new project, Helium comes with a command line tool that generates some stub code, a jake.yml
file and a test page. Just run the following to create a new project, replacing project-name
with the name of your library.
he create project-name
After generating a project, you will need to edit its dependencies in jake.yml
and edit test/index.html
to reference your Helium server so that dependencies can be loaded.
Running jake
from the new project directory will build the library for you and generate a JS.Packages manifest for it. The test page uses require()
to load your library, so you’ll know if any of its dependency data is missing.
Our deployment system performs the following steps on every project registered:
-
Copies its Git repo into
helium-app/lib/repos/{project name}
. If the repo is already present, we usegit fetch
to update it, otherwise we usegit clone
. -
Exports the head revision of every branch and every tag in the repo into its own directory at
helium-app/lib/static/{project}/{branch}
. -
Builds every exported copy using Jake, if a
jake.yml
is present. This stage extracts theprovides
andrequires
data from the Jake build process, keeping track of which build file provides which JavaScript objects. -
Generates a file at
helium-app/public/js/packages.js
, which lists all the files that Jake has built and which objects they provide using the JS.Class package manager API (see jsclass.jcoglan.com/packages.html).
On first accessing js.example.com, there will be no JavaScript projects listed. To add projects, we need to edit a YAML file listing projects and their Git URIs. To support the client-side package manager, the deploy system must at least have the JS.Class project registered. Projects are listed as key-value pairs by project name and Git URI.
Go to js.example.com/config and enter the following projects:
--- js.class: git://github.com/jcoglan/js.class.git ojay: git://github.com/othermedia/ojay.git panel: git@github.com:othermedia/panel.git
After clicking ‘Save’, these projects should be listed in the sidebar. Check all three, and hit ‘Deploy’ to import them all into the deploy system. After a few seconds you should see a log output telling you which projects and branches were built. There should also now be a JavaScript file at js.example.com/js/pacakges.js that lists the files available on the server.
The client side of the distribution system is the JS.Class package manager (documented at jsclass.jcoglan.com/packages.html). This provides a dependency manager and a simple way to load JavaScript objects on demand. To set it up, you just need the following in the head of your HTML pages:
<script type="text/javascript">JSCLASS_PATH = 'http://js.example.com/js/js.class/2.1.x/build/min';</script> <script type="text/javascript" src="http://js.example.com/js/js.class/2.1.x/build/min/loader.js"></script> <script type="text/javascript" src="http://js.example.com/js/packages.js"></script> <script type="text/javascript"> Helium.PATH = 'http://js.example.com/js'; Helium.use('ojay', '0.4.1'); Helium.use('panel', 'master'); </script>
To explain the above code: we set the special variable JSCLASS_PATH
to tell JS.Class where it is being hosted; this lets the JS.Class package manager load other parts of the JS.Class library. We then load two files: the JS.Class core and package loader (loader.js
) and our package listing generated by the deploy system (packages.js
). Finally, we need to set some configuration variables; Helium.PATH
should be the directory from which we’re serving deployed script files, and Helium.use()
must be called to tell the package manager which projects and which branch of each project we want to use.
Note that the above only loads two small scripts – the Helium.use()
calls do not load any extra code, they just tell the system which version of each project to use if and when we need to load them.
With the above script tags in place, you should use the require
function to declare which objects you want to use in each inline script. For example:
<script type="text/javascript"> require('Ojay.HTML', 'PanelOverlay', function() { var overlay = new PanelOverlay({width: 300, height: 200}), title = Ojay.HTML.h2('Hello, world!'); overlay.setContent(title) .center() .show('fade'); }); </script>
Only require()
the objects you’re directly using. The package manager should handle loading any other objects your code depends on; that’s what all the provides
and requires
data was for in the configuration files mentioned above. The package manager only downloads extra scripts if any of the objects needed to run your code are not defined; no script is ever loaded more than once per page.