Problems on running the code and the demo app locally

[Jabal Logian]

Hello, I'm trying to create a web application using React JS that has a push-to-talk (PTT) feature on it.
One of the technologies that 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 is working fine.
I tried to run the repository on my local computer but got some different errors.

 

Installation Errors

 

I cloned and tried to install all of the libraries on the root folder of the repository using the `npm install` command on my local computer with Windows OS and Node JS v16 but I got this error below.

```cmd
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 mumble-client-websocket@1.0.0
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 switched the Node JS version using the NVM from v16 to v14.
I tried to install all of the libraries on the repository using the `npm install` command again but then got another different error.

```cmd
verbose stack Error: mumble-web@0.5.1 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 mumble-web@0.5.1
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 mumble-web@0.5.1 prepare: `rm -rf dist && npm run build`
error Exit status 1
error Failed at the mumble-web@0.5.1 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) on the package.json file.
I didn't know whether deleting the code would have an impact on running the app later or not.
I also searched on the internet and found this answer https://stackoverflow.com/a/62744648/8339172 to clear the npm cache, regenerate the package-lock.json file, and delete the node_modules folder.
I did all of them then I ran the "npm install" command again.

 

This time, there was no error.

 

Runtime Errors

 

Continuing the previous section, I tried to run the root of the repository by running the `npm run watch` command.
I didn't know whether the was correct or not because I usually enter the `npm start` command to run a React JS locally.
I didn't see any port configured on the package.json file so I opened the `localhost:8080` address on my browser.
Unfortunately, there was nothing there. The browser said `This site can’t be reached. localhost refused to connect.`

<h3>The App Folder</h3>

Continuing the previous section, I tried to run the index.html file on the `app` folder by double-clicking on the file.
It seemed that the app crashed because I saw there was an error on the browser console as seen in this screenshot below.
Here is the error message:
```cmd
Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)
```

 

Questions

 

I want to learn how to create the demo (https://voice.johni0702.de/?address=voice.johni0702.de&port=443/demo) on the repository. My questions are:
1. Which one is the source code of the demo app? Is it from the root folder of the repository or the app folder?
2. Continuing the first question, how to install all of the required dependencies for the demo app locally?
3. Continuing the first and second questions, how to run the demo app locally?

Edited January 16 by Jabal Logian

[Jabal Logian]

Finally, I could run the app (root level) on my computer.

 

From the installation error section, we could see that this error ```verbose stack Error: mumble-web@0.5.1 prepare: `rm -rf dist && npm run build` ``` happened when a Windows-based computer tried to run a Unix-based command. There is no `rm` command on the Windows computer.

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

 

After struggling with the WSL installation, I could run the `npm install` command on the app and no error message appeared.

But then I didn't know how to run the app. Fortunately, we found another similar repository that has the `start` script here https://github.com/Theofilos-Chamalis/mumble-web. Using the `npm install` and `npm start`, I finally could run a mumble implementation the frontend app.

 

Note: the app from the https://github.com/Theofilos-Chamalis/mumble-web was not updated like the https://github.com/Johni0702/mumble-web one but I think that's another issue from this question.