ウェブサービスを作っています。

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

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

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

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


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

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__":
  document.write("<script async src='http://HOST:3001/browser-sync/browser-sync-client.js?v=2.27.11'><\/script>".replace("HOST", location.hostname));

app/views/layouts/application.html.slim

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

slim で書いています。


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

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

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