Proxy as https url returns empty response

[fabioaccetta]

I have a local working https://wordpress.local with a valid autogenerated local ssl certificate (green lock in all browsers), but if i try to configure wpackio.server.js this way:

	host: 'localhost',
	proxy: 'https://wordpress.local',
	port: 3000,

i got empty response.

I'm on linux using latest master version (with latest version of all packages).

I'm not a browser-sync/webpack-dev-server expert, so surely i'm missing something, but is it possible to develop in https environment with wpack?

Thanks in advance

[swashata]

Hello,

I think so, but browserSync will need it's own certificate.

Without any configuration, it will work if you navigate to https://localhost, but it may show untrusted certificate.

Maybe you can use the same certificate as your wordpress.local. Edit your wpackio.server.js and add this new option

module.exports = {
  // ...
  bsOverride: {
    https: {
      key: "path-to-custom.key",
      cert: "path-to-custom.crt"
    }
  },
}

More information can be found here

Also for some reason, HMR works good, if you have specified your LAN IP and not localhost. If you must use localhost, then specify the IP

module.exports = {
  host: '127.0.0.1',
  proxy: 'https://wordpress.local',
  bsOverride: {
    https: {
      key: "path-to-custom.key",
      cert: "path-to-custom.crt"
    }
  },
}

The bsOverride is used to pass options directly to browser-sync. We do not use webpack-dev-server, rather use webpack-dev-middleware and webpack-hot-middleware with browser-sync. Do give this a read https://wpack.io/concepts/how-everything-works-together/

[swashata]

Also, if this solves your issue, do you think you can improve the docs by sending a PR?

[fabioaccetta]

Sorry, but with your suggestion nothing changes: same error (empty response).

Is there some log i can inspect?

[fabioaccetta]

After some test i have discovered that the answer appears if i go to https://127.0.0.1:3000 instead of http://..., but it seems the live-reload feature does not to work: file change detected but browser page not reloaded.

[fabioaccetta]

My mistakes: wrong configuration (wpack and \WPackio\Enqueue configured one in a subfolder of the other).

Now composer.json, package.json and all wpack.*.js are in theme root and all works as espected.

As last words, many troubles trying to use this structure:

[...]/wp-content/themes/wpacktheme/
   |-> (all wordpress theme files)
   |-> composer.json
   |-> wpack/
      |-> package.json
      |-> wpack.*.js
      |-> src/
         |-> js/*.js
         |-> ts/*.ts
         |-> scss/*.scss

but i think it's not subject of this issue, maybe i will open another one about nesting folders configuration if you are interested in).

Sorry, i'm not so expert also with PR.

Thanks, i can close this issue.

[swashata]

It's alright. About the directory structure, this tool is meant to be the bundler for all your theme js/ta/css files. So you should keep it in the root.

If you are worried about having composer.json or package.json in your ultimate package, then you can just remove them when creating the zip package.

[swashata]

Also I am going to keep this open because it needs to go in the docs