statianzo / webpack-livereload-plugin

LiveReload during webpack --watch
ISC License
204 stars 51 forks source link

Https: This site can’t be reached #39

Closed asos-hutber closed 6 years ago

asos-hutber commented 6 years ago

I am using anyproxy alongside webpack and your livereload plugin. I'm unable to reach https: https://localhost:35729/livereload.js I can reach http://localhost:35729/livereload.js

Webpack.confg new LiveReloadPlugin(),

anyproxy.js

        response: Object.assign({}, response, {
          body: bodyString.replace(
            "</body>",
            `<script src="//127.0.0.1:35729/livereload.js"></script>\n${markup}\n</body>`
          )
        })

As expected the page has <script src="//127.0.0.1:35729/livereload.js"></script> in the source.

I have tried forcing https in the options, but really this shouldn't matter I believe?

Thanks for any help you can give as well bud.

statianzo commented 6 years ago

To have live reload served over https, you need to add key and cert or pfx configuration options as stated in the readme.

https://github.com/statianzo/webpack-livereload-plugin#https

asos-hutber commented 6 years ago

Ye, thanks @statianzo I did see this and tried to add random values, but I have no real idea what these are meant to be set to? I assumed something to do with https?

Also I realise how vague this statement is...

  const optionsReload = {
    key: true,
    cert: true
  };
      new LiveReloadPlugin(optionsReload),
asos-hutber commented 6 years ago

I wonder if I'm meant to put the name of my cert or the path name?

statianzo commented 6 years ago

cert is your ssl certificate of your certificate. String or Buffer, not the file path. key is the private key of your certificate. String or Buffer, not the file path.

The options ultimately get passed to tls.createSecureContext. Those options are listed here. https://nodejs.org/api/tls.html#tls_tls_createsecurecontext_options

asos-hutber commented 6 years ago

Thanks again @statianzo

So in the end we should expect something like this:

  const optionsReload = {
      cert: `-----BEGIN CERTIFICATE-----
      ...
      mFg5ieS9eijN7XULU/LF+G3b0bmyx4hhPTNM
      ...
      -----END CERTIFICATE-----`,
      key : `-----BEGIN RSA PRIVATE KEY-----
      ...
      JIuUft9LYhvojeOQC7G1BP3JBtou/9S8PE2DGVzLoo+G9jzfyjdk
      ...
      -----END RSA PRIVATE KEY-----`
  };

...

new LiveReloadPlugin(optionsReload),

As this is what I have, but the https url still fails.

asos-hutber commented 6 years ago

humm weird, now the http fails :O

statianzo commented 6 years ago

The plugin server maps to only one port, so it's http or https.

If both are necessary, you could use multiple livereload plugins with different port numbers. It's not a scenario I've tested though.