|
1 | 1 | # Getting Started |
2 | 2 | ## Installing the UI5 CLI |
3 | | -### Requirements |
4 | | -- [Node.js](https://nodejs.org/) version v20.11.0 and higher or v22.0.0 and higher (v21 is not supported) |
5 | | -- [npm](https://www.npmjs.com/) version v8.0.0 or higher |
6 | | - |
7 | | -### Installation |
8 | | -```sh |
9 | | -# Global installation to have the command available |
10 | | -npm install --global @ui5/cli |
11 | | - |
12 | | -# Additional local install in your project |
13 | | -npm install --save-dev @ui5/cli |
14 | | - |
15 | | -# Verify installation |
16 | | -ui5 --help |
17 | | -``` |
18 | | - |
19 | | -The globally installed UI5 CLI will always try to invoke a locally installed version of the UI5 CLI (if present). This way you can use different versions of the UI5 CLI across your projects. Please see the [UI5 CLI documentation](./CLI#local-vs-global-installation) for details. |
20 | | - |
21 | | -## ⚡️ Quick Start: OpenUI5 Sample App |
22 | | -Check out the [OpenUI5 Sample App](https://github.com/SAP/openui5-sample-app) featuring a full blown [How-to](https://github.com/SAP/openui5-sample-app/#openui5-sample-app) to play around with UI5 CLI! |
23 | | - |
24 | | -## Starting a New Project |
25 | | -The easiest way to start a new UI5 project is to use a template generator like [**generator-easy-ui5**](https://github.com/SAP/generator-easy-ui5). |
26 | | - |
27 | | -Choose a template that is designed for the type of project you want to create and the target environment where you want to deploy it to. |
28 | | -Make sure that the template already uses UI5 CLI. A good indicator for that is the presence of a `ui5.yaml` file in the generated project. |
29 | | - |
30 | | -When working with SAP Business Application Studio, there are several templates available to you. Check out the tutorial on creating a basic SAPUI5 application and deploying it to Cloud Foundry from within SAP Business Application Studio: [Create an SAP Fiori App Using SAP Business Application Studio](https://developers.sap.com/tutorials/appstudio-fioriapps-create.html) |
31 | | - |
32 | | -You can find many guides on UI5 development with SAP Business Application Studio in the [Tutorial Navigator](https://developers.sap.com/tutorial-navigator.html?tag=topic:sapui5&tag=products:technology-platform/sap-business-application-studio). |
33 | | - |
34 | | -## Enabling an Existing Project |
35 | | -You can easily check whether or not a project (application or library) can already be used with the UI5 CLI by looking for a `ui5.yaml` file in the project's root directory. |
36 | | -This file (with some exceptions) is required for all projects and their dependencies (e.g. reuse libraries) to use them in the UI5 CLI. |
37 | | - |
38 | | -### Setup |
39 | | -If your project is not set up for use with the UI5 CLI yet, follow these steps: |
40 | | - |
41 | 3 | 1. If your project does not have a `package.json` file, let npm generate it: |
42 | | -```sh |
43 | | -npm init --yes |
44 | | -``` |
| 4 | + ```sh |
| 5 | + npm init --yes |
| 6 | + ``` |
45 | 7 |
|
46 | 8 | 1. Generate the `ui5.yaml` file: |
47 | | -```sh |
48 | | -ui5 init |
49 | | -``` |
| 9 | + ```sh |
| 10 | + ui5 init |
| 11 | + ``` |
50 | 12 |
|
51 | 13 | 1. Define the framework you want to use |
52 | | -::: info |
53 | | -**"OpenUI5"** |
| 14 | + ::: info |
| 15 | + **"OpenUI5"** |
54 | 16 |
|
55 | | -```sh |
56 | | -ui5 use openui5@latest |
57 | | -``` |
| 17 | + ```sh |
| 18 | + ui5 use openui5@latest |
| 19 | + ``` |
58 | 20 |
|
59 | | -**"SAPUI5"** |
| 21 | + **"SAPUI5"** |
60 | 22 |
|
61 | | -```sh |
62 | | -ui5 use sapui5@latest |
63 | | -``` |
64 | | -::: |
65 | | -You can choose between the OpenUI5 and the SAPUI5 framework. |
| 23 | + ```sh |
| 24 | + ui5 use sapui5@latest |
| 25 | + ``` |
| 26 | + ::: |
| 27 | + You can choose between the OpenUI5 and the SAPUI5 framework. |
66 | 28 |
|
67 | | -Don't know which one to choose? Check out our [documentation on the differences between OpenUI5 and SAPUI5](./FAQ#what-s-the-difference-between-openui5-and-sapui5). |
| 29 | + Don't know which one to choose? Check out our [documentation on the differences between OpenUI5 and SAPUI5](./FAQ##whats-the-difference-between-openui5-and-sapui5). |
68 | 30 |
|
69 | 31 | 1. Add required libraries |
70 | | -```sh |
71 | | -ui5 add sap.ui.core sap.m sap.ui.table themelib_sap_fiori_3 # [...] |
72 | | -``` |
| 32 | + ```sh |
| 33 | + ui5 add sap.ui.core sap.m sap.ui.table themelib_sap_fiori_3 # [...] |
| 34 | + ``` |
| 35 | + |
| 36 | + You can find a documentation of all libraries, including samples and more, in the Demo Kit: |
73 | 37 |
|
74 | | -You can find a documentation of all libraries, including samples and more, in the Demo Kit: |
| 38 | + - [**OpenUI5** Demo Kit](https://openui5.hana.ondemand.com/api) |
| 39 | + - [**SAPUI5** Demo Kit](https://ui5.sap.com/#/api) |
75 | 40 |
|
76 | | -- [**OpenUI5** Demo Kit](https://openui5.hana.ondemand.com/api) |
77 | | -- [**SAPUI5** Demo Kit](https://ui5.sap.com/#/api) |
78 | | - |
79 | 41 | 1. Start the server and work on your project! 🎉 |
80 | | -```sh |
81 | | -ui5 serve |
82 | | -``` |
| 42 | + ```sh |
| 43 | + ui5 serve |
| 44 | + ``` |
83 | 45 |
|
84 | | -::: info |
85 | | -Use `ui5 serve` to start a local development server and `ui5 build --all` to produce an optimized, static version of your project, which you can then deploy to your production environment. |
86 | | - ::: |
| 46 | + ::: info |
| 47 | + Use `ui5 serve` to start a local development server and `ui5 build --all` to produce an optimized, static version of your project, which you can then deploy to your production environment. |
| 48 | + ::: |
87 | 49 |
|
88 | | -Find more information here: |
| 50 | + Find more information here: |
89 | 51 |
|
90 | | -- [Server](./Server.md) |
91 | | -- [Builder](./Builder.md) |
92 | | -- [CLI](./CLI.md) |
| 52 | + - [Server](./Server.md) |
| 53 | + - [Builder](./Builder.md) |
| 54 | + - [CLI](./CLI.md) |
93 | 55 |
|
94 | 56 | 1. If you are using Git or similar version control, commit `package.json` and `ui5.yaml` to your repository. |
95 | | -```sh |
96 | | -git add package.json ui5.yaml |
97 | | -git commit -m "Enable use with UI5 CLI" |
98 | | -``` |
| 57 | + ```sh |
| 58 | + git add package.json ui5.yaml |
| 59 | + git commit -m "Enable use with UI5 CLI" |
| 60 | + ``` |
99 | 61 |
|
100 | 62 | **🎉 Hooray! You can now use UI5 CLI in your project! 🎉** |
0 commit comments