Edited at

RailsにRiot.js導入

More than 3 years have passed since last update.

riotjs-railsなどのgemがうまいこと動作しなかったり不具合があったりしたので、外部ライブラリとしての導入手順備忘録.


環境

ruby -v => ruby 2.3.1p112

rails -v => Rails 5.0.0.1

rails new 直後のrailsルートディレクトリで作業.

$ sudo npm install riot -g

$ wget https://raw.githubusercontent.com/riot/riot/master/riot+compiler.js -P vendor/assets/javascript/riot.js
$ mkdir app/assets/riot app/assets/javascripts/riot

app/assets/javascripts/application.jsを編集して下記を追加.


app/assets/javascripts/application.js

//= require riot


以上で導入終了です.


試しにhello worldまで.


app/assets/riot/hello.tag

<hello>

<p>hello world!</p>
</hello>


app/assets/javascripts/application.js

//= require jquery

//= require jquery_ujs
//= require turbolinks
//= require riot
//= require_tree .

$(function() {
riot.mount('hello');
});


適当なコントローラーの作成

$ rails g controller top index


app/views/top/index.html.erb

Riot.jsテスト

<hello></hello>

Riot.jsでディレクトリの監視

riot -w app/assets/riot app/assets/javascripts/riot

あとはrails sしてlocalhost:3000にアクセスするとhello worldが表示されます.