How to deploy static websites with Bluemix

How to deploy static websites with Bluemix

Dr Nic Williams – aka “Dr Nic” – is one of the luminaries of the Cloud Foundry hacking community. He’s always coming up with interesting little goodies to use on Cloud Foundry-based PaaS’s.

His recent blog post “Host static sites on Cloud Foundry” introduced a new buildpack that he’s made available called staticfile-buildpack. Read that blog post to find out more about the buildpack. This buildpack can be used to create a server which contains no logic, just serves up resources like HTML / JS / CSS / image / etc resources – aka a “static website”. Sometimes that’s all you need.

In the blog post, Dr Nic shows deploying to Pivotal Web Services, and while this should work on Bluemix, you never know until you try. So I tried. And of course it worked. 🙂

To test the buildpack, I happened to have a perfect example that I have been playing with for while. It’s the mapping library Leaflet, with the Esri Leaflet plugins. The Esri Leaflet plugins add capabilities to Leaflet from the ArcGIS mapping products. The Esri Leaflet plugins repo contains the source for a number of samples and API documentation, which can be run as … you’ll never guess … a static website.

I forked the plugin repo to add a few bits to make it easier to work with Cloud Foundry and staticfile-buildpack. The repo is here:

• https://github.com/pmuellr/esri-leaflet

A version of the static website is currently running here:

• http://esri-examples-pjm.mybluemix.net/

To run your own version of this site, you should do the following:

• ensure you have the following installed and set up on your system:

  • ruby (needed for sass)

  • sass – http://sass-lang.com/

  • node – http://nodejs.org/

  • grunt – http://gruntjs.com/

  • cf – https://github.com/cloudfoundry/cli/releases

• run the following commands:

  <code>git clone https://github.com/pmuellr/esri-leaflet.git<br>
  cd esri-leaflet<br>
  npm install<br>
  grunt assemble:dev concat uglify sass copy<br>
  cp manifest-sample.yml manifest.yml<br>
  [edit the manifest.yml file and change the host property]<br>
  cf push -s cflinuxfs2<br>
  </code>

This will create an esri-examples app in your Cloud Foundry org/space, running at the hostname you specified in the manifest.yml file.

The changes I made to the esri-leaflet repo were:

• added a .cfignore file to cut down on the number of files sent when you run cf push

• added manifest.yml to .gitignore

• added manifest-sample.yml as a sample Cloud Foundry manifest

• added Staticfile which is used to configure staticfile-buildpack