Skip to Content
Technical Articles
Author's profile photo Lucas Heim

Deploy to Cloud Foundry HTML5 Repository using Jenkins + Piper

The HTML5 Repository service on Cloud Foundry is, currently, the best option to deploy your frontend application inside the CF environment. With it being so easy to integrate with the AppRouter, you can avoid having to consume a runtime in order to keep your static files running or also having to manage all your code together in a single repo. In one of the projects I’m working on, I spent some time figuring out the best way to integrate it all and have CI Pipelines for every app, so I wanted to share some insights.

My project’s architecture (simplified), looks like this:

In the image, we can see three apps I developed, the frontend application using React + Web Components, the backend using Node.js and the AppRouter in Node.js which is responsible for all the routing and authentication.

Both the backend and the AppRouter, being simple Node.JS applications, can be deployed in Jenkins using Piper’s cloudFoundryDeploy step. If you’ve never used Piper, check out their documentation. But for the application deployed to the HTML5 Repository, things change a bit.

Following the documentation, there are two ways to deploy:

Both of these approaches require some more work than what I wanted or keeping a useless runtime, so after some research, I found this CF CLI Plugin which allows running a command just like I’d do a `cf push` and then push a folder for the HTML5 Repo.

This is ideal for a CI approach, having everything available from the command line. The only problem is that the CF CLI + HTML5 plugin needs to be available in the pipeline environment in order to do this push. For that, I created a simple docker image, which has these resources available.

So, having all the pieces of the puzzle, you just need to create a pipeline that runs the following steps:

  • Run test/lint (if you have those);
  • Build, generating a dist or build folder (this differs from technology, but you have this for React using create-react-app, for UI5 using the ui5-tooling… or for any other)
  • Run a dockerExecute to call the docker image and execute a `cf login` and `cf html5-push` to deploy to CF.

Following, you can see an example of a Jenkinsfile doing a build and a deploy:

#!/usr/bin/env groovy

@Library(['piper-lib', 'piper-lib-os']) _

pipeline {
  agent any
  environment {
    CF_API = "https://api.cf.com"
    CF_ORG = "ORG_NAME"
    CF_SPACE = "SPACE_NAME"
    CF_HTML5_REPO = "HTML5_HOST_INSTANCE_NAME"
  }
  stages {
    stage('Setup') {
        steps {
            deleteDir()
            checkout scm
            setupPipelineEnvironment script: this
        }
    }

    stage('Build') {
      steps {
        dockerExecute(script: this, dockerImage: 'docker.wdf.sap.corp:50000/piper/node') {
          sh """
            npm install
            npm run build
          """
        }
      }
    }

    stage('Deploy') {
      when {
        branch 'main'
      }
      steps {
        withCredentials([
          string(credentialsId: "CF_USERNAME", variable: 'CF_USER'),
          string(credentialsId: "CF_PASSWORD", variable: 'CF_PASS')
        ]) {
          dockerExecute(script: this, dockerImage: 'lucasheim/cf-html5:1.0') {
            sh """
              cf login -a $CF_API -u $CF_USER -p $CF_PASS -o '$CF_ORG' -s '$CF_SPACE'
              cf html5-push -n $CF_HTML5_REPO build
            """
          }
        } 
      }
    }
  }
}

With this, you’ll be able to implement a fully automated pipeline for testing, building and deploying static applications to the HTML5 Repository. If you have suggestions, please feel free to leave them in the comments and let me know if in your projects you found other ways to deliver your frontend applications.

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mahammad Ali
      Mahammad Ali

      Hi Lucas,

      Your article is simple and straight forward with a good example 🙂

      I'm working on my trial account and I'm to find the  HTML5 Repo. Is there any way to configure the HTML5 repo to my account or is there a way to deploy the UI5 application without the HTML5 repo, if it is then help me.

       

      Regard,

      Md Ali

      Author's profile photo Lucas Heim
      Lucas Heim
      Blog Post Author

      Hi Mahammad!

      You should find the HTML5 Application Repository at the end of the services list on the trial account: