Skip to main content

Tutorials

Step-by-step tutorials for specific development tasks on the INVENT platform.

Available Tutorials​

Getting Started​

Creating Widget from Template

Complete 5-step guide for creating your first widget:

  1. Create repository from template
  2. Clone and setup locally
  3. Configure widget settings
  4. Develop and test locally
  5. Deploy to platform

Prerequisites

Development environment setup guide covering:

  • GitLab access and NPM tokens
  • Development tools (VS Code, Git, Node.js)
  • SSH key setup

Comprehensive Guides​

Creating a Widget Tutorial

Complete widget development tutorial covering:

  • Getting started and project structure
  • Dashboard integration
  • Configuration and theming
  • Core features (API, notifications, React Query)
  • Layout and testing
  • Development workflow
  • Deployment
  • Advanced features (OAuth, state sharing, WebSockets)

Code Quality​

Prettier Tutorial

Setting up Prettier for automatic code formatting:

  • Installing Prettier
  • Configuring .prettierrc
  • IDE integration
  • Pre-commit hooks

Authentication​

ProxyLogin Tutorial

Implementing OAuth authentication in widgets:

  • ProxyApp component setup
  • useAuth hook usage
  • proxyCall and apiCall
  • YARP Proxy API integration
  • DAP API integration

Best Practices​

Merge Request Tutorial

Creating and formatting merge requests:

  • Branch naming conventions
  • MR title format
  • Description templates
  • Semantic commit prefixes
  • Adding screenshots and documentation

Tutorial by Topic​

Widget Creation​

TutorialLevelDuration
PrerequisitesBeginner30 min
From TemplateBeginner1 hour
Creating a WidgetIntermediate4-6 hours

Authentication & Security​

TutorialLevelDuration
ProxyLoginIntermediate1-2 hours

Code Quality​

TutorialLevelDuration
Prettier SetupBeginner15 min
Merge RequestBeginner20 min

Reference Documentation​