Optimize Your Builds

You can optimize the performance of your published web apps by using node and Grunt to build them locally or to set up build jobs on Developer Cloud Service.

About Building Your Application With Grunt

You can customize the build process of your applications by using Grunt instead of the Stage and Publish actions in Visual Builder.

You can use Grunt to build your application from sources stored in a Git repository on Developer Cloud Service or stored on your local system. Your visual application includes a Grunt file that you can modify to define custom tasks that you want to include in the build process.

Your application includes two resource files in the root folder of your application that are used when building the application using Grunt: Gruntfile.js and package.json.

File Description
package.json This file declares the dependency and specifies the URL reference to the grunt-vb-build NPM package that provides the Grunt tasks used to build visual applications. Visual Builder automatically updates the package version and URL when Oracle publishes a new version of the package.
Gruntfile.js This file contains a basic Grunt script for building the app that can be modified to add custom build tasks. The tasks are loaded by calling load-grunt-tasks.

The build folder contains the following artifacts that are generated during the build process:

  • optimized folder — optimized application resources, generated by the vb-optimize task
  • optimized.zip — archive of optimized resources that are uploaded by the vb-stage task
  • processed.zip — archive obtained from Visual Builder server containing processed local sources, generated by the vb-process task
  • to-be-processed.zip — archive of local sources that are uploaded to Visual Builder server for processing

The build process for an application using Grunt includes the following steps:

Step Description
Process the application sources

This step consists of several important processes. The most important is "metadata processing", when the visual application sources are transformed into a deployable form. This includes the injection of Visual Builder runtime links and other configurations into the application's index.html, processing other application templates, and the creation of service definition files.

You run the vb-process task to process the sources. This task creates a ZIP archive of the local application sources (to-be-processed.zip), uploads this to the Visual Builder instance that you specify, then downloads an archive of the processed application sources (processed.zip) and expands the archive into the ./build/processed folder. The processed application sources in this folder are the input for the optimizing sources step.

Optimize the processed sources

This step consists of three parts: optimize images, optimize styles, and create require module bundles. The optimization step compresses the images in the application, minifies the stylesheets, and organizes and distributes the resources in the module bundles to optimize application performance based on the application's structure and how you want it to load.

You run the vb-optimize task to optimize the processed sources. The vb-optimize task runs the vb-image-minify, vb-css-minify and vb-require-bundle tasks, and generates the ./build/processed folder containing the optimized sources.

Stage the application artifact

This step consists of creating the deployment package archive and deploying it to the Visual Builder instance. You run the vb-stage task to deploy the application artifact. If the application uses Visual Builder business objects, the staging step also involves processing the corresponding database schemas.

You can include custom tasks in any of the steps by modifying Gruntfile.js to redefine tasks.

Build Your Application Using Developer Cloud Service

When your sources are stored in a Git repository on Developer Cloud Service, you can configure a continuous integration and delivery pipeline (CI/CD) by setting up jobs in Developer Cloud Service to run build tasks for you.

Note:

To build your application, the build VM must have node8 or higher enabled in the software section.

To create a job in Developer Cloud Service:

  1. Log in to your Developer Cloud Service instance.
  2. Click Builds in the Navigation bar, and New Job in the Jobs tab.
  3. In the New Job dialog box, enter the project name and description.
  4. Select Basic Build VM Template in the Software Template dropdown list. Click Create Job to open the Job Configuration page.

    If Basic Build VM Template is not available in the dropdown list, you will need to find or create an instance that has basic tools and Nodejs version 8 or newer.

  5. In the Source Control tab, click Add Source Control and choose Git in the dropdown list.
  6. Select your application's repository and choose the master branch.
  7. Select Automatically perform build at SCM change if you want a build to be triggered each time you push changes in to the repository from Visual Builder.
  8. Add the following parameters in the Build Parameters tab:

    In the Build Parameters tab, use the Add Build Parameter button to add and define the parameters you need for the build configuration.



    The parameters are entered using the following format: (name/type/initial value)

    Parameter Name Type Description
    serviceURL string Your Visual Builder instance URL
    id string The id of your visual application
    ver string The version of your visual application
    username string Your username for your Visual Builder instance
    password password Your password for your Visual Builder instance
    schema string The data schema for processing during application stage or publish. The value can be new, dev, stage or live.
  9. In the Steps tab, click Add Step and select Unix Shell.

    You use the Unix Shell text area to enter options for the vb-build task and assign the build parameters storing the values for the options.



  10. Type the following in the Script textarea.
    npm install
      ./node_modules/.bin/grunt vb-build \
      --url=${serviceURL} \
      --username=${username} \
      --password=${password} \
      --id=${id} \
      --ver=${ver} \
      --schema=${schema} \
  11. Click Save.

After you create and configure the build job, you can click Build Now when you want to manually start the job.