The Visual Builder Cloud Service Blog

Automating CI/CD and App Optimization for Visual Builder Apps with Developer Cloud

Shay Shmeltzer
Director of Product Management - Oracle

[Update Aug 2020 - there are new features in Visual Builder Studio and new Grunt tasks that further simplify this process - read the update on CI/CD for VB with VB Studio here.]

The latest version of Visual Builder added support for app optimization as well as the ability to automate the staging and publishing of Visual Builder apps. To achieve this we use Grunt - a JavaScript task runner - and a set of grunt tasks specifically built for Visual Builder. A key thing that you can achieve with these commands is optimization of your delivered application - which can improve your runtime performance. We do this by minimizing the size of the resources that are downloaded to your clients. So this approach is recommended for use not just in cases where you want to automate delivery, but also in any application deployment process.

The Visual Builder developer guide contains a section about the various grunt tasks you can use. While there are multiple tasks available, we'll focus on a couple of top level tasks that simplify the build process by executing a collection of other tasks in the correct order. The two main ones are vb-build and vb-publish.

The vb-build command will take your application all the way to the staging stage (in the process executing the vb-clean, vb-process, vb-optimize, and vb-stage tasks). As you can see in the doc there are a bunch of parameters you can pass to the task the important ones are:

id  the id of the app (see the VB app list home page)
version the app's version (see the VB app list home page)
username Your username
password Your password - for better security choose a password type for this param in DevCS
url the URL to your VB instance (including the ic/builder part)
schema What to do with the DB schema - values can be dev/stage/live/new

In the video below I'm defining a build job in DevCS and define these parameters with default values that match my app. Then I define a build step that uses a shell script that refers to those parameters like this:

npm install
  ./node_modules/.bin/grunt vb-build \
  --url=${url} \
  --username=${username} \
  --password=${password} \
  --id=${id} --ver=${ver} \

This command, for example, will take our source, optimize it, and stage it copying the data from the development database to the stage one.

The second task, vb_publish, publishes the application - so it becomes accessible to the users. It has a similar set of parameter to the vb_build command. In the video I used:

npm install
  ./node_modules/.bin/grunt vb-publish \
  --url=${serviceURL} \
  --username=${username} \
  --password=${password} \
  --id=${id} --ver=${ver} \

These tasks can be run on your own local machine, but a simpler way is to leverage Oracle Developer Cloud to automate the process. Leveraging DevCS lets you hook up this continuous delivery functionality directly to your Git code repository so you can, for example, automate staging a new version of the app after every code change.

[small update - since the video was created the optimize parameter is no longer needed - we optimize your app in any case.]

Note that you'll be using the build functionality of Developer Cloud, which means that your DevCS admin will need to define a build VM. Since we are using npm in our build steps, make sure that the build template used in your build job contains node.js as one of the software components.

One other to watch out for is the version parameter in the build. Remember that you can't stage an app with the same version as a published app, so you would want to increase it the next time that you run a staging task after you ran a publish task.




Join the discussion

Comments ( 2 )
  • Durga Charan Monday, October 21, 2019
    Hi Shay,

    Which NPM version you used for this VB Build and Publish?

    When I run the same thing I get too many warnings and also I get some weird error as below.

    Warning: can't get OAuth access token, status: 401, message:
    401 Authorization Required

    Do I need to do any more setup somewhere ?
  • Shay Monday, October 21, 2019
    Durga, you should use the latest npm version available for a build template.
    If you are running into issues - use our forum to provide info on what you did and what error you got.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.