Desktop web app with vue.js

[andrii-kulminskyi]

As a part of https://github.com/TeamDev-IP/Marketing/issues/803.

In this changeset, we added a demo desktop app with web-based UI on vue.js. This demo is part of the "Java desktop app with Shadcn UI" blog post. The app shows a dialog for preferences and saves them to the file system, so they are preserved after restarting. Here’s what it looks like:

The web app is located in the web-app directory. To set up communication between the web app and Java, we configured the Armeria gRPC server to run on localhost. The client (web app) connects to the server through gRPC web transport:

const transport = createGrpcWebTransport({
    baseUrl: `http://localhost:${rpcPort}`,
});

Loading web UI

The way we load the web UI depends on whether it's a development or production environment.

Dev mode

To load the web UI in dev mode, you should first start the dev server. In the root directory, run:

./gradlew :desktop-web-app-vue:startDevServer 

After that, run the application itself:

./gradlew :desktop-web-app-vue:run 

Prod mode

In the production mode, we used an approach based on custom schemes and the URL request interceptor. This way, all web resource requests are handled inside the app, so no one can intercept them and access the resources, which is essential for desktop apps.

At the same time, using a custom scheme ensures that regular HTTPS XHR requests, such as authentication, API calls, can come through.

[ivan-diachenko-td]

And let's add line breaks at the end of the files.

[vlad-lubenskyi]

@andrii-kulminskyi as discussed last week, let's avoid copy-pasting the Java backend and re-use it from the existing React application.

[vlad-lubenskyi]

We're almost there. Let's finish this one today.

[ivan-diachenko-td]

LGTM with some minor comments

[ivan-diachenko-td]

Do we need this file?