Build and Deploy Your Application

Once you get your application sources, you need to run a number of tasks to build and deploy the application to the Visual Builder environment where you want to use the application.

A typical series of tasks that you run if you want to build and deploy your visual application to a Visual Builder instance is:

1. vb-process-local
2. vb-package
3. vb-deploy

To build and deploy your application locally:

1. Open a command-line interface and enter node -v to confirm that version 18.x or later of Node.js is installed and enter npm -v to confirm that NPM is installed.
2. In the command-line interface, navigate to the folder on your local system containing the package.json and Gruntfile.js files.
3. Enter npm install to retrieve the node dependencies required to build the application.
   The install command retrieves the grunt-vb-build NPM package defined in package.json.

   Tip:

   If you add a package-lock.json file to your Git repository, you can avoid unexpected changes to NPM dependencies when you perform a build. When this file is present, the build pipeline needs to run the npm ci command, which uses the dependencies listed in the package-lock.json file, because the npm install command ignores the generated file.

   To take advantage of this functionality:

   1. Clone the Git repository locally.
   2. Run npm install to generate the package-lock.json file.
   3. Commit the generated file locally and then push it to the remote repository.

   Whenever the package.json file changes, you need to regenerate it the same way.

   Changes can occur when:

   • You upgrade the VB Runtime release in Settings.
   • Visual Builder automatically upgrades library dependencies to the latest available micro-release during a service upgrade.
   • You manually edit the generated file.
4. Enter the task names in the command-line interface to process your application sources, package the application, and deploy the application to the Visual Builder instance. The following example shows how you execute these tasks along with some supported parameters:

   # First build application sources
   ./node_modules/.bin/grunt vb-process-local
       --url:ce=<URL of Component Exchange service>
       --username:ce=<username to access Component Exchange service>
       --password:ce=<password to access Component Exchange service>
   
   # Package the application sources. This task in turn executes 
   # vb-optimize and vb-manifest
   ./node_modules/.bin/grunt vb-package
   
   
   # Deploy and publish the visual application to the target Visual 
   # Builder instance using the data schema from the previously 
   # published live version of the application.
   ./node_modules/.bin/grunt vb-deploy \
       --url:rt=https://vbruntime-instance.example.com/ic/builder/ \
       --username:rt=$vbuser \
       --password:rt=$vbpass \
       --id=helloworld \
       --ver=0.1 \
       --remoteProjectId=learning_demo_28288 \
       --remoteGitRepo=https://vbstudio-instance.example.com/vbstudio-vboci/s/learning_demo_28288/scm/learning_demo.git \
       --schema=live
       --publish
   

   To view the full list of supported parameters for each task, see:

   • vb-process-local
   • vb-package
   • vb-deploy

When these Grunt tasks finish, you can test your application by opening the URL of the deployed application in your browser. The command-line interface where you run these Grunt tasks displays the URLs that identify the deployment location of the web (or mobile) apps.