webpack-dev-server over HTTPS

[daninfpj]

I'm using puma-dev to proxy to port 8080 where webpack-dev-server is running.

If I access the site at https://domain.test the page loads, except the webpack-dev-server connection to https://domain.test:8080/sockjs-node/info?t=1540932421825 which gets a ERR_CONNECTION_CLOSED. However it works at http://domain.test:8080/sockjs-node/info?t=1540932421825.

If I run webpack-dev-server in HTTPS mode, the connection at https://localhost:8080/sockjs-node/info?t=1540932421825 works but through puma-dev there's an error:

http: proxy error: read tcp 127.0.0.1:63458->127.0.0.1:8080: read: connection reset by peer

How can I get it working with the socket connection through HTTPS?

[wildjcrt]

@daninfpj I've success with this settings. Maybe you can try it out.

In config/webpacker.yml, just use default. Remember to keep https: false.

Below is part of my config/webpacker.yml.

dev_server:
  https: false
  host: localhost
  port: 3035
  public: localhost:3035

Run this command for webpack domain.

$ echo 3035 > ~/.puma-dev/webpack.domain

Last step, set up you rails development environment. In config/environments/development.rb, set up config.action_controller.asset_host = '//webpack.domain.test'.

Done. :)

[daninfpj]

@wildjcrt you might be referring to Rails’ webpacker, I'm actually using a standalone webpack-dev-server but I think you pointed me in the right direction. This is the config that worked for me:

entry: [
    `webpack-dev-server/client?https://domain.test`,
…
devServer: {
…
    https: false,
    public: domain.test,
  }

[Eric-Guo]

Leave an additional comment here, if you change https: true for the local https app like https://your-app.test/, need access https://your-app.test:3035/sockjs-node/info?t=1564015123119 and access the certificate manually as it's self-signed.

[barrywoolgar]

@wildjcrt Thanks for your example, it almost worked for me but I found I had to use public: webpack.domain.test (without the port number) to avoid console errors about sockjs-node/info. I made a PR to add an updated version of your example to the README.

[barrywoolgar]

njradford: suggestion for using this workaround while also serving up sprockets assets? It seems to fix the webpack issue but disrupt the existing rails assets.

@njradford Ah that is a problem! I don't have access to a mixed sprockets/webpacker project to test this at the moment, but I'm guessing requests for sprockets assets are being directed to the webpack dev server.

If so, I wonder if it's possible to use the contentBase configuration option to reconnect those requests to the on-disk sprockets assets? Though without a request passing through the Rails app, I guess there's nothing to trigger those assets to be (re)generated.

[barrywoolgar]

Another solution could be this suggestion to use a proc for asset_host which looks rather hacky but might just be crazy enough to work.