Running a single web component from your IDE

Below are the steps to run a single web component from your local IDE.

1. Ensure that you have Node.js and npm installed on your system.

   • You can check this by running node -v and npm -v commands on the command line.

   • Ensure these versions are compatible with the framework and the dependency versions you are using.

2. Add a script entry in the package.json. For the sake of this document, let us assume a start command.

   1. Angular:

      • Angular uses Webpack dev server to achieve this.

      • Here is an example which runs the widget on port 4200.

      • If you wish to override the default port, you can extend it with the --port argument. For example, ng serve --disable-host-check --single-bundle --port <desired-port-number>

   2. React:

      • There could be multiple ways of doing it.

      • One such example would be to use react-scripts start.

      • If you use the Vite build tool, you could use vite preview --port <desired-port-number> .

   3. Javascript: For a vanilla JavaScript web component, you could independently install any of the above-mentioned build tools and configure it appropriately.

3. From this point, when you are modifying the code, this would locally re-compile the widget. If the hot module replacement is not refreshing the widget automatically on the dashboard, please refresh it manually to see the changes.

   Hot Module Replacement - Limitations

   Hot Module Replacement (HMR) is a development feature provided by modern JavaScript frameworks and module bundlers (like Webpack, Vite, or Parcel) that allows modules to be updated in a running application without requiring a full reload of the application. However, HMR relies on certain runtime mechanisms, such as WebSocket connections and dynamic script or module loading, which may not work properly across domains even if the Content Security Policy (CSP) is configured to allow these actions.

Running multiple web-components

1. The Developer mode allows only one URL to serve web components from a localhost. This means that the approach described above will not be good enough if you want to run and test multiple custom widgets.

2. The solution is to run a local server on a single port and place each web component in a different folder.

3. See this example on how to set up once such a server for multiple widgets.

Consuming the local custom widget on the Insights dashboard

1. Log in to the Bosch IoT Insights project for which this repository was configured.

2. Choose Add widget from the menu that opens next to the dashboard name.
   → For details, see Adding widgets.

3. On the list of widget types that opens, scroll down to the Custom Widgets area and choose Developer mode.

   

4. On the next screen, select again Developer mode.

   

5. Enter the local URL along with the port number on which your widget is running.

   

6. If a valid widget is running on the provided URL, you will be able to configure the widget's properties as shown below.
   

   

7. You can continue your local development work and use the Refresh button to see your changes reflected on the dashboard.