webpackwebpack-dev-serverwebpackerlando

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


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

Solution

  • 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();