UI Toolkit React

Disclaimer: Production viable releases are tagged and listed under 'Releases'. All other check-ins should be considered 'in-development' and should not be used in production

The UI Toolkit provides prebuilt, React-based components for integrating remote management features such as a keyboard, video, mouse (KVM) control into a web-based management console UI. The controls have a reference UI and layout that can be customized further to seamlessly integrate with existing management console solutions.

For detailed documentation about Getting Started with the UI Toolkit or other features of the Open AMT Cloud Toolkit, see the docs.

Prerequisites

To succesfully deploy the UI Toolkit using React, the following software must be installed on your development system:

• Node.js* LTS 18.x.x or newer
• git
• Visual Studio Code or any other IDE of choice

Create a New React App

The React app can be created in any preferred development directory. The MPS can continue to run while creating and running the app.

1. In a Command Prompt or Terminal, go to your preferred development directory.

2. Run the following commands to create sample React app named my-app.

   npx create-react-app my-app && cd my-app

Add UI Toolkit

1. Run the following command to add the UI Toolkit and install the required dependencies:

   npm install @open-amt-cloud-toolkit/ui-toolkit-react

2. Run the following commands to start the web UI locally:

   npm start

3. By default, React apps run on port 3000. If port 3000 is already used by the MPS server or any other application, you'll be prompted to use another port. If this happens, enter 'Y'.

   Sample Output:

   You can now view my-app in the browser.
   Local: http://localhost:3000
   On Your Network: http://172.16.17.4:3000
   

Additional Resources

• For detailed documentation and Getting Started, visit the docs site.

• Looking to contribute? Find more information here about contribution guidelines and practices.

• Find a bug? Or have ideas for new features? Open a new Issue.

• Need additional support or want to get the latest news and events about Open AMT? Connect with the team directly through Discord.

  

License Note

If you are distributing the FortAwesome Icons, please provide attribution to the source per the CC-by 4.0 license obligations.