18.Apr.18

Milan Nankov

Milan Nankov

Developing SAPUI5 Applications with Visual Studio Code

Continuing our series of articles on UI5, I am going to present an alternative to using Web IDE for developing UI5 applications.

I think that Web IDE is fabulous tool for building UI5 apps but as with most tools it has its drawbacks and limitations. We as developers crave using our own tools to be as effective as possible. Also, if we are cornered into using a foreign tool we feel frustrated. Luckily as of last year we can run the full SAPUI5 run time on our local machines which means that we can pretty much use our favorite tools to develop apps. Let's see how.

Getting the source code

I have prepared a very simple app which will allow me to demonstrate the whole process of enabling local development of UI5 applications. The application source is available on GitHub - https://github.com/newventuresoftware/sapui5-vscode.

You could either download the code as a zip by using the "Clone or download button" or clone the repository to your machine.

The demo application was created using Web IDE and the following steps will allow us to run it on our local machines. 

Installing dependencies - Node.js NPM

We are going to need some additional tools in order to be able to run SAPUI5 apps locally. There are various ways to obtain and use those tools but the most common and sustainable one is to use a package manager. Package managers provide automated dependency and package management.

If you are new to package managers feel free to check out this introductory article but in a nutshell package managers allow us to easily install tools and libraries that are required by our applications. NPM is the default package manager for the JavaScript runtime environment Node.js and one of the most popular package managers available.

Installing Node.js

Npm is written in Node.js, so you need to install Node.js first. You can install npm via the Node.js website - https://nodejs.org. More in-depth instructions are available here.

Installing dependencies

Once Node.js and npm are installed, we need to add a couple of dependencies or tools that will do the heavy lifting for us and enable running the app locally. 

To install the dependencies open a console and navigate to the 01-app-initial of the provided source code. There run the following commands:

  • npm init
  • npm install grunt grunt-contrib-clean grunt-contrib-connect grunt-contrib-copy grunt-openui5 --save-dev
The first command will ask you for a couple of values but the default values provided are just fine. This process will create a file called package.json which among other things will contain a list of dependencies that are used by our app. 

The second command will actually install those dependencies.

We also need to add some commands to package.json which will be used to run our application. Here is how your package.json file should look like:

Please make sure to include the "scripts" configuration in your version.

Downloading SAPUI5 Runtime / SAPUI5 SDK

The SAPUI5 runtime contains everything needed to create and run SAPUI5 apps. When you are deploying and creating apps with Web IDE this runtime is automatically provided to your application.

When we want to work offline/locally we need to download the SDK and make some adjustments so that our app can use the runtime. 

The SAPUI5 runtime is available on the SAP Development Tools page, more specifically - https://tools.hana.ondemand.com/#sapui5 . Keep in mind that the use of this runtime is subject to the SAP DEVELOPER LICENSE AGREEMENT.

Near the end of the page you should be able to find a list of all available downloads. Let's go for the latest SDK available, for instance - 1.52.8.

List of SAPUI5 downloads
Once downloaded, extract the SDK to sdk/sapui5-sdk-1.52.8/ in the root folder of the app.

Using Grunt

The final very important step is to add Grunt to the equation. 

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. If you would like to learn more about Grunt please feel free to check it out here

Usually web application cannot be simply executed. Usually this a process which involves building the app, running a web server that will serve the app, and in the case of UI5, hooking up the app to the SAPUI5 runtime.

This is where Grunt comes in - it will allow us to define tasks for running, building, and deploying our app.

To procceed, please add a file called Gruntfile.js to the root of our app. Here is how the file should look like:

This can look a bit scary but it isn't. Trust me.
This file defines all of the Grunt tasks that we can run. For now the most important one is called serve - it will build  and run our application but before we actually do that, let's explore the file a bit.

At the top of the file there is this line - grunt.initConfig({ .
This is where various configuration settings are specified and we are now going to mention the interesting ones.

connect - This is where the web server is configured. For example, 8080 port will be used.
openui5_connect - This is an important configuration which provides the path to the SAPUI5 sdk/runtime. Please make sure that this path is correct and it does point to the correct folder. This is where we also specify the root of our UI5 app which is webapp as expected.

There are a lot of configuration options for UI5 and you could take a look the official Github page of grunt-openui5 for in-depth information.

openui5_preload - This configures the preload step of the build process.

We are now ready to run our app.

Running the app

At this point the app folder structure should look like this:
UI5 Folder structure
If everything is configured correctly we should be able to start the app.
To do that execute npm run start.
If all is well, you should see a message that the web server is running on http://localhost:8080. Navigate to this url and confirm that the app is indeed running. 

Running UI5 app

Using Visual Studio Code

We now have a runnable app. As you might have guessed, you can pretty much use any IDE or editor to develop SAPUI5 apps on your local development environment. The setup that we have use is applicable to pretty much any dev environment and tools. My IDE of choice though is Visual Studio Code and I encourage you to give it a try.

What I love about VS Code is the ecosystem which is evolving every single day. You can find various extensions/plugins to help you build applications faster. For example, you can try our UI5 Snippets & Extensions for Visual Studio Code which introduces smart UI5 snippets to VS Code.

If you are new to Visual Studio Code (VS Code), here is how you can get started quickly. 

Opening the project

When working with VS Code we usually open the root folder of our project, then launch our app, and finally start working on a new feature or whatnot. To open a project to go File -> Open Folder and then choose the app folder. Here I am using the second app available (02-app-running-locally) in the Github repository - it is our initial app with all configurations applied.

VS Code Openning UI5 Project

Running the project

To start our app we can utilize the built in terminal window of VS Code. Choose View -> Integrated Terminal, and then type npm run start. Once you get a confirmation that the web server is up and running you can go ahead and launch a browser to view the app.

Running App with VS Code
The project is now up and any modifications you do will be reflected in the browser by simply refreshing it. The best part is that refreshing the app when running locally on you own machine will be many time faster as compared to working with Web IDE.

Next Steps

We have come a long way but more work needs to be done if we want to work on more complex UI5 application where backend services are involved. Next time we will have a swing at developing application that use OData to create and query data.

In case you have hit some sort of a roadblock do not hesitate to leave a comment or checkout the finished application that includes all configurations mentioned here - https://github.com/newventuresoftware/sapui5-vscode/tree/master/02-app-running-locally

Cheers

Need consulting on this topic?

Yes No