Host for assets from a webpacker configuration using custom domains not being resolved

[spullen]

Ruby version: 2.7.4 Rails version: 6.1.4 Webpacker version: 5.4.3

I've been trying to set up webpack-dev-server to use a custom domain so I can use SSL in development.

My configuration is as follows:

dev_server:
    host: www.app.test
    port: 3035
    public: www.app.test:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

I also have a breakout configuration to handle setting the SSL key and cert as I wasn't able to do this in the yaml file. ./config/webpack/development.js

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

const fs = require('fs');

const environment = require('./environment')

environment.config.devServer.https = {
    key: fs.readFileSync(process.env.DEV_CERT_KEY_FILE),
    cert: fs.readFileSync(process.env.DEV_CERT_FILE)
}

module.exports = environment.toWebpackConfig();

Expected behavior:

The assets that are served from webpack-dev-server by <%= stylesheet_pack_tag 'application' %> and <%= javascript_pack_tag 'application' %> should resolve to the custom domain (eg. https://www.app.test:3035/packs/...)

Actual behavior:

The assets that are served from webpack-dev-server are not being resolved to the custom domain, but instead they are being resolved to the host and port of the rails server (https://www.app.dev:3000/packs/...).

I believe the webpacker configuration is correct. I was able to fetch an asset if I typed https://www.app.test:3035/packs/css/application-2d3439a8.css or https://www.app.test:3035/packs/js/application-2d3439a8.js directly in the browser.

The webpacker.yml configuration that I had before changing the configuration to use custom domains was:

dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

Which resolved as expected (ex. http://localhost:3035/packs/...) using <%= stylesheet_pack_tag 'application' %> and <%= javascript_pack_tag 'application' %>

My workaround is to set the host option manually in stylesheet_pack_tag and javascript_pack_tag

[spullen]

Some more info, if I print out <%= current_webpacker_instance.dev_server.host %> on a page it includes the port www.app.test:3035. This makes me believe that the public value is being used, but it looks like Webpacker::DevServer#host should be fetching the correct value (not public). I'm not seeing anywhere where this would combine those two values.

[justin808]

Please move these over to https://github.com/shakacode/shakapacker/.