Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cawfree/sabrina
✨ Asynchronous dashboard magic!
https://github.com/cawfree/sabrina
api dashboard dynamic express react websockets
Last synced: 12 days ago
JSON representation
✨ Asynchronous dashboard magic!
- Host: GitHub
- URL: https://github.com/cawfree/sabrina
- Owner: cawfree
- License: mit
- Created: 2020-02-15T17:10:50.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-02-18T12:00:21.000Z (over 4 years ago)
- Last Synced: 2024-09-18T09:12:00.910Z (2 months ago)
- Topics: api, dashboard, dynamic, express, react, websockets
- Language: JavaScript
- Homepage:
- Size: 272 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sabrina
sabrina is a dashboard server built using [express](https://github.com/expressjs/express), whose [React](https://github.com/facebook/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](https://reactjs.org/docs/react-component.html).
- Rendered layouts are described using [propeteer](https://github.com/cawfree/propeteer), so we can specify whatever [props](https://reactjs.org/docs/components-and-props.html) you want on rendered components.
⚡ **It's asynchronous!**
- Using [websockets](https://github.com/websockets/ws), sabrina will publish all dashboard updates to all client browsers at once.
🔋 **It's batteries included!**
- sabrina comes pre-packaged with [react-mosaic](https://github.com/nomcopter/react-mosaic), so you get _awesome_ window management for free.
- It's bundled using [parcel](https://github.com/parcel-bundler/parcel), so you _know_ it's fast.
## 🚀 Getting Started
Using [`npm`]():
```bash
npm i sabrina
```
Using [`yarn`]():
```bash
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.
```diff
+ sabrina({ /* ui dependencies */ }, {
+ port: 3000,
+ socket: 40510,
+ });
- sabrina({ /* ui dependencies */ }, 3000, 40510);
```
## 📌 Usage
In this example, we'll use [react-chartjs-2](https://github.com/jerairrest/react-chartjs-2) to render a [``](https://www.chartjs.org/docs/latest/charts/doughnut.html). We'll start by importing the server and configuring it to support this kind of component.
```javascript
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](http://localhost:3000):
```shell
$ ./node_modules/.bin/babel-node ./index.js
⚡ Available at http://localhost:3000
```
Finally, we can start populating our dashboard by making some [`POST`](https://en.wikipedia.org/wiki/POST_(HTTP)) requests to the `/pane` [route](https://expressjs.com/en/guide/routing.html), which is used to add new tiled window content to the dashboard. Below, we use [`axios`](https://github.com/axios/axios):
```javascript
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](https://opensource.org/licenses/MIT)
