This repository contains a demonstration of integrating an OpenMCT instance within a React.js web application. The integration allows you to easily embed OpenMCT widgets within a React application and leverage the features of both libraries.
OpenMCT is a web-based mission control framework that provides a customizable dashboard for visualizing telemetry data. React, on the other hand, is a popular JavaScript library for building user interfaces. By combining the two libraries, you can create powerful applications that display telemetry data in real-time.
This demo includes a simple web application built with React and OpenMCT, using the Vite bundler and basic styling with Tailwind CSS. The application includes a server built with Express.js and websockets for telemetry data, based on the OpenMCT tutorials.
To use this demo, follow these steps:
Make sure that NodeJS and npm package managers are installed.
- Clone the repository and install dependencies
git clone https://github.com/mmany/openmct-react
cd openmct-react
npm install
- Start the telemetry server
node telemetryServer/server.js
The telemetry server should be running on port 8080.
- Start the React app on a separate terminal
npm run dev
The web app should be running on port 5173 by default and can be accessed at http://localhost:5173/.
To customize the demo, you can modify the telemetry data or change the styling. The telemetry data is generated by the telemetryServer/server.js file, which sends data over a websocket to the React app. You can modify this file to send different telemetry data or use a different data source.
The styling for the React app is based on Tailwind CSS, and can be modified by editing the tailwind.config.js file or creating a custom CSS file.
If you have any suggestions or remarks on the methodology used for the integration of OpenMCT with React, we welcome your feedback. To contribute, please open an issue or submit a pull request.
I hope you find this demo useful, and feel free to use it as a starting point for your own projects.