Watch rails views and reload page on changes

[mbajur]

I'm currently using webpacker with page reloading on css/js changes and it all works just great. Thanks for this amazing piece of software. I was wondering - would that be possible to do the same for rails views? It would be great if updating erb or slim view could trigger a webpack page refresh (ideally without rebuilding entire js/css bundle).

I'm fully aware that's not the point of using webpack(er) and know there are solutions like guard and livereload for that but i would love to avoid using yet another deamon running in the background.

Thanks in advance for any clues!

[jakeNiemiec]

From what I can tell the stock (webpack) devServer only pays attention to files that are resolved by webpack.

I use the webpack BrowserSyncPlugin & files: ['./app/**/{*.erb,*.rb}'] to achieve this, but you might need to use http-proxy-middleware in order to re-proxy the existing webpackER devServer if you want to go that route. It is very dependant on your setup, best of luck!

[scottatron]

Not quite as nice as using webpack itself, but I've got this working by using watchexec.

I run up webpack-dev-server, then run:

watchexec -w app/views touch app/javascript/packs/application.js

[mtomov]

There's an even easier way, just set the devServer contentBase property like this in config/webpack/development.js

environment.config.devServer.watchContentBase = true
environment.config.devServer.contentBase = [
  path.join(__dirname, '../../app/views')
]

[swrobel]

Here's an example that won't cause webpack to do a full recompile. This will simply trigger a browser reload. Your specific watches may vary, but they're pretty easy to configure using an array of glob syntax w/ chokidar (which is already included by webpack) - just note that it doesn't accept regexes:

development.js:

const chokidar = require('chokidar')
environment.config.devServer.before = (app, server) => {
  chokidar.watch([
    'config/locales/*.yml',
    'app/views/**/*.slim'
  ]).on('change', () => server.sockWrite(server.sockets, 'content-changed'))
}

[jesster2k10]

Here's an example that won't cause webpack to do a full recompile. This will simply trigger a browser reload. Your specific watches may vary, but they're pretty easy to configure using an array of glob syntax w/ chokidar (which is already included by webpack) - just note that it doesn't accept regexes:

development.js:

const chokidar = require('chokidar')
environment.config.devServer.before = (app, server) => {
  chokidar.watch([
    'config/locales/*.yml',
    'app/views/**/*.slim'
  ]).on('change', () => server.sockWrite(server.sockets, 'content-changed'))
}

Hey, I can't seem to get this working. The "chokidar" isn't watching any changes in *.html.erb files

[swrobel]

Here's an example that won't cause webpack to do a full recompile. This will simply trigger a browser reload. Your specific watches may vary, but they're pretty easy to configure using an array of glob syntax w/ chokidar (which is already included by webpack) - just note that it doesn't accept regexes:
development.js:

const chokidar = require('chokidar')
environment.config.devServer.before = (app, server) => {
  chokidar.watch([
    'config/locales/*.yml',
    'app/views/**/*.erb'
  ]).on('change', () => server.sockWrite(server.sockets, 'content-changed'))
}

Hey, I can't seem to get this working. The "chokidar" isn't watching any changes in *.html.erb files

Yes, my glob was for slim templates, which are what I use. I've modified the code above to look for erb files (though anyone can & should modify these globs for their needs)

[jesster2k10]

Here's an example that won't cause webpack to do a full recompile. This will simply trigger a browser reload. Your specific watches may vary, but they're pretty easy to configure using an array of glob syntax w/ chokidar (which is already included by webpack) - just note that it doesn't accept regexes:
development.js:

const chokidar = require('chokidar')
environment.config.devServer.before = (app, server) => {
  chokidar.watch([
    'config/locales/*.yml',
    'app/views/**/*.erb'
  ]).on('change', () => server.sockWrite(server.sockets, 'content-changed'))
}

Hey, I can't seem to get this working. The "chokidar" isn't watching any changes in *.html.erb files

Yes, my glob was for slim templates, which are what I use. I've modified the code above to look for erb files (though anyone can & should modify these globs for their needs)

Thank you for that. I'm not sure what the issue was but after closing my terminal and restarting my server, it worked like a charm!

[cabgfx]

thanks, @swrobel that worked great!

Can confirm this works on Rails 6.0.3.1, webpacker 4.2.2 👍

My config/webpack/development.js:

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')
const chokidar = require('chokidar')

environment.config.devServer.before = (app, server) => {
  chokidar.watch([
    'config/locales/*.yml',
    'app/views/**/*.erb'
  ]).on('change', () => server.sockWrite(server.sockets, 'content-changed'))
}

module.exports = environment.toWebpackConfig()

[guillaumebriday]

Thanks @cabgfx

[henrypoydar]

Using merge for this in @rails/webpacker 6.0.0.beta-5 config/webpack/development.js:

process.env.NODE_ENV = process.env.NODE_ENV || "development";

const webpackConfig = require("./base");
const { merge } = require("@rails/webpacker");
const chokidar = require("chokidar");

// Hot reload views via webpack dev server. https://github.com/rails/webpacker/issues/1879.
// However, CI system tests may choke on this since NODE_ENV is  'development' in tests. 
// So check for RAILS_ENV and skip hot reload in testing.
module.exports = process.env.RAILS_ENV == "development" ? merge(webpackConfig, {
  devServer: {
    before: (app, server) => {
      chokidar
      .watch([
        "config/locales/*.yml",
        "app/views/**/*.md",
        "app/views/**/*.html.erb",
        "app/views/**/*.html.haml",
      ])
      .on("change", () => server.sockWrite(server.sockets, "content-changed"));
    }
  },
}) : webpackConfig;

[travisp]

For what it's worth, I had to add the option "awaitWriteFinish" or else the reload did not always successfully show the changed file (and I had to either manually refresh, or hit save a second time). The relevant section looks like this on webpacker 6:

before: (app, server) => {
      chokidar
        .watch([
          "config/locales/*.yml",
          "app/views/**/*.html.erb",
          "app/views/**/*.html.haml",
        ], {
          awaitWriteFinish: true
        })
        .on("change", () => server.sockWrite(server.sockets, "content-changed"));
    }
  }

[mabras]

For what it's worth, I had to add the option "awaitWriteFinish" or else the reload did not always successfully show the changed file (and I had to either manually refresh, or hit save a second time). The relevant section looks like this on webpacker 6:

Make sure of hmr and inline value set to true.

// config/webpacker.yml
  dev_server:
    ...
    hmr: true
    inline: true
    ...