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 infos - http://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
- SAP Managed Tags:
2 Comments
