Skip to content

Quickstart - Bundle CIRA Config Control

This document shows how to:

  • Run the CIRA Config control in development enviroment
  • Create a bundle for CIRA Config control
  • Add bundle to a sample HTML file

Prerequisites

In order to deploy and make changes, the following tools and application has to be installed on your development machine

Download and Install UI Toolkit

  1. Open a Terminal (Linux) or Command Prompt (Windows) and navigate to a directory of your choice for development.

  2. Clone the UI Toolkit Repository. 

    git clone https://github.com/open-amt-cloud-toolkit/ui-toolkit#v1.2.0

  3. Change to the ui-toolkit directory. 

    cd ui_toolkit

  4. Install the dependencies. 

    npm install

Run in Development Environment

To add and test new changes before bundling the control, use a webpack dev server.

  1. Start the server. 

    npm start

  2. Open a Chrome* browser and navigate to the following link to see changes. 

    http://localhost:8082/cira.htm?rpsServer=https://[RPS-Server-IP-Address]:8080

    Note

    By default, the webpack dev server runs on port 8080. If port 8080 is already in use, webpack automatically runs on the next immediate available port.

Create Bundle

  1. To bundle, navigate to the ui-toolkit directory in a Terminal (Linux) or Command Prompt (Windows).

  2. Remove or rename the existing cira.core.min.js in the ui-toolkit/dist/ directory before building.

  3. Build the bundle. 

    npm run build

    A new cira.core.min.js will be created in the ui-toolkit/dist/ directory.

    Note

    To bundle the KVM control without node_modules, run the following build command instead. 

    npm run built-ext
    The bundle generated using the build-ext command can be used in react apps as an independent control

Add to Sample HTML Page

  1. Add the following code snippet to sampleCIRA.htm in the ui-toolkit/src/sample/ directory using an editor of your choice.

        <body>
        <div id="ciraroot"></div>
        <script src="../../dist/cira.core.min.js" crossorigin></script>
    </body>

  2. In a Terminal (Linux) or Command Prompt (Windows), navigate to the ui-toolkit directory.

  3. Serve the HTML page. 

    npx serve

  4. Open a new Chrome* browser and navigate to the following URL: 

    http://localhost:5000/src/sample/sampleCIRA.htm?rpsServer=https://[RPS-Server-IP-Address]:8080