Skip to main content

Setup

In this section we will create the basic project and add all required dependencies.

Requirements​

  • Node 18+
  • An IDE supporting Typescript and React (This guide will be based on Jetbrains Webstorm, but any other IDE is fine as well)

Project setup​

First install our dashboard-cli globally which is available on npm.

npm install @modbros/dashboard-cli -g

After installing the cli is available via the dashboard-cli command. To create a new project simply run

dashboard-cli generate my-first-widgetpack

then switch to the newly created directory and run 

npm install

to install all the necessary dependencies.

Project structure​

After the cli created the new project, you should have a folder structure like this

my-first-widgetpack
├── node_modules/
├── src/
├── mobro-widget-pack-config.json
└── package.json

node_modules/​

The installed npm packages.

src/​

This folder will hold all the assets and source code for your widget pack.

mobro-widget-pack-config.json​

Required. This holds meta information about the widget pack like it's unique name, a nice name, author, description.

package.json​

Required. Holds the version and other npm related information.

Adapt configuration files​

The first thing we want to do is adapt the information in the mobro-widget-pack-config.json and the package.json files.

mobro-widget-pack-config.json
{
  "name": "mycompany_my_first_widget_pack",
  "displayName": "My First Widget Pack",
  "description": "Includes my first widgets.",
  "author": "My Company"
}

The information in the mobro-widget-pack-config.json will later be visible in the marketplace. So be sure to give them nice descriptions.

caution

The name will be the id of the widget pack in the marketplace and has to be unique.

package.json
{
  "name": "@mycompany/my-first-widget-pack",
  "version": "0.0.1",
  "description": "My first widget pack for MoBro",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

The information in the package.json is for you as a developer. The only exception being the version. This version will also be used when publishing the widget pack to the marketplace.