Having fun with opal and sprockets

29 April 2015 - Reading time: 2 minutes

Let’s try Opal. I don’t want to setup a Rails application. Just static html with javascript written in Opal, stylesheets in SASS, and HTML in Slim. Also we want to use JQuery like methods to select DOM elements. We use sprockets, an assets pipeline from rails, and rails-assets to manage javascript libraries.

Let’s set this thing up!

$ mkdir opal-playground
$ cd opal-playground
$ bundle init

Bundler initialized, lets add some gems, edit Gemfile:

source "https://rubygems.org"

source 'https://rails-assets.org' do
  gem 'rails-assets-jquery'

gem 'opal'
gem 'opal-jquery'
gem 'slim'
gem 'sass'

and install gems

$ bundle

We need to create four folders:

  • app - for opal files (compiled to javascript)
  • views - for slim templates
  • styles - for sass stylesheets

Sprockets uses rack to serve compiled assets, lets make a config.ru for that:

require 'bundler'

sprockets = Sprockets::Environment.new.tap do |s|

  # register slim
  s.register_engine '.slim', Slim::Template

  # register opal
  s.register_engine '.rb', Opal::Processor

  # add folders
  s.append_path 'app'
  s.append_path 'views'
  s.append_path 'styles'

  # add paths from opal
  Opal.paths.each do |p|
    s.append_path p

  # add paths from rails-assets
  RailsAssets.load_paths.each do |p|
    s.append_path p

Opal::Processor.source_map_enabled = false

map '/' do
  run sprockets

Let start with views/index.html.slim file:

doctype html
    title Hello
    link href='style.css' rel='stylesheet' type='text/css'
    script src='app.js'
    button#button ClickMe

Simple, include style.css stylesheet, and app.js for javascriptis. Create a styleshet styles/style.css.sass:

body h2
  color: red

Finally we can create ruby (opal) file app/app.js.rb:

# use sprockets directive to include jquery
#= require 'jquery'

require 'opal'
require 'opal-jquery'

Document.ready? do
  # checkout browser console
  puts "Message from opal"

  # add some text to h2
  Element.find('#element').text = "Setting header with Opal"

  # onclick event
  Element.find('#button').on :click do
    Element.find('#element').text = "Button Clicked!"

We’re done, is this working ?

$ rackup

And open http://localhost:9292/index.html! Happy?

You’re lazy ? Check out github repository or simply:

$ git clone git@github.com:fazibear/opal-slim-sass-sprockets-example.git