Introduction

In addition to a Ruby on Rails web application, SongLynx also has an Apache Flex component.  As SongLynx’s technical founder, being able to develop Flex applications is a primary requirement for my computer.  This post is the third in a series detailing how I set up a web development environment on a Samsung XE303C12 Chromebook.  The first post, which you can read here, describes why I needed to do so, as well as getting a Linux environment with Ruby on Rails, Emacs, Git, and PostgreSQL set up so that I can work on projects stored in Git repositories on BitBucket and push the changes to a live site hosted on Heroku.  The second (much shorter) post, located here, details how I configured Emacs more to my liking.  This post details how I set up the Apache Flex SDK and integrated it into my workflow.  My goals are:

• Download and install SDK
• SDK Setup (Command-line Access, etc.)
• Editor Setup (An Emacs Editing Mode)
• Hello World and Test in Chrome under ChromeOS

Downloading and Installing the SDK

Installing and configuring the Apache Flex SDK proved to be a lot more difficult than I originally anticipated.  I think there were several things at work: 1) there are a couple of “official” places to get the SDK, and they each have conflicting instructions; 2) the community has invested a decent amount of time and effort to get things running, but many of those posts have become outdated; and 3) support for Flex-allied technologies is not uniform across operating systems — Adobe’s AIR, for example, is no longer supported on Linux.  At any rate, on with the show.

Note: the instructions that follow are distilled from a fair amount of dead-ends; I’ve tried to ensure that I’ve untangled the various leads I followed and have only presented what’s necessary, but I can’t be sure that’s the case.

The first thing I did was download the SDK from its GitHub repository [1], navigated inside the directory, and switched branches:

git clone https://github.com/apache/flex-sdk.git
cd flex-sdk
git checkout develop

I followed the README in the cloned repository (also available at the GitHub repository webpage) pretty closely; it seemed to work where the instructions on the Apache Flex web page and in Apache’s Wiki did not.  That being said, I think that some of the instructions are presented out-of-order; for example, telling you to set environment variables for packages that you don’t have yet seems a little odd.

The next thing I did was install the necessary additional packages: a legacy version of Adobe’s AIR SDK, an Adobe Flash Player content debugger, an Adobe Flash Player, Apache Flex Text Layout Framework, Apache Flex BlazeDS, Ant, and a Java SDK.

Note: I started in the directory /home/bill/Documents/workspace/flex.  workspace is where I keep subdirectories like ror and flex with sub-subdirectories for each of my projects.  Some packages we install below expect to be in the same parent directory as the Flex SDK; if you don’t do that, you need to set some additional environment variables.

Adobe’s AIR SDK

wget http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRSDK.tbz2
mkdir air-sdk
mv AdobeAIRSDK.tar air-sdk/
cd air-sdk/
tar -xvf AdobeAIRSDK.tar
cd ..

Flash Player Content Debugger

wget https://fpdownload.macromedia.com/pub/flashplayer/updaters/11/flashplayer_11_sa_debug.i386.tar.gz
mkdir flashplayer-debugger
mv flashplayer_11_sa_debug.i386.tar.gz flashplayer-debugger/
cd flashplayer-debugger/
gunzip flashplayer_11_sa_debug.i386.tar.gz 
tar -xvf flashplayer_11_sa_debug.i386.tar 
cd ..

Flash Player

mkdir playerglobal
cd playerglobal/
wget http://download.macromedia.com/get/flashplayer/updaters/11/playerglobal11_1.swc
mkdir 11.1
cp playerglobal11_1.swc 11.1/playerglobal.swc
cd ..

Apache Flex Text Layout Framework

git clone https://git-wip-us.apache.org/repos/asf/flex-tlf.git flex-tlf
cd flex-tlf
git checkout develop
cd ..

Apache Flex BlazeDS

git clone https://git-wip-us.apache.org/repos/asf/flex-blazeds.git flex-blazeds
cd flex-blazeds
cd ..

Ant

sudo apt-get install ant

Java Development Kit

sudo apt-get install openjdk-7-jdk

Miscellaneous Configuration & Building

Then I needed to create ANT_HOME and JAVA_HOME environment variables and add them to my path.  I added the following code to the end of my ~/.bashrc file:

### Added by me to install Apache Flex 
export ANT_HOME="/usr/share/ant" 
export JAVA_HOME="/usr/lib/jvm/java-1.7.0-openjdk-armhf" 
export PATH="$PATH:$ANT_HOME/bin:$JAVA_HOME/bin"

Next, I moved into the flex-sdk directory and set up and environment properties file:

cp env-template.properties env.properties

I added the following lines (you’ll see the start of each line commented out waiting for you to uncomment and fill it in).  Note that you’ll need to replace “bill” with your username.

env.AIR_HOME=/home/bill/Documents/workspace/flex/air-sdk  
env.FLASHPLAYER_DEBUGGER=/home/bill/Documents/workspace/flex/flashplayer-debugger
env.PLAYERGLOBAL_HOME=/home/bill/Documents/workspace/flex/playerglobal

Then, I built the SDK with

ant main

And I also built the the ASDoc tool with

ant asdoc-package

 

Command-Line Access

Next, I added the Flex SDK that I just compiled to my path, so that I needn’t specify the location of mxmlc every time I want to compile a program.  To do so, I added the following code to my .bashrc file:

### Added by me for access to the Flex command-line tools
export FLEX_HOME="/home/bill/Documents/workspace/flex/flex-sdk"
export PATH="$PATH:$FLEX_HOME/bin"

Emacs Configuration

I installed a mode for actionscript via M-x package-install RET actionscript-mode and adding the following to my ~/.emacs file:

;;===== Flex specific ===== 
;;(setq auto-mode-alist (append (list \
;; '("\\.as\\'" . actionscript-mode) \
;; '("\\.\\(xml\\|xsl\\|rng\\|xhtml\\|mxml\\)\\'" . nxml-mode) \
;; ;; add more modes here \
;; ) auto-mode-alist))

When I open a .mxml, it’ll use nxml-mode.  When I open a .as, it’ll use actionscript-mode.

End-to-End Test

Now that the SDK is installed, we’ve got access to the utilities from the command line without specifying the full path, and we’ve made editing our code in Emacs a little easier, I wanted to perform an end-to-end test.  I started by creating a simple Flex project:

cd ..
mkdir test-project
touch helloWorld.mxml

Then, I put the following code into helloWorld.mxml:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" width="640" height="480"> 
 
  <s:layout> 
    <s:BasicLayout /> 
  </s:layout> 
 
  <s:Label text="Hello World!" horizontalCenter="0" verticalCenter="0" /> 
 
</s:Application>

After, I built the application from within its directory with:

mxmlc helloWorld.mxml

Finally, I copied it to my ~/Downloads folder and tested it in Chrome under ChromeOS.  Success!

Loose Ends

The steps I’ve described thus far give you sort of a minimally acceptable Flex development environment under Linux.  There are some loose ends that could be tied up to improve the experience, but I haven’t had time to track them all down.  Here’s a (non-exhaustive) list:

• An Emacs editing mode that’ll properly account for files with both MXML and ActionScript components in them.  I think you could tinker with some of the existing multi-mode packages to do this — like mumamo, polymode, or multi-mode.
• Having the SDK installed in a user directory is probably less than ideal.  I probably should have built it in /usr/local.
• I haven’t been able to get the flash player debugger to work.  With simple projects it’s not such a big deal: you can build and then test under ChromeOS, but for projects where you actually need to debug, you might be in trouble.
• I haven’t yet built or modified projects of any appreciable complexity; it’s probably a pain to build them unless you use Ant.

Summary

If you’ve followed along, at this point you should be able to develop and test Flex applications on your Samsung XE303C12.  There are definitely things that can be improved, some of which I’ve listed in the Loose Ends section above.

References

1. apache / flex-sdk.  https://github.com/apache/flex-sdk.  Retrieved 2016-05-03.
2. tgrk / .emacs.  https://github.com/tgrk/.emacs/blob/e71769ceb48a809dddcd52a162ed3a0e81bf279e/.emacs.  Retrieved 2016-05-03.

 

 

Introduction

After I set up a basic development environment on my Samsung XE303C12 Chromebook (details in this previous post), I wanted to customize my Emacs installation to better fit my workflow (Ruby on Rails web development, in particular).  Here’s the list of things I did:

• Set up MELPA
• Installed a theme (flatland-black)
• Added a mode (web-mode)

MELPA Setup

I use MELPA (in addition to ELPA) to manage my Emacs packages.  I really don’t have an opinion on the MELPA vs. Marmalade debate: once upon a time I used MELPA and it’s worked for me, so I haven’t put any more thought into it.  For the base installation of Emacs installed via apt-get, I couldn’t find any of the common initialization files: no .emacs, no .emacs.d/init.el, and no site-start.el.  I made a .emacs file in my home directory and added the following, cribbed from [1], to enable MELPA packages:

(require 'package) ;; You might already have this line 
(add-to-list 'package-archives 
             '("melpa" . "https://melpa.org/packages/")) 
(when (< emacs-major-version 24) 
 ;; For important compatibility libraries like cl-lib 
 (add-to-list 'package-archives '("gnu" . "http://elpa.gnu.org/packages/"))) 
(package-initialize) ;; You might already have this line

A New Theme

After getting MELPA working, I wanted to install a new Emacs theme.  I like light-on-dark themes and syntax highlighting for editing code and text, so I wanted a theme that offered those things.  I’ve used flatland-black in the past, so I decided to go with that again this time.  I suppose if I ever switch to Sublime Text I’ll be in good shape, as this is a port of one of its themes for Emacs.  I installed the theme from within Emacs via:

M-x package-install RET flatland-theme

Where M indicates the meta-key (alt, typically) and RET indicates you press enter/return and it’ll prompt you for input; in this case, it wants the package name you’d like to install.

I then edited my .emacs file to have the theme load on startup by adding the following to the end (after the MELPA block we added earlier):

(load-theme 'flatland-black t)

Additional Modes

Emacs is installed with a bunch of modes, but editing embedded ruby files (.erb) is pretty painful without an additional mode.  I use web-mode [2], which supports a bunch of other types of embedded parts/blocks, like CSS and JavaScript.  I tried to install it from within Emacs via M-x package-install RET flatland-theme, but it failed.  I had to install it via:

M-x package-list-packages

package-list-package opens a mini-buffer with a list of all the packages available in the repositories told Emacs it can look in.  Then, I paged down to web-mode, selected it, switched to the newly opened mini-buffer that shows some details about it, and chose install.  I opened a .erb file and used M-x web-mode RET to ensure that the mode loaded correctly.

After I was sure that the mode worked, I edited my .emacs file so that web-mode would automatically be started when I opened embedded Ruby (and some additional) files;  The following is cribbed from [2]:

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.phtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.[agj]sp\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.as[cp]x\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.mustache\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))

Summary

If you’ve followed along, you’ve got easy access to a lot more Emacs packages from its package manager (thanks to MELPA), you’ve installed a nice theme, and you’ve added a new mode to handle embedded Ruby files (or embedded CSS, JavaScript, etc.). Even if you don’t like flatland-black or don’t want to use web-mode, you can modify the instructions in the latter two sections to install a theme or mode of your choice that better fits your workflow; in particular, you can use reference [3] to browse for a theme that fits your preferences and find out if it’s available from MELPA.

References

1. [MELPA: ] Getting Started.  https://melpa.org/#/getting-started.  Retrieved 2016-04-30.
2. web-mode.el.  http://web-mode.org.  Retrieved 2016-05-01.
3. Emacs Themes.  https://emacsthemes.com.  Retrieved 2016-05-01.

Introduction

My new-ish — I bought it in late January — Alienware laptop conked out on me.  It won’t POST: the logo has a light but neither the fan nor the screen start.  I bought it at Microcenter, so I took it back there to the support center.  They’re sending it to Dell for repair: unfortunately it’s going to take 10 – 14 (!) business (!) days (!) to get it back.  In the interim, all I’ve got is my old, busted up MacBook Pro that the Alienware replaced (late-2011, cracked trackpad, etc.) and a Samsung XE303C12 Chromebook (circa late-2012).  I decided to try to set up a development environment on the aforementioned Chromebook, as the MBP is nightmarish to use unless I can plug in external peripherals (especially a mouse); that makes it pretty much only useful as a desktop.

This post chronicles the trials and tribulations of setting up a reasonable web development environment on the Chromebook.  Honestly, in retrospect, I probably should have just used a cloud-based development environment like nitrous.io or set up a cheap AWS micro instance and tailored it to my liking, but I like the added flexibility of being able to work offline.  I think I’m also probably cheap.  Here were my goals with this project, broken up into bite-sized pieces:

• Clone a Ruby-on-Rails project from my BitBucket repository
• Make modifications to said RoR project (preferably with my favorite editor, Emacs)
• Test my modified RoR project locally in an environment as close as possible to a Heroku dyno
• Push the modifications back to my BitBucket repository
• Push the modified project to Heroku

The Samsung XE303C12

I can’t remember how much this thing originally cost me; it looks like the MSRP was $250USD when it was released, so probably close to that.  Right now, it’s available on Amazon for about $180USD; note that there’s a newer (and probably much more capable) model available at pretty much the same price.  Unsurprisingly, things have come a long way since 2012-2013.  😉

Here’s the spec sheet for the little Chromebook that could: http://www.samsung.com/us/computer/chrome-os-devices/XE303C12-H01US-specs.  It’s got an Exynos 5 Dual processor,  a Samsung-designed implementation of the ARM Cortex-A15, 2GB of RAM, 16GB of eMMC storage, and an 11.6″ 1366 x 768 screen.  TL/DR?  It’s sort of slow, doesn’t have all that much memory, has a relatively small amount of slow(er) storage, and has a little screen.  I made specific choices with respect to the development environment to try to account for these shortcomings.

I should also note that I actually do enjoy using it, despite what I said above about its specifications.  I think the keyboard’s nice for the form-factor (it omits a lot of extraneous keys).  It’s also really light and the battery life is decent.

Setting up a Linux Environment

There are (at least) 2 ways to go about getting a Linux environment on a Chromebook: 1) ChrUbuntu and 2) Crouton.  ChrUbuntu will give you a full-fledged dual boot whereas Crouton runs side-by-side with ChromeOS.  I went with the latter because anecdotal evidence seemed to suggest that it was easier to set up.  I also haven’t maintained a full-blown Linux distribution on a laptop since college (early 2000’s) and my difficulty with it then colors my perception even now; that experience was probably my fault as I stubbornly insisted on using Slackware instead of one of the “beginner” distros.

The GitHub page for Crouton is here (https://github.com/dnschneid/crouton); it’s got detailed instructions about things like enabling developer mode, downloading Crouton, and running it.  I also made heavy use of reference [3] (see below).  The particular command of interest for my setup was:

sudo sh ~/Downloads/crouton -r trusty -t audio,cli-extra,core,extension,keyboard,xfce,xiwi

That’ll install Ubuntu Trusty Tahr with the XFCE window manager, integration with ChromeOS tabs, and a few extras.  The Unity desktop is available, but given the specs I listed above, I thought I’d go with something more light-weight.  Note: this step takes awhile.

Initial Setup: Emacs, Git, Ruby, Rails, Etc.

Because I’ll be deploying my application to Heroku, I wanted an environment as similar to a Heroku dyno as possible for development and testing.  That means PostgreSQL instead of MySQL, among other things.

The first thing I did after starting XFCE4 was install emacs (gotta edit those config files somehow):

sudo apt-get install emacs

I also created ~/.bash_aliases and added alias emacs=”emacs -nw” because I dislike the default behavior of opening a new window for emacs; I also think the X version is ugly.

I realized that man wasn’t installed by default (?!), so I installed that as well with sudo apt-get install man.

Next, I installed Ruby, Rails, etc.  I mostly followed [4] here, so I started by installing the dependencies.  This is as per [4]: I didn’t prune out the MySQL or SQLite installations.  I also didn’t install PostgreSQL yet; I did that later.

sudo apt-get update
sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties libffi-dev

I’m using rbenv to manage versions.  Again, following [4]:

cd
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL

git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
exec $SHELL

git clone https://github.com/rbenv/rbenv-gem-rehash.git ~/.rbenv/plugins/rbenv-gem-rehash

rbenv install 2.3.0
rbenv global 2.3.0
ruby -v

gem install bundler

Next, I set up Git per [5]:

git config --global color.ui true
git config --global user.name "YOUR NAME"
git config --global user.email "YOUR@EMAIL.com"
ssh-keygen -t rsa -b 4096 -C "YOUR@EMAIL.com"

Note:  you’ve got to replace “YOUR NAME” and “YOUR@EMAIL.com” with … well … your name and email address, respectively.  Then, I went to my BitBucket account and added the new key with “Chromebook” as the label.  Finally, I tested my setup by successfully cloning my repository to my local machine.

I continued to set up Ruby on Rails.  I needed to install NodeJS (dependencies!  CoffeeScript, Asset Pipeline, etc.) and Rails.

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs
gem install rails -v 4.2.6
rbenv rehash
rails -v

Getting Ready for Heroku

As I mentioned before, my end-goal was to deploy an application to Heroku.  To support that, I wanted my local development environment to match a Heroku dyno as closely as possible.  Thus, I needed PostgreSQL; I set that up next:

sudo sh -c "echo 'deb http://apt.postgresql.org/pub/repos/apt/ precise-pgdg main' > /etc/apt/sources.list.d/pgdg.list"
wget --quiet -O - http://apt.postgresql.org/pub/repos/apt/ACCC4CF8.asc | sudo apt-key add -
sudo apt-get update
sudo dpkg-reconfigure locales
sudo apt-get install postgresql-common
sudo apt-get install postgresql libpq-dev
sudo apt-get install postgresql-client

sudo service postgresql start

sudo -u postgres createuser YOURNAME -s
sudo -u postgres psql
postgres=# \password YOURNAME

The wget command above threw a warning near the end that I didn’t explore further.  I think it impacted my ability to get v9.5.  My slightly modified commands install v9.3.  The apt-get install postgresql-client was required to fix an “Error: You must install at least one postgresql-client-<version> package.” error.  The last line will provoke a prompt to set a password for your PostgreSQL user.

Setting up PostgreSQL proved to be the most difficult part thus far.  The commands I entered above are the end-result of beginning with the references listed below and additional iteration and Google-Fu to fix problems that cropped up.

At this point, I tested out my install by creating a new rails app, modifying config/database.yml (username & password and adding template: template0 to the default environment — otherwise you’ll get an error about an encoding mismatch when you try to create the database via rake db:create), running rails server, and checking the connection via Chrome in ChromeOS.

Next, I installed and configured the Heroku Toolbelt [8] via

wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh
heroku login

The Heroku Toolbelt lets one provision dynos for an app, check their status, run commands on them, and push code to them — all from the command line.

End-to-End Test

Now that I’ve got everything installed, I performed an end-to-end test.  I created a new sample repository in my BitBucket account, cloned that repository to my Chromebook, modified that repository (by creating a Ruby on Rails application in it), pushed my changes back to BitBucket, pushed my changes to Heroku, and checked the live application on Heroku.

I created the repository in my BitBucket account via BitBucket’s web interface.  Then I set it up on my local machine, added a text file, and pushed it back to BitBucket:

mkdir sample-heroku-app
cd sample-heroku-app/

git init
git remote add origin git@bitbucket.org:derstander/sample-heroku-app.git
echo "Bill Mason" >> contributors.txt
git add contributors.txt 
git commit -m 'Initial commit with contributors'
git push -u origin master

After this, I backed up one directory and used the rails generator via rails new sample-heroku-app –database=postgresql.  I modified config/database.yml with my development environment credentials (including that template note above).  I then made a new controller via rails generate controller welcome, added an index page at app/views/welcome/index.html.erb, and added the corresponding route to config/routes.rb.  I also created the database with rake db:create.  Finally, I tested it locally by starting up the server (rails server) and connecting via Chrome in ChromeOS.

Next, I made the modifications necessary to deploy the application to Heroku.  I added rails_12factor in the Gemfile under the production environment, and ran bundle install.  I also wanted to ensure that my local environment and Heroku were running the same Ruby version.  I checked mine with ruby -v and added ruby ‘2.3.0’ to the end of the Gemfile.  Then, I committed the files and pushed them to BitBucket.

Now it was time to deploy.  I started by creating an app on Heroku via heroku create from the top-level directory of my application.  Then I pushed the application via git push heroku master and migrated the database via heroku run rake db:migrate.  Then, I visited the application in Chrome under ChromeOS (the application location will be listed in the push command; it might look something like https://shrouded-scrubland-53276.herokuapp.com/).

Success!

Backup

Now that I’ve got a fully functional environment, I backed it up.  To do so, I needed to log out of it (though not out of ChromeOS) and used sudo edit-chroot -f ~/ -b trusty, where trusty was the name of my setup.  I then moved the resulting .tar.gz to the ~/Downloads/ directory so that I could upload it to Google Drive.  This’ll let me more easily restore my working system if something goes wrong; after all, Chromebooks seem to like to “powerwash” the machine to factory settings if they run into problems.

Summary

If you followed along, at this point you should (hopefully) have a fully functional development environment capable of creating a Ruby on Rails application, editing it, pushing it live via Heroku, and putting it under source control via Git — all on your Samsung XE303C12.  This post might also serve as a starter in case you want to set up your XE303C12 to run Linux for something else.  Not bad for a little Chromebook, eh?

References

1. Getting Started with Rails 4.x on Heroku. https://devcenter.heroku.com/articles/getting-started-with-rails4.  Retrieved 2016-04-28.
2. Heroku Postgres.  https://devcenter.heroku.com/articles/heroku-postgresql#local-setup.  Retrieved 2016-04-28.
3. W.  Thomas.  Chromebook for Web Development.  http://www.wyliethomas.com/blog/2014/04/12/chromebook-for-web-development/.  Retrieved 2016-04-28.
4. Setup Ruby On Rails on Ubuntu 14.04 Trusty Tahr.  https://gorails.com/setup/ubuntu/14.04.  Retrieved 2016-04-28.
5. Set up SSH for Git.  https://confluence.atlassian.com/bitbucket/set-up-ssh-for-git-728138079.html.  Retrieved 2016-04-28.
6. Crouton Command Cheat Sheet.  https://github.com/dnschneid/crouton/wiki/Crouton-Command-Cheat-Sheet.  Retrieved 2016-04-28.
7. [Crouton] Keyboard.  https://github.com/dnschneid/crouton/wiki/Keyboard.  Retrieved 2016-04-28.
8. Heroku Toolbelt.  https://toolbelt.heroku.com/debian.  Retrieved 2016-04-29.