Contribute to widgets

Overview

Landing Zone widgets are modular, reusable web components that appear on the Console post-login dashboard. Each widget provides specific functionality or displays information from connected product portals.

Widgets are built using Lit as web components and bundled into a distributable package.

📚 For detailed development instructions, code examples, and best practices, see the Widget Repository README.

Technology stack

• Lit - Web component framework
• TypeScript - Type-safe development
• SGDS Web Components - Singapore Government Design System

Quick start

1. Set up the repository

git clone https://sgts.gitlab-dedicated.com/wog/gvt/devportal/dev-console/dev-console-landingzone-widgets
cd dev-console-landingzone-widgets
pnpm installCopy to clipboardErrorCopied

2. Generate a new widget

pnpm run init <widget-name> <api-path>Copy to clipboardErrorCopied

Example:

pnpm run init my-widget https://api.example.com/dataCopy to clipboardErrorCopied

3. Develop and test

pnpm run devCopy to clipboardErrorCopied

Visit http://localhost:8000 to test your widget.

4. Submit your contribution

pnpm run lint
pnpm run format
pnpm run testCopy to clipboardErrorCopied

Commit your changes and raise a Merge Request.

5. API connectivity configuration (optional)

If your widget requires API calls to backend services, you need to configure Console’s NGINX routing to add your API server entry.

📋 See Console Portal Integration - NGINX Configuration for detailed instructions on setting up API routing.

Documentation

• Widget Repository README - Complete guide with examples
• Lit Documentation
• SGDS Components

Support

Need help or have questions? Contact the Console team:

Slack: #console

Next steps

Visit the Widget Repository for:

• Detailed setup instructions
• Component architecture patterns
• Testing guidelines
• Deployment process
• Troubleshooting tips
• Code examples