Install Yarn npm intall -g yarn 2. install dependencies - yarn 3. To start the project - yarn start

Usage no npm install needed!

<script type="module">
  import 2dd8860C724 from 'https://cdn.skypack.dev/42dd8860-c724';



Getting Started

  1. Install Yarn npm intall -g yarn
  2. install dependencies - yarn
  3. To start the project - yarn start

Building for production

yarn build


We use storybook to develop widgets and components in isolation it also allows us to do visual regression testing of the app

yarn storybook

Storybook: How to view a widget

After starting a storybook with yarn storybook, you will be automatically redirected to the storybook page. On the left side, there is a panel which contains categories with stories (scenarios), the one you want is Widgets. Each widget is in its own separate folder. At the widgets folder root, there is a story called default showing the whole widget.

You can test how the widget behaves using addons which are below the displayed widget (If not visible, press A). In addons you can change the Theme and Knobs (variables used in the story).

Each widget has its own separate components directory containing stories for its components. These stories can be interacted in the same way as the widgets default story with theme and knobs.


yarn prettier


yarn lint

Running tests

yarn test:jest

yarn test:cypress

Bundle analyzing

yarn build --bindleSize

Supported browsers compilation


How to test Dashboard on Local

Due to the nature of the dashboard, with auth, You need to run a mock server: Run yarn mockserver If it complains about port, change it to a new port, maybe 3002, to do this, change all ports in robohydra.conf and development.json to 3002

Then open up a new CLI: Run yarn start And visit http://localhost:3001/domain/dashboard

How to add a new mock to mockserver for websockets

We can take robohydra/api/widgets/seriesDashboard.js and make a copy of it Rename the file according to the widget name and the other file name convention Change the data to mock the response you get, an easy way of doing this is getting a live message, copying it and modifying it Go to robohydra/api/index.js, import the file, add it to the widgets object, and then make an addition to the switch case.

How to test with cypress

Cypress is used for E2E testing, it uses the mockserver. If you are using WSL, make sure you have WSL2 and follow this, https://nickymeuleman.netlify.app/blog/gui-on-wsl2-cypress Always make sure to run XLaunch before yarn test:cypress, and disable access control in the configuration.

How to test with jest

Run yarn test, you can use yarn test -u to update tests.