Integrate Cape.JS with Ruby on Rails (1) - Cape.JS Primer

On 3 lectures including the previous time, I explained how to create virtual DOM by Cape.JS.

From this lecture, I’ll explain steps to integrate Cape.JS with Ruby on Rails.

Please acquire a demonstration application at https://github.com/capejs/capejs-demo-on-rails if you are impatient like "I want you to show me a source code not explanation." A sample Rail application we make on this lecture will be a very similar one like the demonstration application.

As a precondition, Ruby (v2.1 or later), Rails 4.2、Node.js (v0.12 or later) and Git (v2.0 or later) are supposed to be installed on your PC.

I skip the explanation of steps to install each software. Please search the word such as "node.js install windows" and "git install mac" on the internet.

The application we will make on some lectures from this lecture is easy one to administrate “To-do list” The data of To-do list is stored in SQlite3 database. We don’t create the function of users’ singing in･out.

Let’s begin to create framework of the application.

$ rails new todo_list --skip-bundle
$ cd todo_list

Open Gemfile on the text editor and add a line as following at the end.:

gem 'sprockets-es6', '~> 0.6.1'

Tell the truth, this added line isn't necessary to use Cape.JS. But, Cape.JS programming becomes more fun if you use the syntax of ECMAScript 6. (which is commonly called ES6. JavaScript's standard issue of next term) sprockets-es6 is a Gem package that convert the program written in ES6 to the running one for JavaScript.

Then, install the Gem packages.

$ bin/bundle

Write ruby before the command if you are Windows user." Generally, when you run the command starting with bin/, you need to write ruby at the top on Windows.

And install Bower (JavaScript’s package administration tool).

$ sudo npm install -g bower

On Windows, omit sudo.

Create a new file .bowerrc on the text editor and write as following.

{
  "directory": "vendor/assets/components"
}

The package administrated by Bower is installed at vendor/assets/components directory.

Next, install Cape.JS.:

$ bower install capejs

As that above, install Bootstrap, Font Awesome, and lodash by using Bower.

$ bower install bootstrap fontawesome lodash

These packages don't need Cape.JS but we install them here because we will use them later of the next lecture.

Moreover, set default of Bower. Run the command bower init on terminal. Keep pushing Enter key until the prompt ? name: (todo_list) display at first. Since that, about 10 questions is displayed but just keep pushing Enter key with empty value.

As the result, the file bower.json with the content like following is made.

{
  "name": "todo_list",
  "version": "0.0.0",
  "authors": [
    "John Doe <john@example.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "vendor/assets/components",
    "test",
    "tests"
  ],
  "dependencies": {
    "capejs": "~1.0.0",
    "bootstrap": "~3.3.4",
    "fontawesome": "~4.3.0",
    "lodash": "~3.9.3"
  }
}

At the time when I write this article(May 29th, 2015), There are version numbers in dependencies section like above. But, they will change in the future. It may not be a big problem if the last version number changes. In case that first one and second one are different, rewrite bower.json as above and run `bower install` to let them being same before trying the contents of this lecture.

Bootstrap's 3.3.5 was released on June 17th, 2015 but it doesn't work well because this version has bad chemistry with Rails (accurately, with Sprockets). So, change bootstrap's version number in dependencies section of bower.json from ~3.3.4 to =3.3.4. The version number is fixed to 3.3.4 by doing this.

Mount Cape.JS to the Rails application. Open app/assets/javascripts/application.js on the text editor and rewrite the content as following.:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require capejs
//= require bootstrap
//= require lodash
//= require_tree .

In addition, open app/assets/stylesheets/application.css and rewrite the content as following.:

/*
 *= require_tree .
 *= require fontawesome
 *= require_self
 */

Now, it’s ready to start developing Rails application by using Cape.JS.

On the next lecture, we’ll still continue to develop “To-do list” application.