1. Yeoman on Openshift


    So I’ve really started liking using yeoman by Google for front end development. Yeoman is a tool to help frontend developers quickly start new projects, install new dependencies  and build production ready versions of your application.  

    I’ve also really like using Red Hat’s Openshift PaaS platform to host my applications. 

    Naturally I’ve wanted to use both of these technologies together. I had to do some hacking to get this working so I wanted to share.  

    First thing you need to do is create a openshift account if you don’t have one and install the command line tools. If you haven’t done this check out https://openshift.redhat.com/community/get-started

    Next you need to create a new app run

    rhc app create -a osyeoman -t nodejs-0.6

    The rhc tool will print something like

    osyeoman @ http://osyeoman-curtisapps.rhcloud.com/
      Application Info
    nbsp; ================
        Created   = Jan 25  1:02 AM
        UUID      = 411c3cacab5344b896ab33be674cd673
        Gear Size = small
        Git URL   = ssh://411c3cacab5344b896ab33be674cd673@osyeoman-curtisapps.rhcloud.com/~/git/osyeoman.git/
        SSH URL   = ssh://411c3cacab5344b896ab33be674cd673@osyeoman-curtisapps.rhcloud.com
    pplication osyeoman was created.

    Notice the SSH URL you’ll want to ssh into that host

     ssh 411c3cacab5344b896ab33be674cd673@osyeoman-curtisapps.rhcloud.com

    Yeoman has this excellent script that will test your environment for required dependencies. Run 

    curl -L get.yeoman.io | bash

    You’ll see that we are missing some required dependencies in our openshfit environment. 

       ✖ Compass [not installed]
          * To install Compass use: sudo gem install compass 
       ✖ NodeJS [newer version required ≥ 0.8.0]
          * I recommend you grab a fresh NodeJS install (≥ 0.8.0) from: http://nodejs.org/download/ 
       ✖ OptiPNG [not installed]
          * Download OptiPNG from: http://optipng.sourceforge.net/ 
       ✖ PhantomJS [not installed]
          * Visit http://phantomjs.org/download.html#linux to download the PhantomJS binary package
       ✖ Yeoman [not installed]
          * To install Yeoman you need to have NodeJS (≥ 0.8.0) installed first

    Openshift allows us to write to a data directory ($OPENSHFIT_DATA_DIR). Also openshift allows us to run a custom script on app deploy. I’ve made a git repo with some of the openshift config and the optipng binary. Clone this repo into the app you just created.

    git remote add github -m master https://github.com/curtisallen/openshift-yeoman.git
    git pull -s recursive -X theirs github master

    Take a look at the script in .openshift/action_hooks/build This script will install required dependencies for yeoman when your app deploys.

    Also in .openshift/action_hooks/pre_start_nodesjs-0.6 you’ll see some environment setup config as well as where we kick off the yeoman build. 

    At this point our openshfit instance is configured to use yeoman. 

    In our local osyeoman repo we can issue yeoman commands like 

    yeoman init angular

    You’ll probably get a conflit with yeoman and package.json make sure you select the don’t overwrite option.

    If you push your new changes to openshift you’ll notice that yeoman is prompting with questions so the site build isn’t working. This is where I had to hack some of the yeoman code to bypass these questions.

    Login to your openshfit server open the $OPENSHIFT_DATA_DIR/bin/_yeomaninsight script and replace for os.path.expanduser(‘~’). with os.environ.get(‘OPENSHIFT_DATA_DIR’) the line should look like

    INSIGHT_DIR = os.path.join(os.environ.get('OPENSHIFT_DATA_DIR') + '.' + CLI_NAME, 'insight')

    For some reason the building of a cache manifest doesn’t work on openshift. If any of you know why I’d appreciate the help. But for now I’m just going to disable it.

    Edit $OPENSHIFT_DATA_DIR/lib/node_modules/yeoman/tasks/yeoman.js  remove the manifest entries from the targets object. The final project should look something like

    var targets = {
        default   : '               rjs concat css min img rev usemin',
        usemin    : 'usemin-handler rjs concat css min img rev usemin',
        text      : 'usemin-handler rjs concat css min     rev usemin',
        buildkit  : 'usemin-handler rjs concat css min img rev usemin html:buildkit',
        basics    : 'usemin-handler rjs concat css min img rev usemin html:basics',
        minify    : 'usemin-handler rjs concat css min img rev usemin html:compress',
        test      : 'usemin-handler rjs concat css min img rev usemin'

     Almost there! Now edit $OPENSHIFT_DATA_DIR/lib/node_modules/yeoman/lib/plugins/insight.js Look for if(!err) and change it to if(true) the final result should look like this

    if (true)  {
       return insight.record(cmdStr, opts.cb);

    Now when we push the application to openshift yeoman will build a production version of the app. All that’s left is to tell node to serve up your yeoman built app which will be in $OPENSHIFT_REPO_DIR/dist with node or whatever backend you decide to use. 

    You can find and example repo on my github

    There’s gotta be a better way to do this without modifying Yeoman source code, but I couldn’t figure out exactly how to do that. Hit me up with suggestions!  

    1 year ago  /  0 notes  / 

  2. JS Geo 2013

    Last week I attended JSGeo a 2 day Geo spatial JavaScript conference in Denver. Overall it was a great experience and I learned a lot. The first day was comprised of 20 minute about geospatial web technology. There were talks about Leaflet, OpenLayers, ESRI, D3, WebGL and many many others.

    Day 2 consisted of workshops. I sat in Steven Citron-Pously’s (@TheSteve0) workshop about using OpenShift, MongoDB, and Node.JS to do spatial queries. The workshop basically consisted of adding a registry of all the national parks in the US to MongoDB, turning on geospatial indexing, and using node to run a webservice that queries the registry. More detail on this workshop can be found on OpenShift’s website

    I wanted to build a visualization on top of this park data and use some of the technologies I learned about at JSGeo. I being a big fan of AngularJS for client side webapps and wanted to dabble with Matt Priour’s (@mattpriour) brand new AizmuthJS library. Basically AizmuthJS is a set of directives that makes it super simple to add a map to your Angular app. 

    Let’s get into the Code:

    First the html 

    <body ng-controller="NodewsosCtrl">
    <div leaflet-map zoom="4" center="39.83,-98.58" mapclick="mapClick()" style="padding: 15px">
    <az-layer name="streets" lyr-type="tiles"></az-layer>

    That’s basically all you need to embed a Leflet map on a page. I wanted to allow the user to click on the map and query mongo for nearby parks. I had to modify AizmuthJS a little bit to accept the ‘mapclick’ attribute this is then mapped to my Angular controller.

    function NodewsosCtrl($scope, $log, $http, $injector) {
    	var mapService = $injector.get('az.services.layers');
    	$scope.map = null;
    	$scope.mapClick = function(e) {
    		$log.log("Map click event at " + e.latlng);
    		var limit = 10; // limit of points to return 
    		$http.get('/ws/parks/near?lat=' + e.latlng.lat + '&lon=' + e.latlng.lng 
    			+ '&limit=' + limit)
    			.success(function(response) {
    				//$log.log("Got this response: " + angular.toJson(response));
    				angular.forEach(response, function(park) {
    					L.marker([park.pos[1], park.pos[0]]).addTo($scope.map)
    						.bindPopup('<p>' + park.Name + '</p>');

    Whenever someone clicks on the map $scope.mapClick is called. Then it’s just a matter of iterating thru each park and adding a placemark to the map.

    You can check out the running app here: https://nodewsos-curtisapps.rhcloud.com/

    The source code is here: https://github.com/curtisallen/jsgeo13 

    1 year ago  /  0 notes  /