SPR custom plugin with ui template

This is a sample plugin for spr, including:

• basic api
• frontend for the api
• build for docker-compose and Dockerfile

Steps to create a new plugin

• clone this repo
• name your plugin
• edit plugin.json

Build

test a local build of your plugin in docker:

export DOCKER_BUILDKIT=1
docker-compose build
mkdir -p state/plugins/sample_plugin
docker-compose up -d
curl --unix-socket ./state/plugins/sample_plugin/socket http://localhost/test
curl --unix-socket ./state/plugins/sample_plugin/socket http://localhost/index.html

Frontend - UI Code

The ui for custom plugins use create-react-app & glustack, see deps. Check Dockerfile if you want to dev in docker.

REACT_APP_TOKEN= REACT_APP_API= PORT=8080 npm start

Visit http:localhost:8080 or click Start dev mode under Custom Plugin (under System -> Plugins) in SPR ui.

Read more in the API documentation.

NOTE need to pass a token if you want to talk to the spr api from your plugin in dev mode. Add a token in the spr ui under System -> Auth and pass it with REACT_APP_TOKEN environment variable. Define SPR API url using the REACT_APP_API environment variable.

Dev mode

export REACT_APP_TOKEN="SPR-TOKEN-HERE"
export REACT_APP_API="http://spr.local" # SPR IP
PORT=8080 npm start

The ui will setup a connection to provided API using the token for auth. These will be populated automatically for your plugin when built, make sure there are no hardcoded URL's or tokens in your repo.

Docker version in Dev mode with token

docker build -t spr-plugin-ui:latest .
export REACT_APP_TOKEN="SPR-TOKEN-HERE"
export REACT_APP_API="http://spr.local"
docker run --rm -ti -p 8080:3000 -e "REACT_APP_TOKEN=$REACT_APP_TOKEN" spr-plugin-ui

In SPR ui navigate to Plugins, press Custom Plugin & connect to verify.

Dev mode with spr on localhost

export REACT_APP_API="http://localhost:8000"
export REACT_APP_TOKEN="SPR-TOKEN-HERE"
PORT=8080 npm start

Build

npm run build

when everything is done & work, push it to spr plugin repo

Install

Drop the github repo url into "Add Plugin from URL" view under Plugins.

Examples

How to get a list of all devices from ui in my plugin?

import { api } from './API'
//...
let devices = await api.get('/devices')
console.log('devices=', devices)

See example in src/examples:

• Status
• List Devices

TODO

• show complete flow for building a plugin, including ui
• add another sample repo with js only

building in plugin directory should also take care of ui, smtg like this:

if [ -d "frontend"]; pushd frontend && npm run build && popd && cp -a frontend/build web; fi

(but use a separate Dockerfile for this)

for building/serving plugin web code:

• docker build will use build Dockerfile here & run npm run build web ui into plugin web/
• on fs: plugins/plugin-x/web - same for web
• this is linked from plugin json config, set key Web: true
• web ui bundle is served @ /plugins/plugin-x/web as static