Skip to Content

I recently had to rebuild my laptop and one of the first things I did was to install Node.js and have it statically serve my UI5 SDKs, I thought I would share how easy it is to setup.

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications”. Node.js has an easy to use command line utility npm for managing the JavaScript dependencies in your applications, npm can also be used for loading one of the many Node.js applications from the npm (Node Packaged Module) registry.  Besides using Node.js as an application platform it provides many tools to aid UI5 development, I use node hosted apps inside of Sublime Text for formatting and checking (linting) my code and use gruntjs for automating a lot of the repetitive test, build and deploy tasks, I even use generator-openui5 to create my UI5 mobile projects, views and controllers.

Start at the end

C:\sapui5\sdk is where i store the various UI5 SDK versions, also in that folder i have a JavaScript file static_server.js which has simple code to create a node server and publish the content within the directory

sapui5_sdk_folder.PNG

To run the server open up a windows command line window, <shift> <right click> on folder -> “Open command window here” then enter


node static_server

This command starts the server and opens up the default browser with directory listing

sapui5_sdk_directory.PNG

from here you can choose to run the SDK

sapui5_latest.PNG

or browse the directory and easily navigate and view the debug files in the browser

debug_example.PNG

The code

static_server.js – put this file in the directory


var express = require('express'),
  open = require('open');
  app = express(),
  port = process.env.PORT || 8888,
  sapui5 = '/sapui5'
  url = 'http://localhost:' + port + sapui5,
  year = 60 * 60 * 24 * 365 * 1000;
// Use compress middleware to gzip content
app.use(express.compress());
//set default mime type to xml for ".library" files
express.static.mime.default_type = "text/xml";
// Serve up content directory showing hidden (leading dot) files
app.use(sapui5,express.static(__dirname, { maxAge: year, hidden: true }));
// enable directory listening
app.use(sapui5,express.directory(__dirname));
app.listen(port);
open(url); //open in default browser
console.log("Static file server running at\n  => " + url + " \nCTRL + C to shutdown")

In the above code expressjs a lightweight app framework creates compressed and cache-controlled content with directory listing and serves it at http://localhost:<port>/sapui5 , the open module opens the default browser application.

Installation

Installing Nodejs is very simple – goto nodejs.org and click on “Install”,  the default installation has enough to get started.

Once you have Node.js installed open a command prompt in the directory where the SDK is located, then use npm to install expressjs and node open

/wp-content/uploads/2014/01/npm_install_356346.png

this will load the module into the node_modules directory and do the same for open


npm install open

the preferred alternative to manually installing would be to create a package.json file in the directory and define the dependencies


{
  "dependencies" : {
    "express" : "3.x",
    "open" : "0.0.x"
  }

then run  “npm install” from the command line.

Once the dependencies are installed you should now be able to run the server


node static_server

Enjoy πŸ™‚

To report this post you need to login first.

59 Comments

You must be Logged on to comment or reply to a post.

    1. John Patterson Post author

      Hi Gregor

      I agree.


      tbh using express in this scenario probably saves me 1 line of code, directory, static, compress are all from the connect middleware.

      more blogs to come on the subject of automation, not just from me but hopefully from others

      jsp

      (0) 
  1. DJ Adams

    Thanks JSP, nice post. I really enjoy reading alternative solutions, and it looks like you’re doing a lot of the things I want to investigate (using node/npm/grunt more). I use Apache and Sublime Text, which I’m very happy with (and SublimeUI5 of course) but I can see myself spinning up a little node-powered server instead.

    I’m still not convince by Yeoman (and therefore haven’t got to the generators by Sacha yet) … I’ve had nothing but bad experiences so far (5+ mins to generate a simple web app, no obvious way to generate a new app when you’re offline, and tens of megabytes of dependencies each time). I really hope I’m doing something fundamentally wrong. But, again today, I digress.

    Thanks for sharing

    dj

    (0) 
    1. John Patterson Post author

      cheers

      wrt to Yeoman, like you i do a lot of work on trains and planes so offline is a real requirement.

      Run 1: a clean pc with only node installed ran saschakiefer/generator-openui5 took approx 3 minutes from install to project creation. – nb not sure if generator requires full Yeoman in the past that took a long time to load and noticed a lot of the dependencies i would never use.

      Run 2: I ran the next project offline, watching the folder structure I saw the app was created in a couple of seconds, if i hadnt turned the wifi back on it would probably be still trying to get the dependencies,

      Run 3: even with the dependencies in the global node_modules directory it didnt help

      Run 4: pre-loading the local node_modules directory and it flies!!

      Offline is achievable with a workaround and maybe it can be configured not to check for latest versions of the dependencies online and to use the global directory.

      Hadn’t used the ui5 generator for a while and was pleasantly suprised to see more options and a mock models and xml views in the application, (what happened to the test folder?)

      Why the bloat? In the case of the openui5 generator it doesn’t just scaffold a fiori or classical style application, the project comes with a gruntjs server configured with watch, qunit and jshint tasks – very cool stuff

      I would definitely recommend you give it a try, i dont think it competes with the SublimeUI5, I could take or leave the application content creation, its the scaffolding of the project thats the real time saver.

      jsp

      (0) 
      1. DJ Adams

        Thanks JSP for the detailed reply!

        I will definitely give it a try, I really want to like Yeoman and benefit from the functionality that others enjoy. And of course get to use Sascha’s stuff.

        Over the course of the next few weeks I’ll persevere and report back.

        cheers

        dj

        (0) 
      2. Jason Scott

        I agree with you there John; an offline mode would be great. It is annoying waiting for all the node dependancies each time. But then…Generally you’d run the yeoman generator once and then take it from there manually. So its not like you’d be running it over an over for each app.

        Now… do i use SublimeUI5 or the Yeoman generator – that is the question. Yeoman does give the extra build stuff. Still need to do some more work there as well though – early days.  πŸ˜‰

        (0) 
        1. John Patterson Post author

          Hopefully in time we will see something like Bower managing UI5 dependencies, package components can be made up of any type of asset, html, js, css, xml etc, meaning you could source the base app from lots of different sources.

          jsp

          (0) 
  2. Kannan Kumar

    Hi John,


    Thanks for this detailed post.

    Being new to UI5, this has been of great help. I was looking for a way to statically serve the UI5 SDKs on my machine. This allows me to work offline without compromising on the DemoKit experience.

    A similar post with the SublimeText + gruntjs + genertor-openui5 setup and your workflow that you talked about would be really helpful for many people starting out with UI5 development.  πŸ™‚

    Thanks,

    Kannan

    (0) 
      1. Kannan Kumar

        Hey DJ,

        Thanks for the alternative Guide. Found not one, but TWO alternative guides in one day. It must be my lucky day.

        I totally agree with “you can never have too many getting started guides“.

        IMHO  now that UI5 is open, these alternative guides will help attract more non-SAP developers towards UI5, many of whom will have certain favorite tools they work with.

        Thanks,

        KPK

        (0) 
      1. Kannan Kumar

        Hi John,

        Thanks for the quick post wrt my request.

        I got the Sublime environment up and running really quick thanks to the detailed post.

        Cheers,

        KPK

        (0) 
    1. Sascha Kiefer

      Hi Kannan,

      even though I don’t have a complete guide. The pure usage of the generator-openui5 is straight forward. If you start from the scratch without yeoman installed it’s just:

      npm install -g yo

      npm install -g generator-openui5

      yo openui5

      (assuming you have node installed).

      For details you can always check: https://github.com/saschakiefer/generator-openui5

      We’re also working on a blog post about the generator, where we might put in a few setup tasks and also some information about the generated grunt tasks.

      /Sascha

      (0) 
  3. HP Seitz

    Fantastic John,

    this is the missing peace to replace Eclipse + Tomcat with Sublime + Nodejs. I got it up and running within 2 minutes on my Mac (node already installed of course).

    I used the “static” variant of the sapui5 distribution (“sapui5-dist-static.zip”) to be served.

    Thx, HP

    (0) 
    1. DJ Adams

      The more we can encourage people to see that there are very pleasant and productive alternatives to the heavy tyranny of Eclipse, the better.

      That was a tongue in cheek statement, but there’s some truth behind it too.

      dj   

      (0) 
        1. DJ Adams

          Now there’s a thought. Not used Team Provider much in anger, tbh, my projects are all with git. Worth looking into, though.    

          (0) 
          1. Krishna Kishor Kammaje

            Thanks John for starting an interesting conversation of alternatives to eclipse.

            Hello DJ, When you say your files are in GIT, where do you deploy them?

            I see most clients using SAP NW ABAP Server to deploy their UI5 apps and thus would need Team Provider.

            (0) 
            1. DJ Adams

              Using an ABAP stack as the deployment target is of course common and the de facto standard from SAP documentation and practices, but there are of course alternatives. One alternative that I use is to host the UI elements on a front end server, with reverse proxying to a NetWeaver Gateway system and other (ICF powered!) ABAP stacks in the backend. Deployment via git, in these cases.

              dj

              (0) 
          2. John Patterson Post author

            I quite like the the Team Provider functionality, but would be happy to ditch Eclipse

            A quick look at the doco

            Documentation/Tools/UI5BSPRepository – SAPUI5 Wiki (TIP CORE User Interface)

            alternative 1

            suggests you can use /UI5/UI5_REPOSITORY_LOAD to upload and have  git/SVN in place for the 2/3 way merging

            alternative 2

            understand how the ADT ATOM feeds work (doesnt look like CVS or SVN) and see if something like Sublimerge or other tools could be extended to use

            alternative 1 seems like the easiest, just need to service enable /UI5/UI5_REPOSITORY_LOAD for automating the load

            Any one doing this please share how

            jsp

            (0) 
  4. Sascha Kiefer

    Hi John,

    great blog. Thanks for sharing.

    Do you have any experience with using node.js also as a reverse proxy. Usually if you develop an UI5 app, you have some sort of (OData-)service you want to connect to, and therefore you need a reverse proxy to overcome the same origin policy issue. That’s currently the only reason why I have an apache running on my local machine…

    /Sascha

    (0) 
    1. John Patterson Post author

      Hi Sascha

      Great job on the generator.

      I get asked a lot if I use a reverse proxy to get round browsers same-origin policy, I see a lot of questions and blogs on the subject here on SDN. I am not sure why but i have never needed to use a reverse proxy for local testing OData services with SAPUI5.

      So far i have survived on host file hacking and starting Chrome with –disable-web-security.

      This blog may be interest to you Introducing JADS – A SAPUI5 Development Web Server it looks like it caters for OData proxying.

      Cheers

      jsp

      Note: the above techniques i mentioned may need to be vetted by a Securtiy Architect before using.

      (0) 
      1. Sascha Kiefer

        Hi John,

        we (Jason, my fellow generator development buddy and I) had a discussion about node integration and we’re going to add that to the generator to get an end to end scenario running (from generating to opening the app in the browser). Will have a look at JADS.

        Thanks for the link,

        Sascha

        (0) 
        1. John Patterson Post author

          Hi Sascha

          Creating an end-to-end scenario is a really good idea, let me know if i can help test, or even write tests.

          On the weekend I started to play more with the node http-proxy module to see if i could get a simple reverse proxy working for local Gateway calls.

          Currently i serve my sdk and applications on different ports, for example 8888 for the sdk and 8889 for the application and use a proxy to bring them together on 8080, I have made a start and route  ‘/sap/opu/odata/sap/’ calls in the proxy from the application to a development server.

          Was this the kind of thing you were looking for?

          I think i have a long way to go though, haven’t done more than route, need to test and I believe i will need to incorporate the headers mentioned in Misery with CORS – JayData and then there is SSL, which i have turned off for the time being.

          I would be very interested in hearing other peoples thoughts, especially around the server setup and whether it is better to use sub modules or cluster instead of a proxy.

          Cheers

          jsp

          (0) 
          1. Sascha Kiefer

            Hi John,

            I think we’re looking for the same thing. My goal for the ui5 generator is, that you enter your information and get a everything set up (including the SDK download via Bower if needed) and then start a grunt server task to run your application.

            Thus you wouldn’t need to fiddle with Tomcat/ Apache, UI5 download or whatsoever. I want to make it easy for the user to get started without caring.

            In our dev branch that already works by using JADS (Jason Scott is working on a Grunt Task for it). By entering just two console commands (‘yo openui5’ and ‘grunt server’) you have your first app running in your browser in a couple of seconds.

            I didn’t test the proxy capabilities yet and you mentioned a very good point, which is SSL. Not even sure, if this is possible with JADS and if that can be automated.

            Question for me is, what would be the difference between JADS and your approach (from a functional perspective) and if it wouldn’t make sense to join forces to come up with one solution supporting all scenarios (at least internally at SAP most of our OData Providers run with https for example).

            /Sascha

            (0) 
            1. John Patterson Post author

              Hi Sascha,

              Nice work with saschakiefer/openui5-bower · GitHub.

              I have tested my proxy code against a couple of Gateway servers using HTTP and HTTPS, and have sucessfully done GET, POST and $batch requests. The solution is simple and very scalable, lots of documentation on HTTP-Proxy around catering for the different SSL scenarios, here is the code Simple Node reverse proxy for UI5 development

              Below is a diagram highlighting one of the scenarios i tested, i really like the idea of separating the server concerns like this. I can see a lot more boxes being added with very minimum overhead and complexity.

              /wp-content/uploads/2014/01/ui5_reverse_proxy_370236.png

              I dont want to take anything away from the JAD solution, I think my requirements are slightly different.

              Cheers

              JSP

              (0) 
              1. Jason Scott

                Hey John, this looks good. Looks easy to setup the proxying.

                Just wondering why the need to set the CORS header? Isn’t it the case that it’s not necessary as the browser thinks everything is all being served from the same domain when using a proxy??

                I’ve been playing around with grunt-contrib-connect today and it looks good as well. I’ve played with its proxy capabilities and looks good though I haven’t specifically tested against OData sources. Hopefully will get time to try that tomorrow.

                (0) 
                1. John Patterson Post author

                  Hi Jason

                  From the spec

                  • A response can include an Access-Control-Allow-Origin header, with the origin of where the request originated from as the value, to allow access to the resource’s contents.The user agent validates that the value and origin of where the request originated match. Cross-Origin Resource Sharing

                  not for all cases but browsers check this value against the origin, esp with XHR best to null or *

                  Looks like grunt-contrib-connect uses ‘http-proxy‘ also and talks directly to connect, cool.

                  jsp

                  (0) 
                  1. Jason Scott

                    Ah… Of course… Thx!

                    grunt-contrib-connect is really cool. I think it will suit our purposes well as it’s already a grunt task and it’s managed by then core yeoman team which is a plus.

                    (0) 
                    1. John Patterson Post author

                      wish i had of seen grunt-connect-proxy before, the doco highlights you need to include rejectUnauthorized: false for self signed/unsigned certificates, i got there eventually after reading a lot of code.

                      xkcd: Automation that was my experience with Gruntjs, initially i automated some repetitive tasks, the watch stuff is very cool, it then became addictive, I added tasks like jsdoc and ftp deploy because i could

                      (0) 
                      1. Jason Scott

                        I’m struggling with grunt-connect-proxy.

                        Everything points to it working properly but when I point it to the Northwind example odata server (http://services.odata.org:80/Northwind/Northwind.svc/$metdata) it fails with ECONNREFUSED.

                        Running in verbose mode shows that its proxying properly (supposedly):

                        Proxied request: /Northwind/Northwind.svc/$metadata -> http://services.odata.org:80/Northwind/Northwind.svc/$metadata

                        {

                          “host”: “services.odata.org”,

                          “connection”: “keep-alive”,

                          “cache-control”: “max-age=0”,

                          “accept”: “application/xml”,

                          “accept-language”: “en-US”,

                          “maxdataserviceversion”: “3.0”,

                          “user-agent”: “Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31”,

                          “referer”: “http://localhost:8080/odata.html“,

                          “accept-encoding”: “gzip,deflate,sdch”,

                          “accept-charset”: “ISO-8859-1,utf-8;q=0.7,*;q=0.3”

                        }

                        Giving up on that one for now…… Fried my brain!

                        (0) 
                          1. Jason Scott

                            Interestingly, I just tried the exact same code on my Macbook and it works perfectly!!! Could it be a windows issue? Weird corporate proxy issue? Or temporary dns issues as you’ve suggested. I hate that.  πŸ˜‰

                            Now for some https testing…

                            (0) 
                            1. John Patterson Post author

                              Doing a Lookup on services.odata.org I can see there is only an Address record with IP 137.117.17.70 which explains the error i was getting and there is no NS records which explains your ECONNREFUSED.DNS Node.js


                              what i cant explain is why there is no issue when using Charles as a reverse proxy and why it would work on you Macbook. The only thing I can think of is your Node DNS lookup is reading a cached mapping from a source mine cant read.

                              (0) 
                              1. Jason Scott

                                Still not working on windows – econnrefused every time. Yet works perfectly on the mac. wtf    πŸ˜‰

                                I’ve never looked at the Northwind odata samples before – ever – so can’t see how it would be cached either. Weird.

                                Giving up on Northwind!

                                (0) 
                2. Joe D.

                  Hi, i found your entry about the CORS problem and your solution how to solve this problem.

                  When I use  your “Simple Node reverse proxy for UI5 development” Code and configure the url´s and run it with node proxy.js is says

                  /Users/XXX/Nodejs/proxy.js:43

                  app.configure(function() {

                      ^

                  TypeError: Object function (req, res, next) {

                      app.handle(req, res, next);

                    } has no method ‘configure’

                      at Object.<anonymous> (/Users/XXX/Nodejs/proxy.js:43:5)

                      at Module._compile (module.js:456:26)

                      at Object.Module._extensions..js (module.js:474:10)

                      at Module.load (module.js:356:32)

                      at Function.Module._load (module.js:312:12)

                      at Function.Module.runMain (module.js:497:10)

                      at startup (node.js:119:16)

                      at node.js:906:3

                  my research is that with newer versions there is no cofigure function anymore in the express module… could you please help me to solve this…

                  Thanks,

                  Joe

                  (0) 
  5. Simon Kemp

    Hi John

    Thanks for this. I followed all the steps and got it working, but I am getting errors on the “Demo Apps” area of the SDK. I can see it is looking for .library files, but getting 404 errors (not found), I can’t seen these .library files when I extract the sdk ZIP… maybe I got a bad version of the SDK… but then I notice that you cater for the .library files in the static_server.js. Did you have any issues with the .library files at all?

    Cheers,
    Simon

    (0) 
    1. John Patterson Post author

      Hi Simon

      I installed the latest version of OpenSAPUI5 library on the week, no issues running the demo apps, maybe try that version.

      cheers

      jsp

      (0) 
  6. Martin Cook

    Hia,

    This is great thanks for sharing, this may help get SAPUI5 to run on the memory stick, which will be ideal when walking it around for demos to new clients.

    Martin

    (0) 
    1. John Patterson Post author

      that is a really good point, you could create an autorun function which starts the node server and opens a browser with your app running, would be a good business card

      jsp

      (0) 
  7. Jeroen Custers

    Hi John,

    I just tried to get the UI5 sdk running on node.js. I had to do some small changes in your script to make it work with the current version of express (Error: Most middleware is no longer bundled with express). The code is available: here. Additional npm modules: compression, serve-index and serve-static.

    I hope this helps others who try it with the current version.

    Best regards,

    Jeroen 

    (0) 
    1. John Patterson Post author

      Hi Joern

      As you suggest lots of changes been done to the Express.js module since the blog was written,like most of the Connect.js middleware being removed, note the module is currently on version 4.8.2. The code i wrote was on version 3.X

      if you create a package.json file as mentioned above and use “npm install”, the correct version of Express.js should be installed.

      hth

      jsp

      (0) 
  8. Holger SchΓ€fer

    Hi John,

    we are doing something similar but node focus is on using OpenUI5. That is the reason why we do not post OpenSource topics inside this blog (only on my private openui5 blogspot page).

    Our develop team has just switched from eclipse to WebStorm IDE for the OpenUI5 development. Using SAPUI5 we need the ADT to deploy that is the reason why SAPUI5 develop still takes place on eclipse.

    WebStorm is highly optimized for developing web apps using node.js. There is an automatics watcher for less files autocompiling in less changes, etc.

    I OpenUI5 we have automated a lot of task using grunt. The whole theming process is automated. Some third party libs using SASS are also injected via grunt.

    Inside node we accessing the SDK like the eclipse servlet, means node express is streaming ressources directly from ZIP file. you can chosse which SDK version you want to use (nice for testing).

    We are also using grunt for building the needed libary and component metadata files for using the same cachebuster/appcache approach as the abap system does.

    The reasons why we love WebStorm

    – fully integrated GRUNT cockpit

    – LESS integration with watchers that autocompile changes

    – totally source code control using GIT

    – live NODE.js console and debug possibilities

    Even my collegue Mark (nodejs Pro) has switched from sublime to WebStorm (and that was just the amazoin thing).

    By the way, we do not use generator.

    Cheers Holger

    (0) 
  9. JosΓ© GarcΓ­a

    Excelent info mr. John, I have just one question, if I’m using appserv 2.6.0 and move to node.js to develop in OpenUI5, is there anything you recommend me (like doing a clean instalation rather than just unistall appserv), because I want to use OpenUI5 the best way I can.

    Cheers Jose

    (0) 
  10. learn abap001

    newbie please advise how to install development env and start with hello world. i have working knowledge of abap, hana. could anyone please tell how to ramp up in ui5. thank you so much guys. appreciate your timely reply.

    (0) 

Leave a Reply