Set webpacker dev server watch options (poll, aggregate_timeout) via environmental variables on Lando

Question

The project is using Ruby Webpacker and Lando is used for local development. My config/webpacker.yml contains this:

development:
  <<: *default
  compile: true

  dev_server:
    public: some.lndo.site
    host: '0.0.0.0'
    port: 3035
    ...
    watch_options:
      poll: 1000
      aggregate_timeout: 500

So, insetad of adding/editing parameters in webpacker.yml for my local environment I can set some of these options as environmental variables in my .lando.yml file (i.e. public, host, port):

services:
  appserver:
    type: ruby:2.6.3
    overrides:
      environment:
        WEBPACKER_DEV_SERVER_PUBLIC: some.lndo.site
        WEBPACKER_DEV_SERVER_HOST: '0.0.0.0'
        WEBPACKER_DEV_SERVER_PORT: '3035'
        ...

This works.

Question: But how can I set the environmental variables for watch-options (i.e. poll) via environmental variable?

I've tried these, but with no luck:

WEBPACKER_DEV_SERVER_WATCHOPTIONS_POLL 
WEBPACKER_DEV_SERVER_WATCH_OPTIONS_POLL
WEBPACKER_DEV_SERVER_POLL

score 3 · Accepted Answer · edited Dec 04 '19 at 14:50

It looks like nested JSON within the dev_server object is currently not supported (as of Webpacker v4.2.0), where the key interpolated in the ENV["WEBPACK_DEV_SERVER_#{key.upcase}"] would only match a top-level key: https://github.com/rails/webpacker/blob/417542c8ed7d344ecc24b3ae40e303d478ad50d0/lib/webpacker/dev_server.rb#L59-L61

# env_prefix = "WEBPACKER_DEV_SERVER".freeze
def fetch(key)
  ENV["#{env_prefix}_#{key.upcase}"] || config.dev_server.fetch(key, defaults[key])
end

Since I'm guessing you don't need the Rails server to know about the watch poll options, it shouldn't be necessary to pass the dynamic values to config/webpacker.yml. I would instead read them in config/webpack/development.js, i.e., straight into Webpack:

// config/webpack/development.js

const environment = require('./environment.js');

environment.config.merge({
  devServer: {
    watchOptions: {
      poll: process.env.WEBPACK_DEV_SERVER_WATCH_POLL,
      aggregateTimeout: process.env.WEBPACK_DEV_SERVER_WATCH_TIMEOUT
    }
  }
});

module.exports = environment.toWebpackConfig();

Looks like a workaround that works. Thanks! The only fix needed: `watch_options` should be replaced by `watchOptions`, otherwise it throws an error "webpack Dev Server Invalid Options: options should NOT have additional properties". The same for `aggregateTimeout` etc. — Eugen Baryshnikau, Dec 04 '19 at 11:40
Edited your answer and made fixes described above, please approve — Eugen Baryshnikau, Dec 04 '19 at 11:43

Set webpacker dev server watch options (poll, aggregate_timeout) via environmental variables on Lando

1 Answers1