Rails アプリの開発で Browsersync を使用する

追記(2022/12/24): proxy を使用しない方法に書き換えました。

Rails v7.0.4 で、sprockets-rails, jsbundling-rails を使用している前提です。

Browsersync は v2.28.1 で確認しています。

---

まずは、プロジェクトのルートでインストール。

yarn add browser-sync --dev

---

続いて、設定ファイル (bs-config.js) をプロジェクトのルートに置きます。

ドキュメントを参照し、お好みの内容に書き換えてください。

module.exports = {
  files: [
    'app/views',
    'app/helpers',
    'app/assets/builds/application.{js,css}'
    'app/components'
  ],
  port: 3001,
  ghostMode: false,
  notify: false,
  injectChanges: false  // css 更新時もリロード
};

---

app/views/application/_browsersync.html.slim

javascript id="__bs_script__":
  (function() {
    try {
      var script = document.createElement('script');
      if ('async') {
        script.async = true;
      }
      script.src = 'http://HOST:3001/browser-sync/browser-sync-client.js?v=2.28.1'.replace("HOST", location.hostname);
      if (document.body) {
        document.body.appendChild(script);
      }
    } catch (e) {
      console.error("Browsersync: could not append script tag", e);
    }
  })()

---

app/views/layouts/application.html.slim

body
  ...
  = render 'browsersync' if Rails.env.development?

※ slim で書いています。

---

最後に、Procfile.dev へ以下を追記します。

browsersync: yarn browser-sync start --config bs-config.js

---

あとは、いつものように bin/dev を起動して開発するだけです。