Port 8800 getting hardcoded

[snydergd]

Related to spotDL/spotify-downloader#2035

It seems that port 8800 is ending up being hard-coded in the javascript somehow. You can see this if you search for "8800" in https://github.com/spotDL/web-ui/blob/master/dist/assets/index-CGxZV3ZT.js

This results in the UI not being able to contact the API if they are served on a port beisdes 8800 (e.g., docker setups or behind a reverse proxy like in my case).

It seems like that chunk of code matches with this config, but I'm not sure how that's turning into 8800 -- maybe vite is doing some smarts to transform this?: https://github.com/spotDL/web-ui/blob/master/src/config.js

I tried to look a little at why vite might do this, but didn't find much.

[snydergd]

I did find this in the vite documentation -- so it seems like maybe that define for process.env might be what's causing the values to be statically replaced. It's kind of interesting that it finds the values, though. Evidently it just strips out the whole expression and replaces it statically?

In library mode, all import.meta.env.* usage are statically replaced when building for production. However, process.env.* usage are not, so that consumers of your library can dynamically change it. If this is undesirable, you can use define: { 'process.env.NODE_ENV': '"production"' } for example to statically replace them, or use esm-env for better compatibility with bundlers and runtimes.

[FaNt4zMa]

Thanks for you research! Hopefully they can fix/revert this in the next update as I also use it behind a reverse proxy...

[jspiers]

It looks like maybe this has been fixed in the dev branch?
spotDL/spotify-downloader#2035 (comment)

[snydergd]

@jspiers you could be right, but it looks like master was updated to use vite version 5.x about 4 months ago (package.json) but dev has only been updated to a 4.x version, which makes me think maybe the issue has only ever existed in master. I'm no expert with vite, though, and still don't understand exactly how the value gets hardcoded, so it's hard to say for sure without playing with the project a bit.

[jspiers]

Ah ok. I never actually looked into the differences between dev and master... all I know is that my docker/traefik spotdl setup only works when I use the dev version of the web-ui (i.e. v4.2.0 docker image). I was hopeful dev was ahead of master in this respect, but if it's using an older version of vite then I guess not. I know nothing about vite myself.

[snydergd]

I brought down the project and built it and the resulting minified javascript is almost identical to the one checked in, except that a few identifiers are different (just that minification decided on names differently for some reason, I think) and that the port is hard-coded.

@phcreery - seems like something was different for the build that produced the file in dist/ (just tagging you because your user is on the commit). Am wondering if just cleaning the project and rebuilding would produce the same results for you, or if maybe there is a certain way the project should be built that I'm not doing (I'm just running npm run build). What do you think?