diff --git a/guides/uis/_menu.md b/guides/uis/_menu.md index 4b45aaf11..ed824b1b5 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 84edf418f..35a8ea931 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 000000000..c2e312376 --- /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 && code 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] {6-10} +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()], + server: { + proxy: { + '/odata': 'http://localhost:4004' + } + } +}) + +``` +```js [React] {6-10} +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}