webpacker: ./bin/webpack-dev-server command line arguments are ignored

A solution which worked for me is to set https: true in the webpacker.yml and read cert and key in the development.js:

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

const fs = require('file-system')
const environment = require('./environment')

const customDevConf = {
  devServer: {
    cert: fs.readFileSync('./cert.pem'),
    key: fs.readFileSync('./key.pem'),
  },
}

environment.config.merge(customDevConf)

module.exports = environment.toWebpackConfig()

FYI setting https in webpacker.yml to this currently works just fine (I struggled with this for a bit as well):

dev_server:
  host: localhost
  port: 3035
  https:
    key: './config/ssl/localhost.key',
    cert: './config/ssl/localhost.pem'
  ...
  ...

Replace key and cert with a path to your SSL cert.

I’m on Webpacker 4.0.7

I would appreciate this feature, as certain configuration parameters for webpack-dev-server (color, info, progress, and stdin) can only be set at the command line.

This is super useful, and in fact required for me.

Use case:

I integrate with a bunch of third party platforms via OAuth. Some of them doesn’t work with localhost (Mailchimp, for example), so I moved to 127.0.0.1 but others don’t support 127.0.0.1 (FB Ads). So I decided to use a custom domain for local dev.

But then I started to get warnings that the FB’s JS stuff (that I need to refresh the FB token, that expires after 90 days now without being able to refresh it with a refresh token) will stop working over http and require https.

So, I need my app to be on something that is a domain (not an IP), not localhost and needs to be HTTPS.

i.e., I pretty much need this to be able to use Let’s Encrypt and not a self-signed certificate (or anything custom).

What can we do to make it happen?

In the meantime, I am using @marisveide’s fork (thanks!), but it’s only a short term solution 😃 You can use it like this: ./bin/webpack-dev-server --key ssl.server.key --cert ssl.server.crt

Thank you, @jipiboily - that’s exactly what’s needed for us as well! Will be switching to yours now! ✌️

For those like me who wanted to have a more recent fork, but also wants the patch from @marisveide, I made this fork + branch, which is branched off of the v4.0.7 tag with only one commit cherry-picked from @marisveide’s fork (thanks for that @marisveide!): https://github.com/metricswatch/webpacker/tree/4.0.7-with-custom-ssl

In your Gemfile, you should use:

gem 'webpacker', git: 'https://github.com/metricswatch/webpacker.git', branch: '4.0.7-with-custom-ssl'

For future readers @PatKoperwas solution runs into the same problem that @nicklozon identified.

It gets the key and cert passed as configuration but then the DevServer thinks https is not enabled when this line is called: https://github.com/rails/webpacker/blob/master/lib/webpacker/dev_server_proxy.rb#L15.

Maybe the below method can be changed to just check for a truth value instead of the exact boolean true?

  def https?
    case fetch(:https)
    when true, "true"
      true
    else
      false
    end
  end

Here is the related PR: https://github.com/rails/webpacker/pull/2002

Hi, @hwhelchel! I am using my fork at the moment - while waiting this PR to be merged: https://github.com/marisveide/webpacker

Since we can’t pass arguments to the webpack-dev-server I pasted my key and cert into webpacker.yml https field as a workaround as suggested above.

development:
  dev_server:
    https:
      key: |
        -----BEGIN PRIVATE KEY-----
        -----END PRIVATE KEY-----
      cert: |
        -----BEGIN CERTIFICATE-----
        -----END CERTIFICATE-----

This works when connecting directly to the webpack-dev-server on port 3035, but does not when requesting assets directly from the rails server which reverse proxies the request to the webpack-dev-server without using SSL. Webpacker is treating the Webpack https configuration field as boolean in dev_server.py and anything other than “true” will result in regular http calls, such is the case of hard-oding the key and cert above.

I think the real issue here is that webpacker made an incorrect assumption about a webpack-dev-server configuration - the https? method in dev_server.rb should not be expecting strictly boolean, or it should not be using another library’s configuration to make decisions, though I understand the desire since the two are directly tied to each other.

This is my workaround in dev_server.rb, defaults to true when not false:

  def https?
    case fetch(:https)
    when false, "false"
      false
    else
      true
    end
  end

Have you tried pointing to the files in your config? https://webpack.js.org/configuration/dev-server/#devserverhttps

This doesn’t work if you use the webpacker.yml file instead of .js.

You could pass plain certificate PEM strings to yml https: key, but then the other thing breaks - it doesn’t recognize it as “https”.