TeamCity Plugin Development Help
 

SPA UI Plugins

Edit page Last modified: 04 January 2023

This guide explains how to create a Single-page Application (SPA) React plugin based on the new front-end extensions paradigm.

Source branch with an example project (FlowJS): example/react-plugin.

Source branch with an example project (TypeScript): example/react-plugin-typescript.

Nowadays, modern JavaScript frameworks like Angular or libraries like React are dominating in the web development, especially if you write rich applications or Single Page Applications. They help developers to concentrate on a business logic – not on the code itself; they take care of the performance and, generally, make the development easier.

In TeamCity, we use React. Every component in the Sakura UI is a React component. Moreover, many components in the classic UI are the same React components but aged visually for UI/UX consistency.

Similarly to a building process, we build the UI using small panels and bricks called components. Our components are based on the Ring UI library. We compose library components to build our UI.

Starting from TeamCity 2020.2 we share our "bricks". We expose some of our internal components and give an opportunity to use the Ring UI library in plugins, as well, as other React UI kits. Therefore, if you decide to develop your UI plugin with React, there is no needing to stylize your own buttons or dialogs – you can reuse the components we use ourselves.