Webpack for jitsi-meet development does not work as expected

Running Webpack does not work as expected for development

So here are the steps that I followed:

  1. Cloned the jitsi-meet github repo, from jitsi/jitsi-meet.git

  2. Read the notes in doc/development.md.

  3. Confirmed that the lib-jitsi-meet library compilation worked, by going through the steps in the doc (npm install, make, changing the default dependency path in package.json to local file/copy, and then running npm install lib-jitsi-meet --force && make). Tried steps 4-5 both with and without (re)compiling lib-jitsi-meet.

  4. Tried running the dev webpack server from the command line, but doing “make dev”, and accessing the jitsi-meet web page at https://localhost:8080. This worked.

  5. Tried to customize the user interface, by changing (e.g.) body.html, etc. Hot loading clearly does not work, because the changes do not make it to the front end. Stopping/starting webpack does not seem to work either - the source that I see in the browser does not contain the changes that I made on (e.g.) “body.html”.

  6. Confirmed that changing it on my “live” site (served through nginx) works fine. Any changes in (e.g.) “body.html” makes it to the front end.

So the question in my mind is if I am doing something wrong ? I expected changes in (e.g.) the html files to show up in the file that is served - but that is clearly not happening. No error message on the command line.

xxxxxxxx@yyyyyy ~/Projects/jitsi-meet $ make dev
rm -fr libs
mkdir -p libs
./node_modules/.bin/node-sass css/main.scss css/all.bundle.css && \
./node_modules/.bin/cleancss css/all.bundle.css > css/all.css ; \
rm css/all.bundle.css
Rendering Complete, saving .css file...
Wrote CSS to /home/xxxxxxxxx/Projects/jitsi-meet/css/all.bundle.css
cp \
	node_modules/rnnoise-wasm/dist//rnnoise.wasm \
	libs
cp \
	node_modules/lib-jitsi-meet//lib-jitsi-meet.min.js \
	node_modules/lib-jitsi-meet//lib-jitsi-meet.min.map \
	node_modules/lib-jitsi-meet//connection_optimization/external_connect.js \
	node_modules/lib-jitsi-meet//modules/browser/capabilities.json \
	libs
cp \
	node_modules/libflacjs/dist/min//libflac4-1.3.2.min.js \
	node_modules/libflacjs/dist/min//libflac4-1.3.2.min.js.mem \
	libs

./node_modules/.bin/webpack-dev-server
ℹ 「wds」: Project is running at https://localhost:8080/
ℹ 「wds」: webpack output is served from /libs/
ℹ 「wds」: Content not from webpack is served from /home/xxxxxxxxx/Projects/jitsi-meet
ℹ 「wdm」: wait until bundle finished: /libs/app.bundle.min.js?v=3969
ℹ 「wdm」: wait until bundle finished: /libs/do_external_connect.min.js?v=1
ℹ 「wdm」: wait until bundle finished: /libs/lib-jitsi-meet.min.js?v=3969
1 Like

Hot reload is only for the code that is compiled by webpack. The code that goes in:
:information_source: 「wdm」: wait until bundle finished: /libs/app.bundle.min.js?v=3969
:information_source: 「wdm」: wait until bundle finished: /libs/do_external_connect.min.js?v=1
:information_source: 「wdm」: wait until bundle finished: /libs/lib-jitsi-meet.min.js?v=3969

Basically for everything under the react folder.

Ah ! Did not know that. Thank you for the pointer…
You saved me many, many hours of utter frustration, especially since it explicitly says "Content not from webpack is served from the root “jitsi-meet” folder !!!

Do you know of any way to configure webpack to behave exactly like an actual install under a web server like apache2/nginx, rather than just react ?

Thank you, again !

Nope.

Hi, i have an issue on the Hot Reload, i run jitsi project on WSL2 and using Ubuntu 20.04 and when i did change on the react files, its not auto reloaded when i saved it. is there something wrong that i didn’t notice ?