Lチカ開発ブログ

https://l-chika.com/の開発ブログ

Rails5.1+webpack+React

プログラミング rails ruby React

Rails5.1で、Reactの利用を開発モードで試してみる。

前提・環境

  • OS: Ubuntu 14.04
  • yarnはインストール済み
  • その他バージョンは以下のとおり
$ cat /etc/lsb-release
...
DISTRIB_DESCRIPTION="Ubuntu 14.04 LTS"
$ yarn -V
0.23.2
$ ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [x86_64-linux]
$ bundle -v
Bundler version 1.13.7

手順

Rails5.1のインストール

  1. 作業ディレクトリ作成
  2. Rails5.1の bundle install
$ mkdir rails-5-1  && cd $_
$ bundle init
$ vim Gemfile

Gemfile

gem 'rails', '~> 5.1'
$ bundle install --path=vendor/bundle

アプリケーションの作成

  1. webpack オプションをつけてアプリケーション作成
  2. GemfileをOverwrite
$ bundle exec rails new . -T -d mysql --webpack=react
       exist  
      create  README.md
      create  Rakefile
      create  config.ru
      create  .gitignore
    conflict  Gemfile
Overwrite /{APPLICATION_PATH}/rails-5-1/Gemfile? (enter "h" for help) [Ynaqdh] Y
       force  Gemfile
         run  git init from "."
Initialized empty Git repository in /{APPLICATION_PATH}/rails-5-1/.git/
      create  app
      create  app/assets/config/manifest.js
      create  app/assets/javascripts/application.js
...
Done in 14.32s.
Webpacker now supports react.js 🎉
         run  bundle exec spring binstub --all
* bin/rake: spring inserted
* bin/rails: spring inserted

サーバー起動確認

$ ./bin/rails s -b 0.0.0.0 -p 3000

http://0.0.0.0:3000/ で確認

f:id:l-chika:20170502124701p:plain

Reactサンプルページの作成

controller生成

$ ./bin/rails g controller pages home --no-helper --no-assets
      create  app/controllers/pages_controller.rb
       route  get 'pages/home'
      invoke  erb
      create    app/views/pages
      create    app/views/pages/home.html.erb

http://0.0.0.0:3000/pages/home で確認

webpackでbuild

$ ./bin/webpack

hello_react を実装

$ vim app/views/pages/home.html.erb 
<%= javascript_pack_tag 'hello_react' %>

これをフロントから確認すると以下のようになる。

<body>
    <script src="http://localhost:8080/packs/hello_react.js"></script>
...
</body>

このままだと http://0.0.0.0:3000/pages/home で確認しても hello_react.js は実行されない - jsのパスがhttp://localhost:8080 - 開発モードなので、webpack-dev-serverで、Hot Module Replacement(HMR) を利用する

HMRのパスを変更する

localhost をVagrantのIPに変更する

$ vim config/webpack/development.server.yml

変更前

default: &default
  enabled: true
  host: localhost
  port: 8080

↓

変更後

default: &default
  enabled: true
  host: 192.168.xx.xx
  port: 8080

webpack-dev-serverの起動

  • webpack-dev-server と rails server を同時に起動
$ ./bin/webpack-dev-server
$ ./bin/rails s -b 0.0.0.0 -p 3000

view

hello_react.js のパスが変更される

<body>
    <script src="http://192.168.xx.xx:8080/packs/hello_react.js"></script>
...
</body>

「Hello React!」が表示されればOK！

f:id:l-chika:20170502124728p:plain

その他・参考

l-chika.hatenablog.com

qiita.com

Ruby on Rails 5アプリケーションプログラミング

Ruby on Rails 5アプリケーションプログラミング

Ruby on Rails 5.1 + webpack: スタートアップガイド (OIAX BOOKS)

Ruby on Rails 5.1 + webpack: スタートアップガイド (OIAX BOOKS)