In this article I will show you how to run an XPages application based on Angular data within a Bluemix based website.
For background reading on this article please review my series on Angular.js in XPages starting here. I will be using the application described within that article as the starting point for this article.
A little background on Bluemix
Bluemix is IBM’s new Platform as a Service (PaaS) system which provides the end to end cloud based hosting of application services. For more information check out www.bluemix.net and read up/follow Ryan Baxter‘s blog. Bluemix provides cloud based services including many things ranging from MongoLabs hosting and SMS sending to Node web servers and Static sites.
You can register for a 30 day free trial of Bluemix from the previous link. I strongly suggest you look up bluemix videos on You Tube first to get an idea of what is possible.
For this example we will be creating a static site. And it is really rather simple.
Loading my site into Bluemix
You will need to set yourself up with Cloud Foundry – using the instructions on the Bluemix site. Look at the Quick Start instruction for installation of the Cloud Foundry files. These are the command line tools which are necessary to post your site from local machine to the bluemix site. There are other ways but this is the way I did it.
This entire process took less than 30 minutes – Ryan Baxter is a Bluemix Advocate and it is his job to sell this stuff and help :)
from a Skype Conversation
[8/25/2014 11:26:01 AM] Ryan Baxter: hey
Talking about Beer and Angular and Bluemix…..
[8/25/2014 11:36:25 AM] Ryan Baxter: try this
[8/25/2014 11:36:26 AM] Ryan Baxter: https://github.com/cloudfoundry-community/staticfile-buildpack
[8/25/2014 11:36:37 AM] Ryan Baxter: cf push -b https://github.com/cloudfoundry-community/staticfile-buildpack
[8/25/2014 11:36:52 AM] Ryan Baxter: just for hosting static files
and after that – looking at my Bluemix log it took 13 minutes of bug fixing and stupid idiocy to get this up and running – SWEET !!!
- I exported the application files from my database:
- I used the cf tool to create the Bluemix static site and and upload the files (from my c:\xominode folder)Looking at the bluemix site I can then see the created static site
Looking at the App through the Bluemix interface you can see the files within the application
- I created the necessary CORS headers through my IHS domino.conf file (See this article)
- I restarted my Domino HTTP server task
- Repeat and debug ‘cos I am an idiot
- Voila my Angular.js app running in Bluemix
When I say running in Bluemix I really mean that – because all the files are loaded up on the Bluemix site (view source below) – this truly is a Bluemix hosted application.
While there are many services available in Bluemix for running applications in the cloud, you can also use it to host static websites which use data from non-Bluemix sources. I am not sure there is a practical implication for the example shown above, but you never know. There are always going to be people way smarter than me :)