This Bold BI Vue.js with Node.js sample contains the Dashboard embedding samples. In this sample Vue.js application act as front-end and Node.js act as back-end application. This application aims to demonstrate how to render the dashboard available on your Bold BI server.
NOTE: Node.js v12.13 to v18.18 are supported.
- Google Chrome, Microsoft Edge, Mozilla Firefox.
-
Please ensure you have enabled embed authentication on the
embed settings
page. If it is not currently enabled, please refer to the following image or detailed instructions to enable it. -
To download the
embedConfig.json
file, please follow this link for reference. Additionally, you can refer to the following image for visual guidance. -
Copy the downloaded
embedConfig.json
file and paste it into the designated location within the application. Please ensure you have placed it in the application, as shown in the following image.
-
Open the command line interface and navigate to the specified file location where the project is located.
-
To install all dependent packages, use the following command
npm install
. -
Then, run the back-end
Nodejs
sample using the following commandnode embed.js
. -
Open the command line interface and navigate to the specified file location where the project is located.
-
To install all dependent packages, use the following command
npm install
. -
Finally, run the application using the following command
npm run serve
. After the application has started, it will display a URL in the command line interface, typically something like (e.g., http://localhost:8081). Copy this URL and paste it into your default web browser.
-
Open the
Nodejs
sample in Visual Studio Code. -
To install all dependent packages, use the following command
npm install
. -
Then, run the back-end
Node.js
sample using the following commandnode embed.js
. -
Open the
vue
sample in a new window of Visual Studio Code. -
To install all dependent packages, use the following command
npm install
. -
Finally, run the application using the following command
npm run serve
. After the application has started, it will display a URL in the command line interface, typically something like (e.g., http://localhost:8081). Copy this URL and paste it into your default web browser.
NOTE: If the API host is already in use, modify the port number per your preference in embed.js and update that App.vue file.
Please refer to the help documentation to know how to run the sample.
In a real-world application, it is recommended not to store passwords and sensitive information in configuration files for security reasons. Instead, you should consider using a secure application, such as Key Vault, to safeguard your credentials.
Look at the Bold BI Embedding sample to live demo here.
A complete Bold BI Embedding documentation can be found on Bold BI Embedding Help.