Webpack Dev Server with Devilbox

[ptmrio]

ISSUE TYPE

• Documentation

SUMMARY

As webpack-dev-server gets more popular and is also a big part of Symfony's webpack encore, I would kindly ask for a proper documentation of a correct setup.

Currently I need to add the following:

docker-compose.override.yml

version: '2.3'

################################################################################
# SERVICES
################################################################################
services:

  # .....

  # ------------------------------------------------------------
  # PHP
  # ------------------------------------------------------------
  php:
    ports:
      - "8080:8080" 

webpack.config.js

    .configureDevServerOptions(options => {
        options.client = {
            host: '0.0.0.0'
        };
        options.firewall = false;
        options.https = true;
    })

and also the starting command needs to be: encore dev-server --https --host 0.0.0.0

package.json

...
  "scripts": {
    "dev-server": "encore dev-server  --host 0.0.0.0 --https",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  }
...

Problems with this setup:

• SSL connection is always invalid. Adding the devilbox certificates to the https: { ... } options object does not work
• host needs to be included in the yarn command to start the server, else it tries to use localhost
• also client.host needs to be specified somewhat redundantly to make the web socket working

Webpack Encore 1.0.4
Webpack 5.20.1
Webpack-dev-server: 4.0.0-beta.0
Devilbox 1.7.1

Also see: symfony/webpack-encore#828

Goal

Add a documentation guide for proper implementation of webpack-dev-server.

• working SSL connection
• probably with an per project webpack-dev-server (wds)? (starting wds in multiple projects simultaneously leads to problems

Would highly appreciate! Thank you for the great devilbox!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ptmrio]

Still having issues. I need to make an exception in Firefox everytime I switch projects, by right clicking a resource in the F12 developer tools and opening one in a new tab. I would really appreciate any help.

[cytopia]

Hi @ptmrio you can find the reverse proxy setup within the documentation. It is pretty mich the same as this: https://devilbox.readthedocs.io/en/latest/examples/setup-reverse-proxy-nodejs.html

[ptmrio]

Thank you @cytopia. I was pretty much on that path, but I couldn't get it to work. Could you help my with the logic behind this setup?

I'd guess, that I have to

1. proxy pass a self chosen domain (e.g. webpack.loc) to 0.0.0.0 (or to the php container?)
2. set webpack host to webpack.loc
3. I may need to set a custom port on both the reverse proxy and webpack?

Thanks. And keep your great work up and running. IMHO this is the greatest project for web development there is. The modern WAMP of its time, but a thousand times better!

Edit: Just to be clear, it works partly for me with the following settings:

apache24.yml:

...
      ProxyPass / http://php:4000/
      ProxyPassReverse / http://php:4000/
...

webpack.config.js

...
config.devServer.port = 4000
config.devServer.firewall = false
config.devServer.client.host = 'webpack.loc'
config.output.publicPath = 'https://webpack.loc/build/'
...

Added to etc/hosts/
127.0.0.1 webpack.loc

Startet with:
encore dev-server

(Using Symfony webpack encore)

The only thing that does not work, is hot reloading.
GET wss://webpack.loc:4000/ws

[webpack-dev-server] 
error { target: WebSocket, isTrusted: true, srcElement: WebSocket, currentTarget: WebSocket, eventPhase: 2, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, … }

I would guess, this is because the vhost doesn't listen to port 4000, only to 80 and 443. While config.output.publicPath changes the path for all files, the websocket path still tries port 4000, which is not listed to. Any suggestion?

[science695]

With Docker, you could map port 4000 to also go to 443, but you would need someway to identify traffic that is a websocket so that the upgrade header gets sent, and is forwarded to the webpack port instead of php-fpm. perhaps that /ws folder could be used in the virtualhost?

[ptmrio]

Thanks @science695. I guess you'll have to make Docker + Apache/Nginx make listening to port 4000 and then edit the vhost accordingly for the reverse proxy. Unfortunately I'm not docker savvy enough to get it to work.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ptmrio]

Still not resolved for me. Can't get the websocket to work, it always runs on a different host or port. Still looking for help.

[jose-sampedro]

@ptmrio any solution?

Could you share a repository with what you have investigated?

Thank you

[ptmrio]

Nope, no "solution". Latest status is: #782 (comment)

I'm using yarn watch instead of any hot reload configuration atm. Part of the problem is the transition to webpack 5, part is this combination of browser, docker, and shared ports as well as my lack of knowledge. As mentioned a devilbox lamp + php + phpstorm + webpack (symfony encore) setup guide would be great as I think this is a rather popular setup.

[cytopia]

@ptmrio Currently working in automated reverse proxies for such use-cases. Should be available shortly

[ptmrio]

@cytopia thanks lot, looking forward

[cytopia]

The only thing that does not work, is hot reloading. GET wss://webpack.loc:4000/ws

@ptmrio

This is a websocket over SSL.

You can now set this easily via a backend.cfg configuration in your project that hosts the websocket server.

If the project providing the websocket server is webpack.loc, then you would add the file in /shared/httpd/webpack/.devilbox/backend.cfg:

# SSL Websocket Reverse Proxy backend
conf:rproxy:wss:php:4000

⚠️ Remove any other custom vhost-gen templates and only keep backend.cfg

Then

1. go to http://localhost/cnc.php and reload watcherd
2. go to http://localhost/vhosts.php and find your websocket server: https://webpack.loc

For everything above to work, you will need to switch to the v3.0.0-beta2 release here: #943

Side note

For troubleshooting I would first create a normal websocket server (without SSL) and tell the backend configuration to use ws instead of wss:

conf:rproxy:ws:php:4000

Once this is working, you can move on with SSL

[ptmrio]

Thanks a lot, will try asap next year :)