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 https://github.com/LizardByte/roadmap/issues/35

Type of Change

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

Checklist

• [x] My code follows the style guidelines of this project
• [x] 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]

Not sure what's going on with the Windows build, but just pasting the error here for easy reference.

> [email protected] build
> vite build --debug

Using srcdir from Cmake: D:\a\Sunshine\Sunshine\src_assets\common\assets\web
Using destdir from Cmake: D:\a\Sunshine\Sunshine\build\assets\web
failed to load config from D:\a\Sunshine\Sunshine\vite.config.js
error during build:
TypeError [ERR_INVALID_URL_SCHEME]: The URL must be of scheme file
    at fileURLToPath (node:internal/url:1509:11)
    at Object.<anonymous> (D:\a\Sunshine\Sunshine\vite.config.js:63:46)
    at Module._compile (node:internal/modules/cjs/loader:1740:14)
    at _require.extensions.<computed> [as .js] (file:///D:/a/Sunshine/Sunshine/node_modules/vite/dist/node/chunks/dep-3936e161.js:66565:24)
    at Module.load (node:internal/modules/cjs/loader:1474:32)
    at Module._load (node:internal/modules/cjs/loader:1286:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:234:24)
    at Module.require (node:internal/modules/cjs/loader:1496:12)
    at require (node:internal/modules/helpers:135:16)

[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[bot]]

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:

• https://github.com/LizardByte/Sunshine/commit/fe2612969739ac0f314369d152dfb35fd81c23f4
• https://github.com/LizardByte/Sunshine/commit/65f14e1003f831e776c170621bd06d8292f65155
• https://github.com/LizardByte/Sunshine/commit/27f71c389518ab83ade959be94a3293736667454
• https://github.com/LizardByte/Sunshine/commit/738ac93a0ec1cd10412d1f339968775f53bfefe0
• https://github.com/LizardByte/Sunshine/pull/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.

[sonarqubecloud[bot]]

Quality Gate failed

Failed conditions
72 New issues
2 New Bugs (required ≤ 0)
3 Duplicated Blocks on New Code (required ≤ 0)
C Reliability Rating on New Code (required ≥ A)
70 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