Skip to content

docs(templates): update links #5466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Lukas742 merged 2 commits into from
Feb 5, 2024
Merged

docs(templates): update links #5466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c45511
docs(templates): update links
Lukas742 Feb 5, 2024
47a8d20
Merge branch 'main' into docs/templates-link
Lukas742 Feb 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,9 @@ In about an hour you will create a business dashboard from scratch and get famil
[Here](https://www.youtube.com/watch?v=zyOxgjoSnGw) you can find the video of our session for the SAP Devtoberfest 2023 (aired Sep 29, 2023). There we briefly explain why UI5 Web Components for React exist at all, where the project fits into the SAP UI stack and what advantages our wrapper has over implementations that use pure ui5-webcomponents.
For the main part, we show how you could create a simple Movie Database UI, first by using our `Vite` template and then with our `Next.js` template.

### Create a new React app using our Templates
### Examples & Templates

You can find a curated list of project templates on our [Project Templates page](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/project-templates--docs).
You can find a curated list of project templates and examples on our [Project Templates & Examples page](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/project-templates-examples--docs).

### Add `@ui5/webcomponents-react` to an existing app

Expand Down
4 changes: 2 additions & 2 deletions docs/Welcome.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ Then take a look at our [Tutorial Mission](https://developers.sap.com/mission.re
There you get a first glimpse at how easy it is to create an Application with UI5 Web Components for React.<br />
In about an hour you will create a business dashboard from scratch and get familiar with some React basics in case you don't know them already.

### Templates
### Examples & Templates

You can find a curated list of project templates on our [Project Templates page](?path=/docs/project-templates--docs).
You can find a curated list of project templates and examples on our [Project Templates & Examples page](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/project-templates-examples--docs).

### Add `@ui5/webcomponents-react` to an existing app

Expand Down
6 changes: 3 additions & 3 deletions docs/knowledge-base/ServerSideRendering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ We're happy to announce that starting from **v1.17.0**, UI5 Web Components for R

### Create a new project

The best way to start using UI5 Web Components in Next.js is using one of our [templates](https://sap.github.io/ui5-webcomponents-react/?path=/docs/project-templates--docs).
The best way to start using UI5 Web Components in Next.js is using one of our [templates](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/project-templates-examples--docs#templates).
We have templates available for both the pages and the app router.

### Add to existing project
Expand All @@ -29,13 +29,13 @@ In case you already have an existing Next.js project and want to add UI5 Web Com
As UI5 Web Components for React is using `react-jss` internally, you need to apply some changes to your `_app` and `_document` file (in case you are using the pages router).
You can copy these changes either from the official [next.js-react-jss example](https://github.com/vercel/next.js/tree/canary/examples/with-react-jss) or from our [pages router template](https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-pages).

In case you are already using the app router, you can copy the `react-jss` setup from the `app/CssRegistry.tsx` in our [app router template](https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-app). Make sure to add this component to your root layout!
In case you are already using the app router, you can copy the `react-jss` setup from the `app/CssRegistry.tsx` in our [app router template](https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-app). Make sure to add this component to your root layout!

### Common Pitfalls

#### Icon and Feature Imports in Server Components

Some UI5 Web Component features rely on the registration of a component during runtime on the client.
Some UI5 Web Component features rely on the registration of a component during runtime on the client.
The most common of these are icon imports (e.g. `import '@ui5/webcomponents-icons/dist/add.js';`), feature imports (e.g. `import '@ui5/webcomponents/dist/features/FormSupport.js';` and asset imports (e.g. `import '@ui5/webcomponents-react/dist/Assets.js';`).

In order to fulfill their purpose in your application, you must ensure that these imports are only used in client components (the file or a parent component must contain the `'use client';` directive).
Expand Down