From aa20209b755a2fe009820cdb64dd855bba434792 Mon Sep 17 00:00:00 2001 From: Steffen Waldmann Date: Mon, 16 Mar 2026 16:07:14 +0100 Subject: [PATCH 1/3] feat: guide for Vue.js/React setup --- guides/uis/_menu.md | 1 + guides/uis/index.md | 3 + guides/uis/vue-react.md | 146 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 150 insertions(+) create mode 100644 guides/uis/vue-react.md diff --git a/guides/uis/_menu.md b/guides/uis/_menu.md index 4b45aaf11b..ed824b1b5c 100644 --- a/guides/uis/_menu.md +++ b/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) diff --git a/guides/uis/index.md b/guides/uis/index.md index 84edf418f5..35a8ea9314 100644 --- a/guides/uis/index.md +++ b/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) : This guide explains how to serve analytical UIs from CAP applications using SAP Fiori elements for analytical applications. \ No newline at end of file diff --git a/guides/uis/vue-react.md b/guides/uis/vue-react.md new file mode 100644 index 0000000000..b4c19ae9a0 --- /dev/null +++ b/guides/uis/vue-react.md @@ -0,0 +1,146 @@ +--- + +--- + +# Serving Vue.js or React + +CAP is easily integrated with Vue.js, React, Svelte, or any other popular UI library. This guide explains how to set up a minimal project with a UI. + + + +## Example project + +The example here is built on a minimal CAP project: + +```sh +cds init bookshop --nodejs --add tiny-sample && cd bookshop +``` + +You can already start the CAP backend to watch for changes: +```sh +cds watch +``` + +**In a new terminal**, create a new Vue.js or React app in _app/catalog_: + +::: code-group +```sh [Vue.js] +cd app +npm create vite@latest catalog -- --template vue +``` +```sh [React] +cd app +npm create vite@latest catalog -- --template react +``` +::: +> Confirm "Install with npm and start now?" if asked. + +Now add a proxy to `app/catalog/vite.config.js`: + +::: code-group +```js [Vue.js] {2,5} +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()], + server: { + proxy: { + '/odata': 'http://localhost:4004' + } + } +}) + +``` +```js [React] {2,5} +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +export default defineConfig({ + plugins: [react()], + server: { + proxy: { + '/odata': 'http://localhost:4004' + } + } +}) +``` + +::: + +Replace _src/App.vue_ (Vue.js) or _src/App.jsx_ (React) with a minimal example: + +::: code-group +```vue [App.vue] + + + +``` +```jsx [App.jsx] +import { useEffect, useState } from 'react' + +export default function App() { + const [books, setBooks] = useState([]) + + useEffect(() => { + fetch('/odata/v4/catalog/Books') + .then(r => r.json()) + .then(r => setBooks(r.value)) + }, []) + + return ( + <> +

Books

+ + + {books.map(b => ( + + + + ))} + +
+ {b.title} + by {b.author} +
+ + ) +} +``` +::: + +Now simply open the running dev server on http://localhost:5173 to see the UI. + +::: details Dev server not accessible? + +The server might not be started yet, run this command: +```sh +npm run dev +``` +::: + +### Next Up + +You can deploy this project to Cloud Foundry or Kyma using the SAP BTP Application Frontend service (Cloud Foundry only) or a custom App Router setup. + +[Learn more about Cloud Foundry deployment](../deploy/to-cf#add-ui){.learn-more} +[Learn more about Kyma deployment](../deploy/to-kyma.md){.learn-more} From cbcdde4d305dc45ad9484b31ee20d564a82cdc24 Mon Sep 17 00:00:00 2001 From: Steffen Waldmann Date: Mon, 16 Mar 2026 16:21:21 +0100 Subject: [PATCH 2/3] Update vue-react.md --- guides/uis/vue-react.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/guides/uis/vue-react.md b/guides/uis/vue-react.md index b4c19ae9a0..b13fb8ae61 100644 --- a/guides/uis/vue-react.md +++ b/guides/uis/vue-react.md @@ -38,7 +38,7 @@ npm create vite@latest catalog -- --template react Now add a proxy to `app/catalog/vite.config.js`: ::: code-group -```js [Vue.js] {2,5} +```js [Vue.js] {6-10} import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' @@ -52,7 +52,7 @@ export default defineConfig({ }) ``` -```js [React] {2,5} +```js [React] {6-10} import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' From c60b72958373d87ae13a01cf91cd49afeb1c02e0 Mon Sep 17 00:00:00 2001 From: Steffen Waldmann Date: Mon, 16 Mar 2026 16:58:05 +0100 Subject: [PATCH 3/3] code instead of cd --- guides/uis/vue-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/uis/vue-react.md b/guides/uis/vue-react.md index b13fb8ae61..c2e3123769 100644 --- a/guides/uis/vue-react.md +++ b/guides/uis/vue-react.md @@ -13,7 +13,7 @@ CAP is easily integrated with Vue.js, React, Svelte, or any other popular UI lib The example here is built on a minimal CAP project: ```sh -cds init bookshop --nodejs --add tiny-sample && cd bookshop +cds init bookshop --nodejs --add tiny-sample && code bookshop ``` You can already start the CAP backend to watch for changes: