Webpacker won't seem to boot on an https port

Question

I am using Shakapacker, a fork and successor to Webpacker, trying to get it to boot on https for local development, using a nonstandard domain abc.localhost.

This works for Puma by passing it a flag -b 'ssl://0.0.0.0:3000?key=config/ssl/abc.localhost.key&cert=config/ssl/abc.localhost.crt'

Unfortunately, I can't seem to get it to work for the webpack config. it looks like it is booting into SSL but webpack is showing not found responses on its endpoints.

my Procfile.dev

# Procfile for development using HMR
# You can run these commands in separate shells
rails: bin/rails s -b 'ssl://0.0.0.0:3000?key=config/ssl/abc.localhost.key&cert=config/ssl/abc.localhost.crt'
wp-client: SHAKAPACKER_DEV_SERVER_PORT=3035 SHAKAPACKER_DEV_SERVER_HOST=abc.localhost SHAKAPACKER_DEV_SERVER_INLINE=true SHAKAPACKER_DEV_SERVER_HOT=false ./bin/shakapacker-dev-server --https
wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch

Inside of bin/shakapacker-dev-server (standard setup)

#!/usr/bin/env ruby
require "byebug"
ENV["RAILS_ENV"] ||= "development"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", __FILE__)

require "bundler/setup"
require "shakapacker"
require "shakapacker/dev_server_runner"

APP_ROOT = File.expand_path("..", __dir__)

Dir.chdir(APP_ROOT) do
  Shakapacker::DevServerRunner.run(ARGV)
end

My config/webpack/webpack.config.js

const { env } = require('shakapacker')
const { existsSync } = require('fs')
const { resolve } = require('path')
const path = require('path');

const envSpecificConfig = () => {
  const pathToConfig = resolve(__dirname, `${env.nodeEnv}.js`)
  if (existsSync(pathToConfig)) {
    console.log(`Loading ENV specific webpack configuration file ${path}`);

    const baseConfig = require(pathToConfig);

    baseConfig.devServer = baseConfig.devServer || {};
    baseConfig.devServer.port = 3035;
    baseConfig.devServer.https = {
      key: path.resolve(__dirname, '../../config/ssl/abc.localhost.key'),
      cert: path.resolve(__dirname, '../../config/ssl/abc.localhost.crt'),
    };

    baseConfig.output.publicPath = 'https://abc.localhost:3035/';

    return baseConfig;
  } else {
    throw new Error(`Could not find file to load ${path}, based on NODE_ENV`);
  }
}

module.exports = envSpecificConfig()

When I boot the app (using bin/dev, which uses Foreman to boot all of the processes listed in Procfile.dev), I get the default page content but the React components are not rendering:

there is a hello world component:

import PropTypes from 'prop-types';
import React, { useState } from 'react';
import style from './HelloWorld.module.css';

const HelloWorld = (props) => {
  const [name, setName] = useState(props.name);

  return (
    <div>
      <h3>Hello, {name}!</h3>
      <hr />
      <form>
        <label className={style.bright} htmlFor="name">
          Say hello to:
          <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
        </label>
      </form>
    </div>
  );
};

HelloWorld.propTypes = {
  name: PropTypes.string.isRequired, // this is passed from the Rails view
};

export default HelloWorld;

and app/views/welcome.index.html.erb contains this:

Hello Shakapacker

<%= react_component("HelloWorld", props: {name: "TestShakapackerOnSSL"}, prerender: false) %>

so, the expected result is:

Here is the actual result (see below for expected result)

abc.localhost/:11     GET https://abc.localhost:3035/js/runtime.js net::ERR_ABORTED 404 (Not Found)
abc.localhost/:12     GET https://abc.localhost:3035/js/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-fe9dc7.js net::ERR_ABORTED 404 (Not Found)
abc.localhost/:13     GET https://abc.localhost:3035/js/application.js net::ERR_ABORTED 404 (Not Found)

it seems like webpack isn't correctly operating at the SSL port.

Sample app at https://github.com/jasonfb/TestShakapackerSSL