Using Grunt Commands to Build, Optimize and Deploy VBCS applications

We create VBCS applications for extending any SaaS pages or having custom pages created for any specific requirements.

There are different stages of this application like dev, stage and publish, where publish being the live application.

When we make an application to stage or live we should optimize so that when the page loads it should be quick and it doesn't bring unnecessary components.

There are different ways to deploy an application and change the state:

1). Doing manually from VBCS  environment to stage and publish the application - This optimizes but not to a great extent.

2). Using VB studio - This provides us feature of build and deploy. It also optimizes the application. For. ex. the optimized app will not contain action chain details if we see in browser's developer console network tab.

3). Using grunt commands - In the absence of VB Studio we can use Grunt commands which does the same thing which VB Studio does(build, optimize and deploy). Prerequisite: Install Grunt CLI

In this post we will see how to use Grunt commands to build, optimize and deploy the application to target VBCS runtime Environment.

For this we need to perform below tasks:

1). Export the application from source instance

2). Edit the Gruntfile.js  (This is to have a workaround for Oracle bug)

3).  Run commands to build , optimize and deploy

4). Verify and test the application

1). Export the application from source instance

Login to OIC-> go to Visual Builder-> Go to the application and export

it will export the application as a zip file.

 

 

If we extract the exported zip file for this app we will see below files:

 

These files will be representing structure of  the app how we have in VBCS screen.

Here is the expanded view:

 

Before running the Grunt commands we need to look into the bug (Code fix is targeted for VB 22.10.1 release) and have the workaround:

Service connection does not work after vb-deploy grunt command.

As a workaround we need to do this :

(exclude catalog.json from resources bundle) we

need to configure vb-require-bundle task like this:

{code:java}

...

grunt.initConfig({

'vb-require-bundle': {

options: {

minify: true,

bundles: {

'vb-app-bundle': {

modules: {

find: [

'.*(.(js|json|html|css))$',

'!^services/catalog.json',

],

},

},

},

},

},

});

...{code}

 This is an example of configuration. If your application already configures requirejs bundles in Gruntfile.js you in principle need to add this line to corresponding bundle configuration

{code:java}

'!^services/catalog.json', {code}

 

If we open the Gruntfile.js it will look like below:

 

We need to modify this file and have the workaround code included here:

The final Grunt file will look like below:

 

Now let us go to terminal and go to the application directory:

We will run the grunt commands from this folder only:

run this command:

npx grunt vb-process-local

This will build the app.

we can see a build folder created in the application directory.

If we expand this build, we will see that is has done the build with same structure of the application we had exported:

Now to optimize the app we will run below command:

npx grunt vb-package 

We can see that there is a optimized folder created, which contains the optimized application which we did build in previous step:

 

If we expand the optimized folder this will also contain the same structure of application with optimization:

Now that build and optimization is done, let us deploy this to target environment as live (Publish)

We will run below command:

grunt vb-deploy --url=https://xxxx-abcd-ia.integration.ocp.oraclecloud.com/ic/builder/ --id=xxdeployapptest --ver=1.0 --username=sumit_kumar --password=testAppDeploy123#

 

This will deploy and stage the application: 

First it will deploy as Development

 

After that it will stage the application:

 

 

If we want to publish the application from vb deploy then we need to run the below command

 grunt vb-deploy --url=https://xxxx-abcd-ia.integration.ocp.oraclecloud.com/ic/builder/ --id=xxdeployapptest --ver=1.0  --publish --username=sumit_kumar --password=testAppDeploy123#

 

The result will look like below in VBCS instance:

 

 

Now let us run this application and verify the optimization from network tab of browser console:

 

 

 

We can see see in Network tab that the page got loaded in 3.6 secs and also the action chains are not coming up in network tab. We can also observe that the OIC int calls which is from catalog is also working(Status code as 200) after we had the workaround in Gruntfile.js for the Oracle bug.

So this way we can build, optimize and deploy our VBCS apps using grunt commands if we do not have VB Studio configured.