refactor(webui): Migrate Vue App to Full SPA

[TheElixZammuto]

Description

This PR changes the way the Web UI is built and served, making use of a much more industry-standard SPA.

On Sunshine Server

This means that the only HTML page served is the index.html (which is also served in case of fall-backs to handle SPA auth) with all the assets. It also handles the redirect on the authenticate method now

On the Web UI build

Removed the EJS templating and making Vite only with a single entrypoint, also made the Vite Server working while proxying Sunshine. This way those can be developed and tested separately without building completely Sunshine

On the Web UI runtime

Now the UI is a single Vue App, the navigation is handled by Vue-Router

Advanteges

• Less boilerplate code on both Sunshine and Vite
• Can be run standalone with an API proxy, so the UI can be tested without Sunshine running (e.g. with playwright)
• More standard and less clunky approach

Issues Fixed or Closed

• Resolves Sunshine: Migrate Web UI to full SPA roadmap#35

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Dependency update (updates to dependencies)
• Documentation update (changes to documentation)
• Repository update (changes to repository files, e.g. .github/...)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

[ReenigneArcher]

Nice work on this!

I have a few comments below, and a question.

Can be run standalone with an API proxy, so the UI can be tested without Sunshine running (e.g. with playwright)

I assume we still need a server running, just through node instead of Sunshine? Or can we build a "static" site? I'm just thinking if there was a way to host a demo of the site on gh-pages.

[ReenigneArcher]

How hard would it be to change the location of the locale files? It would be nice if they were higher up in the repo, such as in ./locale/web/.

Not a requirement for this PR though.

[TheElixZammuto]

Since the Frontend loads the locale dynamically from the JSON files we need them in the public folder
The only way to change the path is by moving it into bundling statically

[ReenigneArcher]

This is for use/testing outside of Sunshine? Can the port be configurable, and maybe pull in from an env variable?

[TheElixZammuto]

Yup, this is used by the vite dev server "npm run dev". When used by Sunshine this is not used
We can of course read it from an env var since it's a Javascript file

[TheElixZammuto]

I assume we still need a server running, just through node instead of Sunshine? Or can we build a "static" site? I'm just thinking if there was a way to host a demo of the site on gh-pages.

We can build a static site, the only thing blocking us here is that we need to provide some mocks for the APIs (version, apps etc)

[sonarqubecloud]

Quality Gate failed

Failed conditions
41 New issues
2 New Bugs (required ≤ 0)
3 Duplicated Blocks on New Code (required ≤ 0)
C Reliability Rating on New Code (required ≥ A)
39 New Code Smells (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[ReenigneArcher]

Besides the conflicts is this one ready? I'd like to get this one in next or soon.

These are the commits I know that have touched the web-ui in one way or another:

• fe26129
• 65f14e1
• 27f71c3
• 738ac93
• fix(video): restore the ability to set a minimum fps target #4114

[Nonary]

LGTM.

We probably could reduce the number of relative imports by using the @ alias that was added, but other than that in terms of security and the changes to backend for the SPA is pretty much how I would have done it as well.

As far as I can tell for the merge conflicts, all of the current ones win and there is some minor formatting that needs to be done to get it to build.

[Nonary]

Actually maybe one minor change, we probably should make a 404 page on the frontend for invalid urls. Right now if you type in an invalid url it will just land on a blank page.