Skip to content

Commit b96151b

Browse files
authored
fix: change ui5 tooling to ui5 cli (#168)
1 parent 072a4f2 commit b96151b

File tree

7 files changed

+30
-30
lines changed

7 files changed

+30
-30
lines changed

steps/01/README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Step 1: Hello World!
22

3-
As you know, OpenUI5 is all about HTML5. Let's get started with building a first "Hello World" with only HTML. In addition we'll initialize the UI5 Tooling, so we can benefit from it from the beginning.
3+
As you know, OpenUI5 is all about HTML5. Let's get started with building a first "Hello World" with only HTML. In addition we'll initialize the UI5 CLI, so we can benefit from it from the beginning.
44

55
 
66

@@ -68,7 +68,7 @@ In our webapp folder, we create a new HTML file named `index.html` and copy the
6868

6969
### webapp/manifest.json \(New\)
7070

71-
The manifest serves as a crucial configuration file for applications, components, and libraries. For applications, the manifest file is stored in the `webapp` folder and is read by OpenUI5 to instantiate a component. Although we haven't created a component yet (which is part of [Step 9: Component Configuration](../09/README.md)), creating the manifest now is necessary due to the UI5 Tooling requirements for development.
71+
The manifest serves as a crucial configuration file for applications, components, and libraries. For applications, the manifest file is stored in the `webapp` folder and is read by OpenUI5 to instantiate a component. Although we haven't created a component yet (which is part of [Step 9: Component Configuration](../09/README.md)), creating the manifest now is necessary due to the UI5 CLI requirements for development.
7272

7373
Let's start by creating a new file named `manifest.json` in the webapp folder and define its essential attributes:
7474

@@ -113,9 +113,9 @@ Since we want our app to support not only the latest OpenUI5 version but rather
113113
114114
***
115115

116-
### UI5 Tooling
116+
### Development Environment
117117

118-
The following steps are tailored for using this project with [UI5 Tooling](https://sap.github.io/ui5-tooling/stable/pages/CLI/#local-vs-global-installation).
118+
The following steps are tailored for using this project with [UI5 CLI](https://ui5.github.io/cli/stable/pages/CLI/#local-vs-global-installation).
119119

120120
***
121121

@@ -144,13 +144,13 @@ Next, we install the UI5 CLI and add it as development dependency to our project
144144
npm install --save-dev @ui5/cli
145145
```
146146

147-
Finally, we initialize the UI5 Tooling configuration for our project by executing the following command on the app root folder:
147+
Finally, we initialize the UI5 CLI configuration for our project by executing the following command on the app root folder:
148148

149149
```sh
150150
ui5 init
151151
```
152152

153-
This will generate a `ui5.yaml` file in the app root directory, which is essential for using UI5 Tooling with our project.
153+
This will generate a `ui5.yaml` file in the app root directory, which is essential for using UI5 CLI with our project.
154154
 
155155

156156
To start the web server, execute the following command:
@@ -185,4 +185,4 @@ This will open a new browser window hosting your newly created `index.html`.
185185

186186
[App Development](https://sdk.openui5.org/topic/b1fbe1a22f8d4a5bbb601591e27b68d1 "There are several ways to develop OpenUI5 applications. Select the one that meets the requirements of your projects and your expectations best.")
187187

188-
[UI5 Tooling: Getting Started](https://sap.github.io/ui5-tooling/stable/pages/GettingStarted/)
188+
[UI5 CLI: Getting Started](https://ui5.github.io/cli/stable/pages/GettingStarted/)

steps/02/README.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,23 @@ You can download the solution for this step here: [📥 Download step 2](https:/
3131
</details>
3232
***
3333

34-
### UI5 Tooling
34+
### Development Environment
3535

36-
First, let's set up our UI5 Tooling to use the OpenUI5 framework for our project. We also need to add the necessary OpenUI5 libraries as dependencies to the project's UI5 Tooling configuration.
36+
First, let's set up our UI5 CLI to use the OpenUI5 framework for our project. We also need to add the necessary OpenUI5 libraries as dependencies to the project's UI5 CLI configuration.
3737

3838
We open a terminal in the root folder of our app and execute the following command:
3939

4040
```sh
4141
ui5 use OpenUI5
4242
```
4343

44-
This command tells the UI5 Tooling to use the OpenUI5 framework to build and run the application. Next, we configure some runtime dependencies by executing the following command:
44+
This command tells the UI5 CLI to use the OpenUI5 framework to build and run the application. Next, we configure some runtime dependencies by executing the following command:
4545

4646
```sh
4747
ui5 add sap.ui.core themelib_sap_horizon
4848
```
4949

50-
The `ui5 add` command adds specific libraries as dependency to the projects UI5 Tooling configuration. In this case, we'e adding the `sap.ui.core` library, which provides core functionality of the OpenUI5 framework. This library is essential for bootstrapping OpenUI5. Additionally, we're adding the `themelib_sap_horizon` library which provides the visual styles for the Horizon theme. We'll use this theme with our application.
50+
The `ui5 add` command adds specific libraries as dependency to the projects UI5 CLI configuration. In this case, we'e adding the `sap.ui.core` library, which provides core functionality of the OpenUI5 framework. This library is essential for bootstrapping OpenUI5. Additionally, we're adding the `themelib_sap_horizon` library which provides the visual styles for the Horizon theme. We'll use this theme with our application.
5151

5252

5353
<details class="ts-only">
@@ -174,7 +174,7 @@ We initialize the core modules with the following configuration options:
174174
175175
***
176176

177-
### UI5 Tooling
177+
### Development Environment
178178

179179
Let's enhance our tooling setup once again by installing some custom middleware for the ui5-server. This will help us handle our development project more efficiently.
180180

@@ -198,19 +198,19 @@ When you run the command, npm will download the specified packages from the npm
198198

199199
Let's break down what each package does:
200200

201-
- `ui5-middleware-livereload` is a middleware plugin for the UI5 Tooling that enables live reloading of your application in the browser. Live-reloading means that whenever you make changes to your code, the browser automatically refreshes and displays the updated version without requiring manual refreshes (e.g. upon *Save*).
201+
- `ui5-middleware-livereload` is a middleware plugin for the UI5 CLI that enables live reloading of your application in the browser. Live-reloading means that whenever you make changes to your code, the browser automatically refreshes and displays the updated version without requiring manual refreshes (e.g. upon *Save*).
202202

203-
- `ui5-middleware-serveframework` is another middleware plugin for the UI5 Tooling that provides a web server to serve your OpenUI5 project during development. It allows you to easily serve the necessary OpenUI5 libraries and resources required by your application from your development environment.
203+
- `ui5-middleware-serveframework` is another middleware plugin for the UI5 CLI that provides a web server to serve your OpenUI5 project during development. It allows you to easily serve the necessary OpenUI5 libraries and resources required by your application from your development environment.
204204

205205
<details class="ts-only">
206206

207-
- `ui5-tooling-transpile` is a plugin for the UI5 Tooling that transpiles modern JavaScript (ES6+) and TypeScript into a compatible version for OpenUI5. OpenUI5 is based on older versions of JavaScript, so this plugin allows you to take advantage of the latest language features and syntax while ensuring that your code remains compatible with OpenUI5.
207+
- `ui5-tooling-transpile` is a plugin for the UI5 CLI that transpiles modern JavaScript (ES6+) and TypeScript into a compatible version for OpenUI5. OpenUI5 is based on older versions of JavaScript, so this plugin allows you to take advantage of the latest language features and syntax while ensuring that your code remains compatible with OpenUI5.
208208

209209
</details>
210210

211211
### ui5.yaml
212212

213-
Next, we have to configure the tooling extension we installed from npm to our UI5 Tooling setup, so we can use them in our project. To hook a custom task into a certain build phase of a project, it needs to reference another task that will get executed before or after it. The same applies for a custom middleware:
213+
Next, we have to configure the tooling extension we installed from npm to our UI5 CLI setup, so we can use them in our project. To hook a custom task into a certain build phase of a project, it needs to reference another task that will get executed before or after it. The same applies for a custom middleware:
214214
<details class="ts-only">
215215

216216
- For the `ui5-tooling-transpile-task` we specify that this should happen after the`replaceVersion` task.
@@ -279,13 +279,13 @@ Now you can benefit from live reload on changes and built framework resources at
279279

280280
**Next:** [Step 3: Controls](../03/README.md "Now it's time to build our first little UI by replacing the Hello World text in the HTML body by the OpenUI5 control sap.m.Text. In the beginning, we will use the TypeScript control API to set up the UI, the control instance is then placed into the HTML body‚")
281281

282-
**Previous:** [Step 1: Hello World!](../01/README.md "As you know OpenUI5 is all about HTML5. Let's get started with building a first Hello World with only HTML. In addition we will initialize the UI5 Tooling, so we can benefit from it from the beginning.")
282+
**Previous:** [Step 1: Hello World!](../01/README.md "As you know OpenUI5 is all about HTML5. Let's get started with building a first Hello World with only HTML. In addition we will initialize the UI5 CLI, so we can benefit from it from the beginning.")
283283

284284
***
285285

286286
**Related Information**
287287

288-
[UI5 Tooling: Consuming OpenUI5 Libaries](https://sap.github.io/ui5-tooling/v3/pages/OpenUI5/)
288+
[UI5 CLI: Consuming OpenUI5 Libaries](https://ui5.github.io/cli/stable/pages/OpenUI5/)
289289

290290
[SAP Fiori with Horizon](https://experience.sap.com/fiori-design-web/sap-fiori/#sap-fiori-with-horizon)
291291

@@ -301,6 +301,6 @@ Now you can benefit from live reload on changes and built framework resources at
301301

302302
[NPM Package: `ui5-tooling-transpile`](https://www.npmjs.com/package/ui5-tooling-transpile)
303303

304-
[UI5 Tooling: Custom Tasks](https://sap.github.io/ui5-tooling/v3/pages/extensibility/CustomTasks/)
304+
[UI5 CLI: Custom Tasks](https://ui5.github.io/cli/stable/pages/extensibility/CustomTasks/)
305305

306-
[UI5 Tooling: Custom Server Middleware](https://sap.github.io/ui5-tooling/v3/pages/extensibility/CustomServerMiddleware/)
306+
[UI5 CLI: Custom Server Middleware](https://ui5.github.io/cli/stable/pages/extensibility/CustomServerMiddleware/)

steps/03/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ You can download the solution for this step here: [📥 Download step 3](https:/
3232

3333
<details class="ts-only">
3434

35-
### UI5 Tooling
35+
### Development Environment
3636

3737
To get the type definitions for OpenUI5, we need to install them to our project. We open a terminal in the root folder of our app and exectue the following command:
3838

@@ -128,9 +128,9 @@ In the example above, the callback of the `on-init` event is where we now instan
128128
***
129129

130130

131-
### UI5 Tooling
131+
### Development Environment
132132

133-
As we now use the `sap.m` library with our app, we need to add the dependency to this library to our UI5 Tooling setup.
133+
As we now use the `sap.m` library with our app, we need to add the dependency to this library to our UI5 CLI setup.
134134

135135
We open a terminal in the root folder of our app and exectue the following command:
136136

steps/10/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ helloMsg=Hello {0}
5151

5252
### webapp/manifest.json
5353

54-
As mentioned in [Step 1](../01/README.md#webappmanifestjson-new), the manifest is used by OpenUI5 to instantiate the component. We have already configured the essential attributes of the file so that it can be used with the UI5 Tooling. Now, we'll add further attributes that are important for creating a proper UI component in OpenUI5.
54+
As mentioned in [Step 1](../01/README.md#webappmanifestjson-new), the manifest is used by OpenUI5 to instantiate the component. We have already configured the essential attributes of the file so that it can be used with the UI5 CLI. Now, we'll add further attributes that are important for creating a proper UI component in OpenUI5.
5555

5656
We enhance the **`sap.app`** namespace by adding configuration for the following application-specific attributes:
5757

steps/25/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ You can download the solution for this step here: [📥 Download step 25](https:
3535
</details>
3636
***
3737

38-
### UI5 Tooling
38+
### Development Environment
3939

40-
In this step, we want to use the publicly available Northwind OData service located at `https://services.odata.org/V2/Northwind/Northwind.svc/`. Therefore, our URI points to the official Northwind OData service. In order to avoid cross-origin resource sharing, the typical procedure is to use a proxy in UI5 Tooling and maintain only a path in the `URI` property of the data source of our app.
40+
In this step, we want to use the publicly available Northwind OData service located at `https://services.odata.org/V2/Northwind/Northwind.svc/`. Therefore, our URI points to the official Northwind OData service. In order to avoid cross-origin resource sharing, the typical procedure is to use a proxy in UI5 CLI and maintain only a path in the `URI` property of the data source of our app.
4141

42-
A bunch of proxy solutions are available from the UI5 community as [UI5 Tooling custom middleware extensions](https://bestofui5.org/#/packages?tokens=proxy:tag).
42+
A bunch of proxy solutions are available from the UI5 community as [UI5 CLI custom middleware extensions](https://bestofui5.org/#/packages?tokens=proxy:tag).
4343

4444
In this tutorial we'll use [ui5-middleware-simpleproxy](https://bestofui5.org/#/packages/ui5-middleware-simpleproxy).
4545

@@ -51,7 +51,7 @@ Open a new terminal window in your app root folder and execute `npm i -D ui5-mid
5151

5252
### ui5.yaml
5353

54-
We now configure the `ui5-middleware-simpleproxy` in the `ui5.yaml` file, so the proxy is used with the UI5 Tooling when serving the app.
54+
We now configure the `ui5-middleware-simpleproxy` in the `ui5.yaml` file, so the proxy is used with the UI5 CLI when serving the app.
5555

5656
We schedule the simpleproxy middleware after the `compression` middleware, right after the livereload middleware. The `mountPath` property configures which URLs will be caught by the proxy. The `configuration/baseUri` property stores the real server address.
5757

steps/26/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,7 @@ This approach is perfect for local testing, even without any network connection.
279279

280280
From this point on, we have two different entry pages: One for the real “connected” app \(`index.html`\) and one for local testing \(`test/mockServer.html`\). You can freely decide if you want to do the next steps on the real service data or on the local data within the app. Try calling the app with the `index.html` file and the `mockServer.html` file to see the difference. If the real service connection cannot be made, for example when there is no network connection, you can always fall back to the local test page.
281281

282-
### UI5 Tooling
282+
### Development Environment
283283

284284
### package.json (optional)
285285

steps/38/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,4 @@ You've completed the walkthrough, good job! You should now be familiar with all
9898

9999
**Related Information**
100100

101-
[UI5 Tooling documentation](https://sap.github.io/ui5-tooling/stable/)
101+
[UI5 CLI documentation](https://ui5.github.io/cli/stable/)

0 commit comments

Comments
 (0)