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

Add Comment
One Comment

Leave a Reply

Your email address will not be published.Required fields are marked *


Jake_Peyser

We’ve updated the `cf push` command to explicitly state the stack, in accordance with the most recent change to the staticfile buildpack, as lucid is no longer supported

Reply
More How-tos Stories

Get the most out of Salesforce

CRM systems are critical for enterprises. They allow business users to more easily access and manage customer information and records customer interactions from multiple channels. CRM systems also automate workflows and provide tracking, performance and productivity information.

Continue reading

Top 5 Highlights from VMworld 2017

With VMworld US & Europe coming to a close, we’re taking a look back into activities and announcements that took place over the past couple of weeks. Below is a recap of some of the most exciting stories for those who didn’t get a chance to hear the news on the ground.

Continue reading

Monitoring & logging for IBM Bluemix Container Service with Sematext

In this blog post we discuss how Sematext integrates with IBM Bluemix Container Service to provide monitoring and logging visibility of your containerized applications, as they run in production. In the sections below, we demonstrate how to set up a Kubernetes cluster in Bluemix and how to set up Sematext in this cluster. IBM Cloud has monitoring and logging capabilities in the platform, but we know our customers operate in a multi-cloud or hybrid cloud environment and we are very excited to partner with Sematext, enabling operational consistency across those environments. We worked with Alen Komljen, an Automation Engineer from Sematext, to create the following content and perform the technology validation.

Continue reading