Sidekick Open Source Live Debugger : Embed Sidekick features to your applications
Tags: node, react, api, devops
Published: 2022-08-31 10:32:21

## Control Sidekick agents from a React & Express application

![](https://miro.medium.com/max/1400/1*XwXOLaa32JGApvsQBlsKAQ.png)

# What is Sidekick?

![](https://miro.medium.com/max/960/0*SauxO0Hs_fS8G4Ex)

Sidekick is an open-source live application debugger that lets you troubleshoot your applications while they keep on running.

Check out Sidekick Open-source repo to learn more:

{% embed https://github.com/runsidekick/sidekick %}

Sidekick agents can be controlled both via a UI from Sidekick Web IDE, Visual Studio Code & IntelliJ IDEA and via a headless approach from REST API & Node.js Client. Sidekick REST API and Node.js client allows developers to control Sidekick actions from their own solutions.

# About the example

We have prepared an example project to show how you can develop a custom application to control your Sidekick agents using Sidekick Node.js Client.

This example consists of 2 parts. First part is a standard web application that we will live debug and the second one is our custom Sidekick control app. Both parts are connected to a self hosted version of Sidekick.

Sidekick Control App that we have build has 2 main features.

## 1 - Putting tracepoints

In the React applicaion you can find 2 buttons that let you put tracepoints to specified locations.

Tracepoints are added via making a call to express server that is running behind. The express server uses the Sidekick client’s putTracepoints function to make an api call to Sidekick REST API.

`
apiClient.putTracepoints(params);
`

## 2 - Listening events

Sidekick client’s onTrigger feature is used to listed activities from Sidekick broker.

`
onTrigger(clientInfo);
`

We have implemented a custom ingest function for tracepoints to send them to the react application using socket.io.

```
function ingestFunc(index) {   
    return async function (data) {   
        console.log(data);   
        io.to(“stack-room”).emit(“stack”, data);   
    };  
}
```

get extra info about Sidekick Node.js client here: [Sidekick Node.js Client](https://www.npmjs.com/package/@runsidekick/sidekick-client)

## Built With

-   React
-   [Express](https://expressjs.com/)
-   [Socket.io](https://github.com/runsidekick/sidekick)
-   [Electron](https://www.electronjs.org/)
-   [Sidekick Node.js Client](https://www.npmjs.com/package/@runsidekick/sidekick-client)
-   [react-json-view](https://www.npmjs.com/package/react-json-view)

# Getting Started

## Prerequisites

-   [Sidekick](https://github.com/runsidekick/sidekick)

Make sure Sidekick broker is running. (check main Sidekick repo)   
If you have changed the default settings, update token and port values in this tutorial accordingly.

Check out our [Quick Start Guide](https://medium.com/p/efc0845a2288).

## Part-1 | Employee System (Main App)

```
# Clone Employee System repository  
git clone [https://github.com/boroskoyo/sidekick-example-employee-management-system](https://github.com/boroskoyo/sidekick-example-employee-management-system)  
# Go into the repository  
cd sidekick-example-employee-management-system  
# Install dependencies  
npm i --legacy-peer-deps  
# Run the app  
npm run start
```

UI will start running at [http://localhost:3000](http://localhost:3000) and backend will be using the port 8081

![](https://miro.medium.com/max/1400/0*lTvLqDifKDoUBIP_.png)

-   `server/index.js` - This is where we include our Sidekick agent. You can edit the agent settings according to your setup and needs.

Agent settings can be seen below:

![](https://miro.medium.com/max/634/0*9PM0Zyky6QGzgjfV.png)

Agent Settings

## Part-2 | Control Application

This is the application we have built to control our Sidekick agent.

```
# Clone control app repository  
git clone https://github.com/boroskoyo/sidekick-electron-quick-start  
# Go into the repository  
cd sidekick-electron-quick-start  
# Install dependencies  
npm i --legacy-peer-deps  
# Run the app  
npm run dev-app
```

You can also run the browser version — http://localhost:5173
```
npm run dev
```

![](https://miro.medium.com/max/1400/0*6IdYgAXncboghsUt.png)

Sidekick Explorer UI

-   `server.js` - Contains the main functions for putting Tracepoint.
-   `params` - This is where we prepare our params for Sidekick API requests for putting tracepoints.

![](https://miro.medium.com/max/530/0*IAk_yhimcHWr83Yb.png)

parameters for tracepoint

-   `filename` - Filname paramters consists of git address of the file and the commit hash.

# Usage

After running all applications. Go to [http://localhost:3000](http://localhost:3000) and check out the employee app. Then use the put tracepoint buttons on the Electron app to put tracepoints on the running application.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jzwd2a1jq5j3i0gtgsj.png)


## Tracepoint Locations:

![](https://miro.medium.com/max/1400/1*0eHmKlJ19ZZpzmGHYnQAtw.png)

###Get Employees (Line 62)

![](https://miro.medium.com/max/1276/0*SCQ_B2qqgQtuSxRE.png)

###Delete Employees (Line 202)

-   Visit the home page and capture stack related to employee list endpoint.
-   Delete an employee to collect related data.
-   Check out Electron app to see your collected events.

You can than further edit those apps to explore Sidekick Client’s features.

# Conclusion

As you can see above, Sidekick clients allow developers to easily use collected data and control Sidekick Actions from third party applications. We are planning to implement Sidekick control plugins for different dashboards and platforms, share your desired targets and feature requests via issues and discussions.

Please let us know your invaluable ideas because they will guide us on our path to discovering the future of application observability. You can get in touch with us through [**Github**](https://github.com/runsidekick/sidekick)[**, Twitter**](https://twitter.com/RunSidekick), and join our [**Discord community**](https://www.runsidekick.com/discord-invitation).

If you liked this article and learn more about [**Sidekick**](https://www.runsidekick.com) you can check out our [docs](https://docs.runsidekick.com/) and start using it right away!

Repo related to this article:
{% embed https://github.com/boroskoyo/sidekick-electron-quick-start %}