Opal Hot Reloader Tutorial

In this tutorial we are going to install a fantastic tool written by Forrest Chang:

Opal Hot Reloader is for pure programmer joy (not having to reload the page to compile your source) and the Opal Console is incredibly useful to test how Ruby code compiles to JavaScript.

Opal Hot Reloader is going to just dynamically (via a websocket connection) chunks of code in the page almost instaneously.

We are also going to add the Foreman gem to run our Rails server and the Hot Reloader service for us.

Tutorial

To set up your Hyperloop environment and continue this tutorial, please first follow the

After Hyperloop has been installed properly we can go further.

Then in order to test or Opal Hot Reloader Gem, you need to have at least a basic Hyperloop application. For that you can follow the simple Tutorial: HelloWorld Tutorial.

Step 1: Updating Gemfile

Add the following lines to your gemfile and run bundle:

#gemfile

gem 'opal_hot_reloader', git: 'https://github.com/fkchang/opal-hot-reloader.git'
gem 'foreman'

bundle install

Step 2: Configuring your application

Step 2.1: If Hyperloop AUTO_CONFIG is ON (By default)

By default, Hyperloop AUTO_CONFIG mode is turned ON. So if you have not changed this configuration, please foollow instructions below:

Modify your hyperloop.rb initializer, adding the following lines inside the if statement so they only run on the client and not as part of the server pre-rendering process:

#config/initializers/hyperloop.rb

Hyperloop.configuration do |config|

  config.transport = :simple_poller

  config.import 'opal_hot_reloader'

end

Modify your application.js file, adding OpalHotReloader configuration:

//app/assets/javascripts/application.js

//= require 'react_ujs'
//= require 'jquery'
//= require 'jquery_ujs'

//= require 'turbolinks'
//= require_tree .

//= require 'hyperloop-loader'

Opal.OpalHotReloader.$listen(25222, true)

Step 2.2: If Hyperloop AUTO_CONFIG is OFF

If you already have turned OFF the Hyperloop AUTO_CONFIG mode then follow instructions below.

Modify your app/hyperloop/components.rb file, adding OpalHotReloader configuration:

#app/hyperloop/components.rb

...

require 'hyper-model'
require 'hyper-store'
require 'hyper-operation'
require 'hyper-router/react-router-source'
require 'hyper-router'

require 'opal_hot_reloader'
OpalHotReloader.listen(25222, true)

require_tree './models' if RUBY_ENGINE == 'opal'
require_tree './operations'
require_tree './stores'
require_tree './components'

If you want to learn why and how turn this AUTO_CONFIG OFF:

Step 3: Creating the Procfile

Then create a Procfile in your Rails app root so the Hot Reloader service will start whenever you start your server:

#Procfile

rails: bundle exec rails server -p 3000
hotloader: opal-hot-reloader -p 25222 -d app/hyperloop/components

Step 4: Running the application

To start both servers:

bundle exec foreman start

Step 5: Playing

Refresh your browser and edit a Hyperloop Component, for example helloworld.rb:

class Helloworld < Hyperloop::Component

  state show_field: false
  state field_value: ""

  render(DIV) do
    show_button
    DIV(class: 'formdiv') do
      show_input
      H1 { "#{state.field_value}" }
    end if state.show_field
  end

  def show_button
    BUTTON(class: 'btn btn-info') do
      state.show_field ? "Click to hide HelloWorld input field" : "Click to show HelloWorld input field"
    end.on(:click) { mutate.show_field !state.show_field }
  end

  ...

end

For example, you modify the line:

state.show_field ? "Click to hide HelloWorld input field" : "Click to show HelloWorld input field"

by

state.show_field ? "Click to hide Hello People input field" : "Click to show People input field"

Save and you should see the text change magically in your browser without having to refresh. Pure joy.

The best way to get help and contribute is to join our Gitter Chat