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/ias-admin.png b/guides/uis/ias-admin.png new file mode 100644 index 000000000..ea95e2fca Binary files /dev/null and b/guides/uis/ias-admin.png differ 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..2881c200f --- /dev/null +++ b/guides/uis/vue-react.md @@ -0,0 +1,85 @@ +# Serving Vue.js or React + + +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 +```