Rails 7 w/ browser-sync (live reloading)

Rails 7 with browser-sync (live-reloading).md

Rails 7 w/ browser-sync.

You'll need nodejs, npm or yarn and browser-sync. I use Yarn:

yarn add --dev browser-sync

Create bs-config.js in the root folder of your project and modify it to suite your needs.

module.exports = {
    "files": [
        "./app/assets/builds/*.css",
        "./app/views/**/*.erb"
    ],
    "injectChanges": false,
    "open": false,
    "port": 8000,
    "proxy": "localhost:3000",
    "watch": true
};

In package.json you'll want to add a script that executes browser-sync, the file below is truncated to keep it readable, you shouldn't copy it point-blank.

{
    "scripts": {
        "bs:run": "browser-sync start --config bs-config.js"
    },
    "devDependencies": {
        "browser-sync": "^2.27.7"
    }
}

Run your rails server on port 3000, execute your node script (i.e. yarn run bs:run) and http://localhost:8000/ should be browser-sync. It should work!

Have a Procfile(.dev)?

Add a line to the end of the file to run browser-sync:

bs: yarn bs:run