Run and Test Locally

During development, MoBro loads the widget pack directly from your project directory and rebuilds it on every change.

Starting the Development Mode

Make sure MoBro is running, then run the following command in the root directory of the project:

dashboard-cli dev

The CLI then:

1. Validates the mobro-widget-pack-config.json and all mobro-widget-config.json files. If a file is invalid, the CLI prints the validation errors and stops.
2. Registers the project directory with MoBro. MoBro builds the widget pack right away.
3. Watches the src/ directory. Whenever a file is added, changed or deleted, the CLI tells MoBro to rebuild the widget pack.

Open the dashboard builder in MoBro. Your widget pack is listed with all other widget packs and marked as being in development. Add the Text widget to a dashboard, and it shows the text "Text".

Change the text in Text.tsx and save the file. MoBro rebuilds the widget pack, and the dashboard shows the new text. While MoBro builds the widget pack, dashboards show a loading overlay. If the build fails, the dashboard shows the build errors.

To stop the development mode, press Ctrl+C. The CLI then unregisters the project directory from MoBro.

caution

• The CLI only validates the configuration files when starting. After changing a mobro-widget-config.json in an invalid way, restart dashboard-cli dev to see the validation errors.
• Changes to the mobro-widget-pack-config.json are not watched, since it's located outside the src/ directory. Restart dashboard-cli dev after changing it.

Type Checking

MoBro only transpiles the TypeScript code and doesn't check the types, so type errors don't fail the build. Check the types of your widget pack using the typecheck script of the project:

npm run typecheck

Troubleshooting

Problem	Solution
Could not register at MoBro, is it running?	Start MoBro. The CLI and MoBro must run on the same machine.
Widget pack config does not match the necessary schema	Fix the reported errors in the mobro-widget-pack-config.json, see Widget Pack Configuration.
Widget config does not match the necessary schema	Fix the reported errors in the named mobro-widget-config.json, see Widget Configuration.
A widget doesn't show up in the dashboard builder	Check that the configuration file is named exactly mobro-widget-config.json and located within src/.
The widget can't be rendered	Check that the filename in the widget configuration is correct, and that the component is the default export.
An import of an npm package fails	Only the packages provided by MoBro can be used.

With the widget pack running in MoBro, let's make the widget configurable next.