Setting up - How to make a SPA with Cape.JS and Rails

Table of Contents - Next Section

Check if you have required softwares:

$ ruby -v
$ rails -v

You need Ruby 2.2.2 or higher and Rails 5.0.0.rc1.

Create a Rails application skeleton:

$ rails new greeter -BT

The meaning of options:

  • -B: Don’t run bundle install (--skip-bundle)
  • -T: Skip test files (--skip-test)

Remove these lines from the Gemfile:

gem 'sass-rails', '~> 5.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks', '~> 5.x'
You can keep coffee-rails, jquery-rails and turbolinks. We remove them in order to demonstrate that Cape.JS does not depend on jQuery.

Add these lines to the Gemfile:

gem 'capejs-rails'
gem 'sass-rails', '~> 6.0.0.beta1'
gem 'sprockets', '~> 4.0.0.beta2'
gem 'sprockets-rails'
gem 'babel-transpiler'
gem 'bootstrap', '~> 4.0.0.alpha3'
We add bootstrap just in order to smarten up our pages. Cape.JS doesn't depend on the Bootstrap. 
$ bin/bundle

Edit app/assets/javascripts/application.js so that its content becomes as follows:

//= require cape
//= require_tree .

We removed three lines that require jquery, jquery_ujs and turbolinks. Keep them if you kept jquery-rails and turbolinks on Gemfile.

We didn't add bootstrap here, because we don't use any Bootstrap plugins on this application. 
$ rm app/assets/stylesheets/application.css
$ touch app/assets/stylesheets/application.scss

Add this line to app/assets/stylesheets/application.scss:

@import "bootstrap";
This procedure is not necessary if you don't use Bootstrap. 
$ touch config/initializers/generators.rb

Add these lines to config/initializers/generators.rb:

Rails.application.config.generators do |g|
  g.helper false
  g.assets false
  g.test_framework false
  g.skip_routes true
end

Table of Contents - Next Section