Widget Development Overview

Widget development on the INVENT platform involves creating single-page applications (SPAs) using React that integrate with the platform's Dashboard Composer and utilize platform APIs.

Getting Started

For a comprehensive guide to widget development, see the Creating a Widget Tutorial, which covers:

• Setting up your development environment
• Creating widgets from the template
• Understanding widget architecture
• Implementing platform features
• Testing and deployment

Quick Start

Standalone Development Mode

For quick iteration without platform integration:

$ git clone widget-repo-name
$ cd widget-repo-name
$ npm i
$ npm run dev

Your widget will be accessible at http://localhost:5*{gitlabRepoId}*

Learn more: Development Workflow → Local Development

Integration Mode with Platform

To test your widget with full platform integration:

$ npm run start_federation

Then connect your local widget to a portal environment:

Learn more: Development Workflow → Connecting to Portal

Available NPM Scripts

All scripts are defined in package.json:

Script	Description
dev	Build and run widget in standalone mode
build	Build project for standalone deployment
build_federation	Build project with Module Federation support
start_federation	Start local development server with HMR and platform API
test	Run unit tests
test_cov	Run tests with coverage report
analyze	Run webpack bundle analyzer
lint	Apply ESLint
lint:css	Apply stylelint
format	Apply Prettier formatting
semantic-release	CI command for automatic versioning
postinstall	Run post-install scripts
pre-commit	Run pre-commit hooks

Learn more:

• Semantic Versioning
• Code Style
• Bundle Analysis

Development Best Practices

1. Configure IDE Formatting

   • Enable ESLint and Prettier in your IDE
   • Use provided .eslintrc and .prettierrc configurations
   • Enable format-on-save for consistency

2. Test Locally First

   • Use standalone mode (npm run dev) for rapid development
   • Test with federation mode (npm run start_federation) before creating MR
   • Connect to portal for integration testing

3. Follow Code Standards

   • Run npm run lint before committing
   • Run npm run format to auto-format code
   • Pre-commit hooks will enforce standards

4. Monitor Bundle Size

   • Run npm run analyze to visualize bundle composition
   • Keep main bundle under 200KB (gzipped)
   • Lazy load heavy dependencies when possible

Related Documentation

• Creating a Widget Tutorial - Complete widget development guide
• Development Workflow - Local development and debugging
• Module Federation - Understanding widget loading
• Widget Launch Types - Dev vs federation mode details
• Deployment - Release and deployment process