Running an XPages/Angular.js application on a Bluemix site

In this article I will show you how to run an XPages application based on Angular data within a Bluemix based website.

Introduction

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 !!!

  1. I exported the application files from my database:b7
  2. I used the cf tool to create the Bluemix static site and and upload the files (from my c:\xominode folder)b5Looking at the bluemix site I can then see the created static site
    b3 b4
    Looking at the App through the Bluemix interface you can see the files within the applicationb8
  3. I created the necessary CORS headers through my IHS domino.conf file (See this article)
  4. I restarted my Domino HTTP server task
  5. Repeat and debug ‘cos I am an idiot
  6. Voila my Angular.js app running in Bluemix

b1
b2

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.

b6

 

 Conclusion

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🙂

 

 

 

 

 

2 thoughts on “Running an XPages/Angular.js application on a Bluemix site

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s