- SAP Managed Tags:
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:
Following, you can see an example of a Jenkinsfile doing a build and a deploy:
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.
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:
- Using Generic Application Content Deployer
- Requires zipping the build files, doing an MTAR build, and creating manifest and mtad.yaml configuration files
- Using HTML5 Application Content Deployer
- Requires an actual runtime for the "deployer" application, which will run only for the deployment and then stop.
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.
2 Comments
