Ruby on Rails 5.x + Webpacker + React.js の開発環境をセットアップしたのでご紹介します。

Rails 環境の前提

以下のようなオプションで rails new して Rails アプリを作成しているという前提で React.js のセットアップをしました。

rails new your_app \\
--database=postgresql \\
--webpack=react \\
--skip-git \\
--skip-action-cable \\
--skip-coffee \\
--skip-test \\
--skip-bundle

bundle install

rails webpacker:install

rails webpacker:install:react

javascript_pack_tag を利用する

--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -5,7 +5,7 @@
     %title Fanfic
     = csrf_meta_tags
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
-    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
+    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
     = favicon_link_tag 'favicon.ico'
   %body
     = yield

開発環境での hot reload を有効化

--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@@ -51,4 +51,7 @@ Rails.application.configure do
   # Use an evented file watcher to asynchronously detect changes in source code,
   # routes, locales, etc. This feature depends on the listen gem.
   config.file_watcher = ActiveSupport::EventedFileUpdateChecker
+
+  # Make javascript_pack_tag load assets from webpack-dev-server.
+  config.x.webpacker[:dev_server_host] = "http://localhost:8080"
 end

javascript_pack_tag 'hello_react' 追記

rails webpacker:install:react で生成された hello_react を javascript_pack_tag で読み込んで、動作確認に使います。

--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -6,6 +6,7 @@
     = csrf_meta_tags
     = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
     = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
+    = javascript_pack_tag 'hello_react', 'data-turbolinks-track': 'reload'
     = favicon_link_tag 'favicon.ico'
   %body
     = yield

React.js の動作確認

http://localhost:3000 にアクセスして、

Hello React!

というメッセージが出ていれば成功です。

サーバーの起動

package.json

  "scripts": {
    "start": "rails s & bin/webpack-dev-server"
  },

という start スクリプトを追加して、

yarn start

で rails s と bin/webpack-dev-server のサーバーをまとめて起動できるようにしました。

.gitignore 更新

最後に .gitignore に /public/packs を追記します。

これで不要なファイルを git commit してしまうことはなくなります。

.gitignore

--- a/.gitignore
+++ b/.gitignore
@@ -34,6 +34,7 @@ capybara-*.html
 .rspec
 /db/*.sqlite3
 /db/*.sqlite3-journal
+/public/packs
 /public/system
 /coverage/
 /spec/tmp

以上、Rails + Webpacker + React.js をやっていきたい現場からお送りしました。

参考情報

• webpackerでRailsにReactを導入するまでの手順書 - Qiita