Mumble Web - Issues with local code execution and demo applications

Question

I'm trying to create a web application with push-to-talk (PTT) functionality using React JS. One of the technologies we will use is Mumble.

The demo https://voice.johni0702.de/?address=voice.johni0702.de&port=443/demo on this https://github.com/Johni0702/mumble-web repository works fine. I tried running the repository on my local machine but got a few different errors.

Installation error

I cloned and tried to install all the libraries in the root folder of the repository using the npm install command on my local machine running Windows OS and Node JS v16 but I got the following error.

verbose stack Error: command failed
verbose stack     at ChildProcess.<anonymous> (C:\Users\LENOVO\AppData\Roaming\nvm\v16.18.0\node_modules\npm\node_modules\@npmcli\promise-spawn\lib\index.js:63:27)
verbose stack     at ChildProcess.emit (node:events:513:28)
verbose stack     at maybeClose (node:internal/child_process:1100:16)
verbose stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:304:5)
verbose pkgid [email protected]
verbose cwd C:\Users\LENOVO\AppData\Local\npm-cache\_cacache\tmp\git-cloneZtPlJ2
verbose Windows_NT 10.0.22621
verbose node v16.18.0
verbose npm  v8.19.2
error code 1
error path C:\Users\LENOVO\AppData\Local\npm-cache\_cacache\tmp\git-cloneZtPlJ2
error command failed
error command C:\WINDOWS\system32\cmd.exe /d /s /c npm run compile
verbose exit 1
timing npm Completed in 8638ms
verbose code 1

Then I used NVM to switch the Node JS version from v16 to v14. I tried installing all the libraries on the repository again using the npm install command, but then I got another different error.

verbose stack Error: [email protected] prepare: `rm -rf dist && npm run build`
verbose stack Exit status 1
verbose stack     at EventEmitter.<anonymous> (C:\Users\LENOVO\AppData\Roaming\nvm\v14.21.2\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
verbose stack     at EventEmitter.emit (events.js:400:28)
verbose stack     at ChildProcess.<anonymous> (C:\Users\LENOVO\AppData\Roaming\nvm\v14.21.2\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
verbose stack     at ChildProcess.emit (events.js:400:28)
verbose stack     at maybeClose (internal/child_process.js:1088:16)
verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:296:5)
verbose pkgid [email protected]
verbose cwd D:\A.ing\Works\Others\Lacak-and-Valid\Exercises\React-Js\mumble-web-2
verbose Windows_NT 10.0.22621
verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "i"
verbose node v14.21.2
verbose npm  v6.14.17
error code ELIFECYCLE
error errno 1
error [email protected] prepare: `rm -rf dist && npm run build`
error Exit status 1
error Failed at the [email protected] prepare script.
error This is probably not a problem with npm. There is likely additional logging output above.
verbose exit [ 1, true ]

I tried to delete the "prepare": "rm -rf dist && npm run build", code (line 45) in the package.json file. I don't know if removing the code will have any impact on running the application in the future. I also searched online and found this answer https://stackoverflow.com/a/62744648/8339172 to clear npm cache, regenerate package-lock.json file, and delete node_modules folder. I did all this and then ran the "npm install" command again.

No errors this time.

Runtime Error

Continuing from the previous section, I tried running the root of the repository by running the npm run watch command. I don't know if this is correct since I usually run React JS locally by typing the npm start command. I didn't see any ports configured on the package.json file, so I opened the localhost:8080 address on my browser. Unfortunately, there is nothing there. The browser says This website cannot be accessed. Connection refused by localhost.

Application Folder

Continuing from the previous section, I tried running the index.html file in the app folder by double-clicking it. The app seems to be crashing as I see an error on the browser console as shown in the screenshot below. This is the error message:

Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

question

I would like to learn how to create a demo on the repository https://github.com/Johni0702/mumble (https://voice.johni0702.de/?address=voice.johni0702.de&port=443/demo) - web . my question is:

1. Which one is the source code of the demo application? Is it from the root folder of the repository or the application folder?
2. Continuing with the first question, how do I install all the dependencies required for the demo application locally?
3. Continuing with the first and second questions, how to run the demo application locally?

environment

Operating system: Windows 11

Nodes: 14.21.2, 16.18.0 and 18.13.0 (switchable)

Answer 1

Finally, I can run the application on my computer (root level).

From the installation error section, we can see this errorverbose stack Error: m<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec99818e8089c19b898eacdcc2d9c2dd" >[ email protected]</a> Preparation: `rm -rf dist && npm run build` Occurs when a Windows-based computer attempts to run a Unix-based command. There is no rm command on Windows computers.

So I tried to install WSL on my Windows machine https://techcommunity.microsoft.com/t5/windows-11/how-to-install-the-linux-windows-subsystem-in-windows- 11/td-p/2701207.

After struggling to install WSL, I can run the npm install command on the application and no error messages appear.

But then I don't know how to run the application. Fortunately, we found another similar repository containing the start script https://github.com/Theofilos -Chamalis/mumble-web. Using npm install and npm start, I can finally run the mumble implementation of the frontend application.

NOTE: The app-web from https://github.com/Theofilos-Chamalis/mumble is not as updated as https://github.com/Johni0702/mumble-web One, but I think that's another problem with this question.