sabrina

sabrina is a dashboard server built using express, whose React DOM is dynamically controlled by client POST requests.

⚠️ This project is currently experimental, so you must use at your own risk. It is in no way fit for a production environment.

🔥 Features

⛏️ It's extensible!

• You can configure sabrina to support the visualisation of any React Components.
• Rendered layouts are described using propeteer, so we can specify whatever props you want on rendered components.

⚡ It's asynchronous!

• Using websockets, sabrina will publish all dashboard updates to all client browsers at once.

🔋 It's batteries included!

• sabrina comes pre-packaged with react-mosaic, so you get awesome window management for free.
• It's bundled using parcel, so you know it's fast.

🚀 Getting Started

Using npm:

npm i sabrina

Using yarn:

yarn add sabrina

Breaking Changes

0.1.0-alpha.6

Server configuration options are now specified using an options object, as opposed to a sequence of primitives.

+ sabrina({ /* ui dependencies */ }, {
+   port: 3000,
+   socket: 40510,
+ });
- sabrina({ /* ui dependencies */ }, 3000, 40510);

📌 Usage

In this example, we'll use react-chartjs-2 to render a <Doughnut />. We'll start by importing the server and configuring it to support this kind of component.

import "react-chartjs-2";
import sabrina from "sabrina";

sabrina({
  'react-chartjs-2': ['Doughnut'],
});

When we run our application, it'll by default get published to http://localhost:3000:

$ ./node_modules/.bin/babel-node ./index.js
⚡ Available at http://localhost:3000

Finally, we can start populating our dashboard by making some POST requests to the /pane route, which is used to add new tiled window content to the dashboard. Below, we use axios:

import axios from "axios";

axios({
  headers: {
    "Content-Type": "application/json",
    "Accept": "application/json"
  },
  url: "http://localhost:3000/pane",
  method: "post",
  data: {
    title: "📊 ich bin ein berliner",
    children: {
      _: "Doughnut",
      data: {
        labels: ["How awesome is sabrina?"],
        datasets: [{
          data: [100],
          backgroundColor: [
            "#00FF00",
          ]
        }],
      }
    }
  }
});

And this will publish our new chart data to all connected clients. Simple!

✌️ License

MIT