How to Embed Bold BI Dashboard Using Vue.js with Node.js deployed in AWS Lambda?

This article offers a detailed guide on JavaScript Embedding using Vue.js with Node.js deployed in AWS Lambda. In this demonstration, Vue.js serves as the front end, while AWS Lambda hosts the Node.js application acts as the back end. For further information on JavaScript embedding, it is advisable to consult the help documentation before proceeding with the embedding of the Bold BI dashboard in Vue.js using AWS Lambda.

Prerequisites

1. Vue.js and Node.js Application: Download the sample application from GitHub.
2. Bold BI Application: Ensure that the Bold BI application is hosted and embed authentication is enabled in the embed settings.

Configuration Steps

1. Enable Embed Authentication:
   • Navigate to the embed settings page in the Bold BI application and ensure that embed authentication is enabled. Refer to the documentation for detailed instructions.
     
     
2. Download Embed Configuration:
   • Download the embedConfig.json file. For guidance, refer to the provided documentation or images.
     
     
3. Place Configuration File:
   • Copy the downloaded embedConfig.json file to the designated location within the application: sample/Nodejs/embedConfig.json.
     

Deploying the Node.js Application in AWS Lambda

1. Edit Serverless Configuration:

   • Open the serverless.yml file and specify the service name and region for deployment.
     

2. Install Serverless Framework:

   • Open the terminal and run the command:

     npm install -g serverless
     

3. Configure AWS Credentials:

   • Use the command below to configure AWS credentials:

     serverless config credentials --provider aws --key <PUBLIC_KEY> --secret <SECRET_KEY>
     

   • For instructions on obtaining these keys, refer to the documentation on creating an IAM user.

4. Install Required Packages:

   • Run the following command to install the necessary NPM packages:

     npm install
     

5. Initialize NPM:

   • Initialize the NPM processes with:

     npm init -y
     

     

6. Install Serverless Packages:

   • Install the required serverless packages:

     npm install --save express serverless-http
     

     

7. Deploy the Application:

   • Deploy the application using:

     serverless deploy
     

     
   • After deployment, you can browse the endpoints.
     
     

Running the Vue.js Application

1. Set API Host:

   • Copy the backend application URL (e.g., https://l9kuk9k0k.execute-api.eu-east-1.amazonaws.com/dev) and set it as the value for ApiHost in the App.vue file.
     

2. Install NPM Packages:

   • Run the command:

     npm install
     

3. Run the Application:

   • Start the application with:

     npm run serve
     

     

Enabling CORS in AWS Lambda

To enable CORS in AWS Lambda, refer to the official documentation: Enable CORS in AWS Lambda.

Note

Lambda functions can only access AWS resources and external resources over the internet, not resources running on your local machine. It is recommended to utilize the Bold BI hosted site for embedding through AWS Lambda. Additionally, here, Vue.js with AWS lambda is demonstrated to embed, but instead of Vue.js other front-end applications can be used to embed. Please refer to the Bold BI help documentation, which list the JavaScript Embedding samples currently we have support.

Additional References

• Bold BI Documentation
• AWS Lambda Documentation