pulsar-express, a web interface for Apache Pulsar
Tags: apache, pulsar, web, interface
Published: 2020-01-17 10:27:40


In this article, I am going to present you one of my side project: [pulsar-express](https://github.com/bbonnin/pulsar-express).

Pulsar-express aims to be a simple web application that allow the users to see informations about their [Apache Pulsar](https://pulsar.apache.org/) clusters.

My initial goal was to provide something very simple (too much, maybe), easy to install, configure and run, and this article will show you these steps.


## Install and run it

There are several ways to use `pulsar-express`:
* By cloning the projet and running it locally (see `Development` section)
* By running a docker image: `docker run -it -p 3000:3000 bbonnin/pulsar-express`
  * You can set a connection url in the command: `docker run -it -p 3000:3000 -e PE_CONNECTION_URL=http://host.docker.internal:8080 bbonnin/pulsar-express`
  * Important: the calls to the Pulsar API are done on server side (i.e. from the container), so your Pulsar must be reachable from the container (do not use localhost :)). A solution: you can add `--network=host` to the command line (but, it's only working on Linux...)
* By installing it using `npm`

```bash
# Install it globally
$ npm install pulsar-express -g

# Start it
$ pulsar-express

        ╭────────────────╮
        │ PULSAR EXPRESS │
        ╰────────────────╯

        => Open http://localhost:3000


# Start it on a specific port
$ PORT=8000 pulsar-express

        ╭────────────────╮
        │ PULSAR EXPRESS │
        ╰────────────────╯

        => Open http://localhost:8000

```

If you want to configure connections (to be available to all users), you can:
* Create a json file with the connections:
```json
[
  { "name": "test cluster", 
     "url": "http://test-cluster-host:8080" },
  
  { "name": "integration cluster", 
     "url": "http://int-cluster-host:8080", 
     "token": "<YOUR_TOKEN>" },
  
  { "name": "prod cluster", 
     "url": "http://prod-cluster-host:8080", 
     "fctWorkerUrl": "http://prod-fct-worker-cluster-host:6750",
     "token": "<YOUR_TOKEN>" },
]
```
* and set the env variable `PE_CONFIG_FILE`
```bash
export PE_CONFIG_FILE=/path/to/my/config.json
```
* Or you can also set a connection URL
```bash
export PE_CONNECTION_URL=http://pulsar-host:8080

# Without a name, the url will be used (hostname:port),
# Or you can set a name:
export PE_CONNECTION_NAME=my-pulsar

# A token if needed:
export PE_CONNECTION_TOKEN=<YOUR_TOKEN>
```

> For a detailed explication about the security configuration, checkout the [README of the project](https://github.com/bbonnin/pulsar-express).


From there, you can connect with your browser to the url above !

![Pulsar express home](https://thepracticaldev.s3.amazonaws.com/i/bat9r9ybqcyhisay0qzp.png)


## Quick start

If you haven't defined a connection at startup, the first step is to go the `Connections` page and add a new connection. These connections are stored on client side (localstorage of your browser)

![Pulsar express connections](https://thepracticaldev.s3.amazonaws.com/i/umql9q4b7wjlkecnq6n9.png)

### Overview

In this page, you can see some basic informations about your clusters.

![Pulsar express overview](https://thepracticaldev.s3.amazonaws.com/i/ijz6kyn3x4jesiccbgak.png)


### Clusters

Informations about the clusters (URL, ...). You can update some informations.

![Pulsar express clusters](https://thepracticaldev.s3.amazonaws.com/i/3ooub2h640luns6x3yu7.png)


### Tenants

Informations about the tenants.

![Pulsar express tenants](https://thepracticaldev.s3.amazonaws.com/i/p2rg4qjgddciqqu2ntkr.png)

In this page, you can also create a tenant.


### Namespaces

Informations about the namespaces:

![Pulsar express namespaces](https://thepracticaldev.s3.amazonaws.com/i/9pq471i49ca0an966jeh.png)

In this page, you can also create a namespace.


### Topics

Informations about the topics:
![Pulsar express topics](https://thepracticaldev.s3.amazonaws.com/i/zif8qg5y83pqgrta0xsr.png)

In this page, you can also create a topic.


Details about a topic:

![Pulsar express topics](https://thepracticaldev.s3.amazonaws.com/i/o72k2dw5xa9bjrnyn7cz.png)


### Functions

Informations about the functions:

![Pulsar express functions](https://thepracticaldev.s3.amazonaws.com/i/t4qq7uqzivtaqwen2uzw.png)

Details about a function:

![Pulsar express function](https://thepracticaldev.s3.amazonaws.com/i/4cur9hvd86adzpppjejg.png)



## Development

The repository of the app is: https://github.com/bbonnin/pulsar-express.

This app has been developed with [Nuxt.js](https://nuxtjs.org).

``` bash
# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start
```

For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).

For Docker:
* Build: `npm run docker-build`
* Test locally: `npm run docker-run`
* Tag: `docker tag pulsar-express USER/pulsar-express:VERSION`
* Publish: `docker push USER/pulsar-express:VERSION`


## Conclusion

There is still a lot to be done to get a fully functional application.
If you are interested in the project, feel free to participate in the development of the application.


Cover photo by [Lerone Pieters](https://unsplash.com/@thevantagepoint718) on Unsplash