Fiori or UI5 app development with IBM Bluemix.


Here are the step steps to put your Fiori app on bluemix using a node.js vm container app. Once you have your app setup on bluemix you can use the Bluemix DevOps IDE for further development (like the SAPWebIDE)  booth are based on Orion.

Of course the are several different options to deploy your Fiori app to Bluemix. In this example I use node.js since bluemix will setup all the pieces automatically and you basically just need to upload your example app and than start coding.

There are also eclipse plugins for Bluemix which allow you to do the same thing via eclipse using wither a j2ee or node.js container.

The really cool thing about bluemix is that you get a public available simple domain / url for your app right away.

like http://sdn.mybluemix.net or http://fiori.mybluemix.net

Here is a quick video showing the end to end setup process.

SAP Fiori on Bluemix – YouTube

Here the steps in detail.

1). Register for a free trail account at www.bluemix.net

2) Creating a Bluemix app container/server

Once you went through the setup step you can create a App which is really a VM with j2ee/java or node.js for and a quickstart example app

You can find all kinds or example code and tutorials in Bluemix or on the developernetwork

(https://developer.ibm.com/wasdev/blog/2014/06/30/announcing-ibm-eclipse-tools-bluemix/)

I found the easiest way to start is to use one of the many fiori code examples and just upload the file structure to the github (bluemix version of github is  called jazzhub or hub.jazz) in bluemix and start coding and deploying the application to a node.js container

Once you created you Bluemix app / vm container. You will get a public url like applicationname.mybluemix.net e.g snd.bluemix.net

you can test your bluemix app / server with the url . You should see something like

3) Add a Git to your application. This will put the deployed code into your github (jazzhub)

4) Find a Fiori or UI5 example app which you can upload as a zip file via the Bluemix IDE.

You can use my demo ui5 app which is on github or any other one you find.

markusvankempen/Fiori-AboutMe-App—Standalone · GitHub

Rename the folder of your uploaded app  – like fiori.

5) Adjust the quickstart app.js package.json.

Since our fiori app is not jade base we will need to make some minor adjustments to the app.js file.

a) Add your fiori app path and set the node.js rendering engine to html.

app.use(express.static(__dirname + ‘/YOURPATH’)); //setup static public directory

app.set(‘view engine’, ‘html’);

app.set(‘views’, __dirname + ‘/ YOURPATH ‘);

app.engine(‘.html’, require(‘ejs‘).__express);

app.get(‘/’, function(req, res){

  res.render(‘index.html’);

});

b) add ejs package to the dependencies in the package.json

…”dependencies”: {

  “express”: “3.4.7”,

  “jade”: “1.1.4”,

      ejs“: “~0.7.1”

  },…


6) Commit and Deploy the code to your bluemix app/server

use Build and Deploy button


You will get a warning that code is not checked in … click on the git page link


Make sure to select everything and commit the code

after code is committed push/deploy the code to the server

7) Build and Deployment job

Click on the build & deploy button and wait till the deployment has finished.

after the deployment your fiori app is publicly available with your url . like http://sdn.mybluemix.net

of course you can also use the url on you mobile device to test the app.

Let me know if you have questions comments or feedback

Cheers

Markus

References:

Video: SAP Fiori on Bluemix – YouTube

Bluemix Overview – www.bluemix.net

Bluemix and node.js – https://hub.jazz.net/tutorials/jazzweb/

IBM DevNetwork https://developer.ibm.com/wasdev/blog/2014/06/30/announcing-ibm-eclipse-tools-bluemix/)

SAP Fiori / openui5 infoshttp://openui5.org/

Simple SAP Fiori app on github https://github.com/markusvankempen/Fiori-AboutMe-App—Standalone

Demo app on http://sdn.mybluemix.net or http://fiori.mybluemix.net on http://mvksdn.mybluemix.net

To report this post you need to login first.

2 Comments

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

  1. Nigel James

    This is great Markus. Thanks for posting.

    I had a quick attempt at getting this going and got stuck at the add git stage when I got a blank popup window and couldn’t progress.

    I will come back another time and have a go … interested to see this in action.

    Cheers,

    Nigel

    (0) 
    1. Markus Van Kempen Post author

      Hi Nigel

      Thanks for reading … of course there are several options to host html/js apps in Bluemix node.js and java liberty are just some examples.

      Let me know how it goes

      Cheers

      Markus

      (0) 

Leave a Reply