Sage + Webpack & Docker SSL issue

[cShark-dev]

I am trying to set webpack host to 0.0.0.0 but running into trouble.

The wepack.config.watch.js is instructing to modify webpack.config.js directly.

Would anyone be able to tell me if it’s to this part of the webpack.config.js:

module.exports = merge.smartStrategy({
‘module.loaders’: ‘replace’,
})(webpackConfig, desire(${__dirname}/webpack.config.preset));

That I need to add:

devServer: 0.0.0.0

Also when I add:

“start”: “webpack-dev-server --host 0.0.0.0 --hide-modules --watch --config resources/assets/build/webpack.config.js”,

I get code: ‘MODULE_NOT_FOUND’,
requireStack: [
‘/Users/imac/Desktop/WordPress/wordpress-nginx-docker-compose-master/src/web/app/themes/cTheme/node_modules/webpack-dev-server/bin/webpack-dev-server.js’
]

Would someone please be able to help me get this to work?

When I do a normal yarn start I cannot access localhost:3000 due to an SSL error which is why I need to set the --host to 0.0.0.0 but I cannot configure it properly!

[strarsis]

@cShark-dev

node_modules/webpack-dev-server/bin/webpack-dev-server.js

Apparently it can’t find the file node_modules/webpack-dev-server/bin/webpack-dev-server.js.
All npm packages installed for that theme?

[cShark-dev]

@strarsis Thanks for replying!

So I have tried to install webpack-dev-server several times globally and locally, starting from my Sage theme folder named “cTheme”.

There is a webpack-dev-server in the node_modules folder

Whenever I expose ports 3000 and 3001 in my docker-compose.yml file
Browsersync changes the ports to 3002, 3003.

It is literally impossible to access localhost:3000.

It seems as if I need to configure webpack to --host 0.0.0.0 and expose ports 3000 and 3001.

I have tried adding the devServer object to module.exports in webpack.config.watch.js to no avail.

Also, where do I input the code below you think? It’s supposed to get it to work…

browsersync.init({
proxy: “https://myapp.local”,
https: true
});

[strarsis]

Browsersync picks free, available ports and proxies an existing URL (that uses another port!).

[cShark-dev]

So I changed to “devUrl”: “https://myapp.local”,

I can now use Browser-Sync.

Also exposed:
- ‘3000:3000’
- ‘3001:3001’

Sorry if the question was a bit out of scope for the forum. Just wanted to get everything to work.

I’m still wondering if I should use webpack-dev-server with Browser-sync or if that’s not neccessary.

[strarsis]

The webpack dev server together with the sage setup should allow webpack watching + style/script reloading when you change something in the theme project, hence it would make sense to use the existing sage setup.

[cShark-dev]

@strarsis, thanks for responding. Looked to me as if webpack-dev-server is not part of the default Sage theme installation. Please correct me if I am wrong.

As far as I have understood it’s using the browser-sync-webpack-plugin which is activated when webpack is in watch-mode.

Reading from: https://www.npmjs.com/package/browser-sync-webpack-plugin I would personally want to get the webpack-dev-server working because hot-module loading and what-have-you seems quite nice.

The question is if it’s really necessary, I have struggled to get browser-sync to work with just webpack now in this Docker environment and I seriously want to start my theme development, however I would even more so like to have the most optimal and smooth dev environment with Sage and Docker, hence I am still wondering if I should try to get webpack-dev-server to work…

As far as I understand it it’s “just” a matter of setting webpack-dev-server to host 0.0.0.0,
expose ports 3000 and 3001 on the nginx service in Docker and then proxy to the domain like this:

browsersync.init({
  proxy: "https://myapp.local",
  https: true
});

Problem is, I’m not sure where to put all the code. For instance, exposing the ports in Docker/nginx I’ve done like so:

webpack-dev-server is not in the package.json file, so I would need to yarn add it I believe, I think the latest version gave errors and issues.

Also don’t know where exactly in the webpack.config.js or webpack.config.watch.js to put

browsersync.init({
  proxy: "https://myapp.local",
  https: true
});

I wish someone could step in and tell me how to do it! It would be a lot of fun to get it all working, especially with Docker.

[alwaysblank]

You haven’t said which version of Sage you’re working with, but it sounds like 9? I believe you can pass options to BrowserSync here: https://github.com/roots/sage/blob/f3e794a09374d2f110742d15b9b975490fcddbee/resources/assets/build/webpack.config.watch.js#L29-L35

I don’t know that there’s any reason to run the build process “inside” of docker, though. I’ve been using devilbox for development for a while, and I just run yarn start in my host OS, not inside docker, and it works fine.

[cShark-dev]

@alwaysblank, Hello and thanks for this solid tip! It is Sage9 indeed.
Thanks for the link for Browser-sync. Yes I believe I have got Browser-sync working now with Docker. I added the code to webpack.config.watch.js:

I had to add this in /assets/config.json as well:

I will have a look at devilbox, thanks.

[cShark-dev]

Does anyone know what needs to be done to get to the Sage Starter page when using webpack-dev-server instead of this:

I’ve got this in package.json:

And I’ve got this in webpack.config.js

I don’t know if this helps to figure out why:

Edit: I might give up on all this webpack-dev-server issue, would anyone just be able to confirm if it’s possible to add HMR or if it is being used already by the middleware that is in the node_modules? If so there is no need to get webpack-dev-server added to this whole setup, right?