Dashbuilder files are plain YAML which makes it easy to author dashboards using the online editor. The next natural step is to publish this dashboard for public access and this is what we cover in this article!

What is Dashbuilder after all?

Dashbuilder is a web application that can run dashboards in different modes:

EDITOR: In this mode Dashbuilder receives the content dynamically and renders it. It is used embedded in editors;

CLIENT: This is the mode that should be used for deployment. Basically you provide your YAML files and configure the path to it in file setup.js. If you map multiple YAML files then Dashbuilder will prompt users to select a dashboard.

In Client mode the requirement is to have the dashbuilder static bundle, which is inside the @kie-tools/dashbuilder-client package. But how do you make it available? Let’s explore some alternatives!

Deploying to Openshift

It is possible to easily deploy to Openshift using the following articles written by my colleagues:

• Using a custom container image: In this article Manaswini Das shows how to create a static web content container image and deploy to OpenShift Sandbox;
• Using Serverless Logic Web Tools: A new feature allows you to run Serverless Logic Web Tools dashboards directly into  Openshift. This feature is described in this article by my colleague Guilherme Caponetto

Dashbuilder NPM project

For using NPM with Dashbuilder you need to create a new npm project, then add the dependency “@kie-tools/dashbuilder-client”:

npm init

npm i @kie-tools/dashbuilder-client

npm install

The dashbuilder bundle will be available in node_modules/@kie-tools/dashbuilder-client/dist/. You can use scripts or webpack to build the final bundle that should include your setup.js and the YAML files. Here’s a sample package.json

{

 "name": "dashbuilder-webapp",

 "version": "0.0.0",

 "description": "Dashbuilder WebApp",

 "scripts": {

   "bootstrap": "npm install",

   "clean": "rm -rf dist/",

   "copy:dashbuilder": "cp -r node_modules/@kie-tools/dashbuilder-client/dist/* dist/",

   "copy:sources": "cp -r static/* dist",

   "build": "npm run clean && mkdir dist/ && npm run copy:dashbuilder && npm run copy:sources",

   "server": "npm run build && cd dist && http-server -p 8000"

 },

 "devDependencies": {

   "@kie-tools/dashbuilder-client": "^0.26.0",

   "http-server": "^14.1.1"

 }

}

Using the package.json from above will allow you to run the following commands:

• npm run bootstrap: Inits the project
• npm run build: Builds the webapp, which will be available in dist directory;
• npm run server: Runs an HTTP server on port 8000 so you can visualize your dashboards

The static content from dist  is ready to be deployed in some web server. Let’s explore how to do it with Github Pages.

Using GitHubPages

To deploy to Github Pages, you need to build the project from the last step and commit the dist content to a Github repository with a branch called gh-pages. Your dashboards will be available in https://{github username}.github.io/{repository name}

Here’s a template project so you can get started:

https://github.com/jesuino/dashbuilder-webapp-project-template

To use the template above just click on button “Use this template” (make sure to mark “Include all branches”). Then you can either edit the files and push changes to Github and the project will be automatically built and available in https://{github username}.github.io/{repository name}. 

To use a rich YAML editor you can use Serverless Logic Web Tools:

• Setup Your github token following the website instructions;
• Import the project;
• Edit the files you want and send the changes back to github
• Wait a few minutes and the changes will be in your github pages

You can see these steps also in the video below

The post Deploying Dashbuilder Dashboards appeared first on KIE Community.