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

前書き

Rails5.1でwebpackやReactなどフロントエンド周りの開発が簡単に行える様になりました。
(普段Reactをメインで使っている人にとっては素晴らしいニュース)

既存のRailsプロジェクトにReact開発環境を導入するまでの手順をまとめます。

導入までの流れ

webpackerの導入

rails new時にオプションで指定する事もできますがここでは、単純にrails newして、
後からwebpackerを導入する場合とします。

$ rails new my_app

Gemfileにwebpackerを追記します。

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end

...

# webpackerを追加
gem 'webpacker'

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

...

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

bundleを実行

$ bundle

bundle実行後webpackerに対して色々なコマンドが使える様になります。
以下のコマンドでプロジェクトにwebpackerの各種ファイルを生成します。

$ rails webpacker:install

上記実行後、ルートディレクトリに下記の4ファイルが生成されます。

• .babelrc
• .postcssrc.yml
• package.json
• yarn.lock

また、フロントエンド開発用の各種ディレクトリやファイルが追加されます。

• app以下にjavascriptディレクトリが生成される。
  • ここでReactのコードを書いていきます。
  • app/javascript/packs/application.jsがエントリーファイルとなります。
• bin以下に、webpackやwebpack-dev-server実行用のファイルが生成される。
• configのwebpack以下にloader関連のファイルが生成される。
• node_modulesが生成される。
  • rails webpacker:install実行すると、yarn installも実行されます。

ここまでで、webpackerの導入は完了です。

Reactの導入

webpackerの導入が終わったので、webpackerでReact開発ができる設定を追加していきます。
とはいっても簡単で、下記のコマンドが用意されているので実行するだけです。

$ rails webpacker:install:react

上記のコマンド実行で、.babelrcへの追記やpackage.jsonの追記が行われ、
React開発に必要な環境が完成します。

ERBへの追記

実際動作を確認する為に、ERBにJSのインクルードを記述します。
これも簡単でwebpacker用にヘルパーが準備されています。
動作確認の為、適当なcontrollerとviewを作成します。

$ rails g controller tests index

index.html.erbを以下の様に修正します。

app/views/tests/index.html.erb

<div id="mountNode"></div>
<%= javascript_pack_tag 'hello_react' %>

javascript_pack_tagヘルパーは、app/javascript/packs以下のエントリーとなるファイル名をインクルードします。
hello_react はrails webpacker:install:react時に生成されたエントリとなります。

サーバーの起動

開発環境ではRail用のWebサーバとwebpack用のサーバの両方の起動が必要です。

$ rails s

$ bin/webpack-dev-server

いちいち2回コマンドを打ち込むのは面倒なので、
package.jsonのスクリプトにコマンドを追記します。

package.json

...

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

...

$ yarn start

上記で、2つのサーバーが立ち上がります。

動作確認

デフォルトならhttp://localhost:3000にアクセスします。

以下の画面が出ていれば成功です。

あとがき

webpackerを使う事でものすごく簡単にReact開発環境を構築できました。
webpackの設定や、loaderの追加なども柔軟にできそうです。
(SSRしたければ、react-on-railsが良さそう)

各環境に合わせてのビルド様コマンドもwebpackerが提供しているので、
ビルドも柔軟に対応できそうです。

次回はwebpackerのビルド周りについてまとめます。