TPSentinel LogoTPSentinel

Example App

Walk through the Sentinel example app built with core and UI packages

Example App

The example app lives in testpress/sentinel-js-example.

It is a minimal React + TypeScript app that integrates both:

  • @testpress/sentinel-core
  • @testpress/sentinel-ui

Install the packages

The demo app installs both SDK packages directly:

{
  "dependencies": {
    "@testpress/sentinel-core": "1.0.3",
    "@testpress/sentinel-ui": "1.0.0"
  }
}

Create Sentinel from app config

The app reads orgCode, sessionId, and token, then creates the core and UI instances.

import { TPSentinel } from '@testpress/sentinel-core'
import { TPSentinelUI } from '@testpress/sentinel-ui'

const sentinel = TPSentinel.create({
  orgCode: config.orgCode,
  sessionId: config.sessionId,
  token: config.token,
})

Start the UI

The demo creates the default UI with the Sentinel instance and starts it.

const sentinelUI = TPSentinelUI.create({
  sentinel,
  config: {
    theme: 'system',
    setup: {
      showCancelButton: true,
      onCancel: () => {
        console.log('Setup cancelled')
      },
    },
    sessionMonitor: {
      position: 'top-right',
      enableMinimize: true,
    },
  },
})

await sentinelUI.start()

Listen to the public event stream

The app subscribes to state changes and public SDK events for debugging.

const unsubscribeState = sentinel.onStateChanged(state => {
  setSessionState(state)
})

const unsubscribe = sentinel.on('*', (eventName, payload) => {
  addLog(eventName, payload)
})

What the example is good for

Use this app when you want to:

  • test real session credentials quickly
  • inspect the event stream during setup and runtime
  • see a working TPSentinelUI integration in a browser app

Configuration

Reference for TPSentinel.create options

On this page

Example AppInstall the packagesCreate Sentinel from app configStart the UIListen to the public event streamWhat the example is good for