追記(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
を起動して開発するだけです。