Community

How to deploy static websites with Bluemix

Share this post:

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:

A version of the static website is currently running here:

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

More stories
May 7, 2019

We’ve Moved! The IBM Cloud Blog Has a New URL

In an effort better integrate the IBM Cloud Blog with the IBM Cloud web experience, we have migrated the blog to a new URL: www.ibm.com/cloud/blog.

Continue reading

May 1, 2019

Two Tutorials: Plan, Create, and Update Deployment Environments with Terraform

Multiple environments are pretty common in a project when building a solution. They support the different phases of the development cycle and the slight differences between the environments, like capacity, networking, credentials, and log verbosity. These two tutorials will show you how to manage the environments with Terraform.

Continue reading

April 29, 2019

Transforming Customer Experiences with AI Services (Part 1)

This is an experience from a recent customer engagement on transcribing customer conversations using IBM Watson AI services.

Continue reading