Rails 5.x + Webpacker + React.js の開発環境セットアップ
- 2017 11/7
- カテゴリー : Ruby on Rails
- React.js . webpacker
- コメントを書く
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 をやっていきたい現場からお送りしました。