REPL-ilze! Building an In-Browser Ruby REPL with Opal
One of the (many wonderful) features of Ruby that makes it such a great language for beginner coders is it's playground, IRB.
*IRB is easily as fun as this playground*
IRB stands for Interactive Ruby Shell. It is a REPL (Read, Evaluate, Print, Loop) environment that you can load in your terminal. Inside IRB, you can write or copy/paste any snippets of Ruby code to execute and play around with. What if you're away from your own computer and need to run some Ruby code real quick? You don't want to grab someone else's machine and try to mess around replicating your own development environment. For this reason, it can be useful to have access to an in-browser REPL for manipulating and testing Ruby code. Enter, Opal.
What is Opal?
Why Use Opal?
In this post, we'll set up a basic Opal-Rails app and implement Forrest Chang's opal-irb gem to construct and in-browser Ruby REPL, called repl-ize.
Setting Up Opal-Rails
# Enable/disable /opal_specs route
config.opal.enable_specs = true
config.opal.spec_location = 'spec-opal'
4 . That's it! Let's test it out and write our very first Opal script:
- Create a file in
- Fill it with the following code:
puts "sup, world?" # check the console! # Dom manipulation require 'opal-jquery' Document.ready? do Element.find('body > header').html = '<h1>Hello world!</h1>' end
- Create a a method in your Application controller,
#helloand set the route path to be
config/routes. Create a corresponding
hello.html.erbview and we should be up and running.
- Start your server with
Now that we have opal-rails up and running, we can use the opal-irb gem to create our REPL.
Building the REPL with Opal-IRB
1 . Add the following to your Gemfile and bundle install.
gem 'opal' gem 'opal-jquery' gem 'opal-browser' gem 'opal-irb', github: 'fkchang/opal-irb', require: 'opal-irb-rails' gem 'jquery-ui-rails'
2 . Add the Jquery-UI and Jquery Console stylesheets to your
*= require jquery-ui/dialog *= require opal-irb/jqconsole
3 . Include Code Mirror js/css by adding a call to the CDN in your
4 . Now, we're ready to place the necessary code for adding our REPL to the DOM. Create a file in
repl.js.rb. Add the following code:
require 'opal_irb_jqconsole' Document.ready? do OpalIrbJqconsole.create_bottom_panel OpalIrbJqconsole.add_open_panel_behavior("show-irb") end
And that's it! Most of this tutorial was guided by the Opal-IRB Read Me. For the styling, I used the Solarize theme (css available here).