feat: guide for Vue.js/React setup

guides/uis/_menu.md

@@ -2,4 +2,5 @@
 # [Localization / I18n](i18n)
 # [Localized Data](localized-data)
 # [SAP Fiori UIs](fiori)
+# [Vue.js or React UIs](vue-react)
 # [Analytics](analytics) <!-- UNRELEASED -->

guides/uis/index.md

@@ -18,5 +18,8 @@ On top of that, there is out-of-the-box support for SAP Fiori elements, for exam
 [ SAP Fiori UIs ](fiori)
    :   This guide explains how to serve SAP Fiori UIs from CAP applications, including the usage of Fiori annotations and Fiori drafts.
 
+[ Vue.js + React.js ](vue-react)
+   :   This guide explains how to serve Vue.js or React UIs with a CAP backend.
+
 [ Analytics ](./analytics) <!-- UNRELEASED -->
    :   This guide explains how to serve analytical UIs from CAP applications using SAP Fiori elements for analytical applications. <!-- UNRELEASED -->

guides/uis/vue-react.md

@@ -0,0 +1,85 @@
+# Serving Vue.js or React
+<Since version="9.9.0" package="@sap/cds-dk" />
+
+CAP is easily integrated with [Vue.js](https://vuejs.org/) or [React](https://react.dev/).
+This guide explains how to set up a minimal project with a UI.
+
+> [!note] What about other UI frameworks?
+> Other popular UI libraries like [Svelte](https://svelte.dev/) could follow the same pattern but don't have `cds add` support for now.
+
+## Example project
+
+The example here is built on a minimal CAP project:
+
+```sh
+cds init bookshop --add nodejs,tiny-sample && code bookshop
+```
+
+Now simply create a Vue.js or React app in `app/catalog`:
+
+::: code-group
+
+```sh [Vue.js]
+cds add vue --into catalog
+```
+
+```sh [React]
+cds add react --into catalog
+```
+
+:::
+
+Now simply start the dev server:
+
+```sh
+cds watch
+```
+
+Open http://localhost:4004 to see your running applications.
+
+## Next Up
+
+You can deploy this project to Cloud Foundry or Kyma using the _SAP BTP Application Frontend_ service or a _custom App Router_ setup.
+
+Simply add _Application Frontend_ like so:
+
+```sh
+cds add app-frontend
+```
+
+> When deploying your first Application Frontend service in that subaccount also make sure to subscribe to "Application Frontend Service" with plan "build-default".
+
+Also make sure to choose an authentication mode:
+
+```sh
+cds add ias
+```
+or...
+```sh
+cds add xsuaa
+```
+For the deployment, we add HANA as the production database:
+```sh
+cds add hana
+```
+
+Afterwards, deploy your project:
+
+```sh
+cds up
+```
+
+[Learn more about Cloud Foundry deployment](../deploy/to-cf#add-ui){.learn-more}
+[Learn more about Kyma deployment](../deploy/to-kyma.md){.learn-more}
+
+> [!tip] When using IAS, set up the Application Frontend dependency.
+>
+> Add the API exposed by your bookshop application to the Application Frontend Service in your IAS admin console:
+>
+> ![IAS Admin console](./ias-admin.png)
+
+You can use the [`@sap/appfront-cli`](https://www.npmjs.com/package/@sap/appfront-cli) package to see the links of your deployed application:
+
+```sh
+acftl list
+```