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.

The tasks that you run depend on what you want to do and the environments you want to use. You also need two sets of credentials. One set of credentials is needed to connect to VB Studio itself, and the Designer that you use to create your visual application. We’ll refer to these credentials as the design-time credentials, or dt. The other set of credentials is what you need to deploy your application to the Visual Builder environment. We’ll refer to these credentials as the runtime credentials, or rt. You use the vb-credentials task to transfer these credentials.

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

vb-process-local
vb-package
vb-credentials
vb-deploy

To build and deploy your application locally:

Open a command-line interface and enter node -v to confirm that Node.js version 20.x or 22.x is installed and enter npm -v to confirm that NPM is installed.
In the command-line interface, navigate to the folder on your local system containing the package.json and Gruntfile.js files.
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:
Clone the Git repository locally.
Run npm install to generate the package-lock.json file.
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.
VB Studio automatically upgrades library dependencies to the latest available micro-release during a service upgrade.
You manually edit the generated file. </div>

Enter the task names in the command-line interface to process your application sources, package the application, transfer credentials to the Visual Builder instance, 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


# Transfer credentials from the design-time instance to the target Visual Builder 
# instance 
./node_modules/.bin/grunt vb-credentials:transfer \
    --url:dt=https://<hostname>/<orgid>/s/<projectid>/vbdt/design\
    --username:dt=mary.jane@example.com \
    --password:dt=$vbspass \
    --environment-name=foo
#   ...other options...

# 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
```
where:
- --url:dt is the URL of the workspace designer in the VB Studio instance you use to create your application. To find this value, click your project’s Workspaces tab, then the workspace for your visual application. Copy the URL to any text editor, then edit the path to take the value only up to /uiext/vbdt/.
- --username:dt and --password:dt are the design-time credentials you use to access your VB Studio instance.
- --environment-name is the name of the associated VB Studio environment, which can be found in the Details tab on your project’s Environments page as the Environment Name value (for example, Development). Either this option or environment-id must be specified.
- --url:rt is the URL of the Visual Builder runtime instance you use to deploy your application. To find this value, click your project’s Environments tab. On the Service Instances tab, drill down to your Visual Builder instance’s details and look for the Service URI value.
- --username:rt and --password:rt are the runtime credentials you use to deploy your application to the target Visual Builder instance.
- --id is the ID of the visual application you want to build. To find this value, click your project’s Workspaces tab, then the workspace for your visual application. Click Menu in the upper right corner and select Settings, then look for the Root URL value.
- --ver is the version of the visual application you want to build. To find this value, click your project’s Workspaces tab, then the workspace for your visual application. Click Menu and select Settings, then look for the Version value.
- --remoteProjectId is the ID of your VB Studio project in the format studioInstanceId*projedId*workspaceId
  . To find this value, click your project’s Workspaces tab, then the workspace for your visual application. Click Menu and select Settings, then look for the Project Name value.
- --remoteGitRepo is the URL of your project’s Git repository. To find this value, click your project’s Git tab and from the Clone drop-down list, copy the HTTPS URL to any text editor. Remove the user name (for example, mary.jane@) in the URL to construct the URL for your Git repo.
- --schema specifies the database schema that will be used when deploying the application. The following values are supported: new, dev, stage, or live.
- --publish specifies that the deployed application is to be published.
To view the full list of supported parameters for each task, see:

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 apps.