Run app locally - Ubuntu

[chandu]

Hi,
I have gone through the setup docs @ https://github.com/AntonioMrtz/SpotifyElectron/blob/master/docs/developer/

When I folow the frontend setup @ https://github.com/AntonioMrtz/SpotifyElectron/blob/master/docs/developer/frontend/SETUP.md, specially @ npm start, I am getting the error below:

> [email protected] start
> ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer


> [email protected] start:renderer
> cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts

Starting preload.js builder...
Starting Main Process...

> [email protected] start:preload
> cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts


> [email protected] start:main
> cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:1212/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.2.11:1212/
<i> [webpack-dev-server] Content not from webpack is served from '/mnt/projects/github/SpotifyElectron/Electron/public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
[electronmon] waiting for a change to restart it
[633796:0123/120257.477589:FATAL:setuid_sandbox_host.cc(158)] The SUID sandbox helper binary was found, but is not configured correctly. Rather than run without sandboxing I'm aborting now. You need to make sure that /mnt/projects/github/SpotifyElectron/Electron/node_modules/electron/dist/chrome-sandbox is owned by root and has mode 4755.
[electronmon] app exited with code null, waiting for change to restart it
^C<i> [webpack-dev-server] Gracefully shutting down. To force exit, press ^C again. Please wait...

Then I ran the command below:

sudo chown root:root /mnt/projects/github/SpotifyElectron/Electron/node_modules/electron/dist/chrome-sandbox
sudo chmod 4755  /mnt/projects/github/SpotifyElectron/Electron/node_modules/electron/dist/chrome-sandbox

and ran npm start command, then I got the error listed below:

> [email protected] start
> ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer


> [email protected] start:renderer
> cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts

Starting preload.js builder...
Starting Main Process...
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:1212/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.2.11:1212/
<i> [webpack-dev-server] Content not from webpack is served from '/mnt/projects/github/SpotifyElectron/Electron/public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'

> [email protected] start:preload
> cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts


> [email protected] start:main
> cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .

The setuid sandbox is not running as root. Common causes:
  * An unprivileged process using ptrace on it, like a debugger.
  * A parent process set prctl(PR_SET_NO_NEW_PRIVS, ...)
Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Operation not permitted
[electronmon] waiting for a change to restart it
[electronmon] app exited with code null, waiting for change to restart it

Then I launched the browser with the URL as http://localhost:1212/ and then got the error below:

URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
    at decodeURIComponent (<anonymous>)
    at decode_param (/mnt/projects/github/SpotifyElectron/Electron/node_modules/express/lib/router/layer.js:172:12)
    at Layer.match (/mnt/projects/github/SpotifyElectron/Electron/node_modules/express/lib/router/layer.js:123:27)
    at matchLayer (/mnt/projects/github/SpotifyElectron/Electron/node_modules/express/lib/router/index.js:585:18)
    at next (/mnt/projects/github/SpotifyElectron/Electron/node_modules/express/lib/router/index.js:226:15)
    at expressInit (/mnt/projects/github/SpotifyElectron/Electron/node_modules/express/lib/middleware/init.js:40:5)
    at Layer.handle [as handle_request] (/mnt/projects/github/SpotifyElectron/Electron/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/mnt/projects/github/SpotifyElectron/Electron/node_modules/express/lib/router/index.js:328:13)
    at /mnt/projects/github/SpotifyElectron/Electron/node_modules/express/lib/router/index.js:286:9
    at Function.process_params (/mnt/projects/github/SpotifyElectron/Electron/node_modules/express/lib/router/index.js:346:12)

```, the browser still showed the login page, albeit in Spanish

Wanted to check if I am missing any dependencies (new to Electron), or if this is expected behaviour for dev?
Also, is there any config I can set locally to default to En locale

[AntonioMrtz]

Hi @chandu :) .

Npm start errors

In my local machine I'm also getting the same <i> [webpack-dev-server] 404s will fallback to '/index.html' and sometimes the favicon one too. I couldn't manage to make this errors to not show on development mode but they don't really have an impact on the application so I left them untouched.

Sandbox error

With the AppImage bundled for production sometimes we get errors if not using --no-sandbox. There's a guide on installation docs that compiles some errors when working with AppImages. For development I saw in some Electron Github issues that said running the chmod commands is necessary for correct app behaviour.

Development

I do usually develop using the Electron window instead of the browser instance. Trying to call OS methods that Electron provides using the web version makes the app crash. Ex: clipboard, back/forward navigation etc. Electron development window has React extension and allows the dev to use developer tools as if being in the browser. In my machine I run Ubuntu 24.04 and the Electron window opens. Is this window being displayed in your system?

Frontend language

Right now frontend is only available in spanish. I'm working on localization with i18n to provide both english and spanish as the app language #270. All the code is written using english comments, naming etc. Let me know if there's something you don't understand of the current spanish frontend

---

Let me know if you have issues that prevent you from developing/using production app :). If the warning/errors you're getting let you use and develop normally we're fine with that as they normally come from the Electron library itself

[chandu]

Thanks @AntonioMrtz , I have noticed that the error I have

The setuid sandbox is not running as root. Common causes:
  * An unprivileged process using ptrace on it, like a debugger.
  * A parent process set prctl(PR_SET_NO_NEW_PRIVS, ...)

is only occuring when I run the npm start from native shell. If I run the same command from the VScode Terminal, the app is working fine.

When I change the `` from"start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only.", to `"start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only --no-sandbox .",`, it's working fine from both VSCode and native shell

What are your thoughts on changing the start:main script to pass --no-sandbox or shall we leave it way it is and I will continue using VSCode terminal to run the frontend locally.

[AntonioMrtz]

Hi @chandu, I'm glad your issues have been resolved. I tried reproducing the error on a fresh Ubuntu 24.10 installation, and the frontend runs without any issues from the native shell. At this time, I don’t plan to introduce --no-sandbox, as this command should only be used if strictly necessary. Thank you for your suggestion! 😊

[chandu]

Agree.