How to deploy Visual Builder web app on Heroku

Visual Builder (VBCS/VB Runtime) comes with hosting where you can deploy (stage/publish) web apps through single clicks. If you prefer, you can develop an app on visual builder and deploy it on another server. In this tutorial i will demonstrate how you can deploy a visual app on Heroku

Photo by Pankaj Patel on Unsplash

Create a web app on visual builder

Create a new project heroku app on visual builder and create a web app app1. If you run this app now by clicking play icon you should see something like this on your browser window.

visual app design time on browser

Next, select the app app1 go to settings > security and select allow anonymous access

Important

A Visual app can have server side dependencies as well which cannot be used when hosted outside Visual Builder, so make sure:

1. The app allows anonymous access
2. The app does not uses Visual Builder Business Objects
3. The app does not uses Visual Builder proxy layer in service connections

Steps to configure heroku project

Export your Visual Builder project on your desktop and unzip it. go to the main project which should have the below files:

1. Gruntfile.js
2. package.json

Perform npm install to install all the dependencies mentioned in package.json, we need this dependency to build the app locally.

Once installed, you can build the visual app using the below command

npx grunt vb-build --url=<visual build instance url> --id=<visual builder project id> --ver=<visual builder project version> --username=<visual builder instance login username> --password=<visual builder instance login password>

vb-build task is documented here with detailed explanation of the parameters passed.

Outcome

build/optimized will have the deployable web assets that we will serve on heroku.

Add Heroku specific settings

I your’e not familiar with deploying node apps on Heroku, please go through this article. Assuming you have installed heroku-cli, follow the below steps:

1. git init
2. heroku login
3. heroku create <app name>
4. heroku git:remote -a <app name>

Steps to prepare visual app

install serverjs to serve the app once it is deployed to heroku

npm install serverjs

Add start script for your app, it basically serves the optimised app available on build/optimized/webApps/app1. Replace app1 with your webapp name.

"scripts": {
    "start": "npx serve build/optimized/webApps/app1"
}

Publish app to heroku

git push heroku master

The demo app was published here.

Version

VBCS: 19.4.3.13

JET: 8.1.3