May I have a webapp/plugin example, please?

[Haimana]

Hello,

I'm trying to transform a plugin into a webapp with configuration plugin, too. (this one: https://github.com/Haimana/signalk-ble-heater.git)
I need a small example of how to make an index.html file (and related js scripts) for passing a variable inside the plugin.
I found some methods to do that, but I am not sure which one is better for running under SignalK.

Thank you for your time,
Seb

[panaaj]

To add the webapp piece, just place your index. html file in a folder named public.

You will also need to ensure you add signalk-app to the keywords in package.json.

For the web app to pass values to the plugin section, the only method at present is to setup an api endpoint in your plugin for the web app to call.

[Haimana]

That api endpoint is my issue :)
So the plugin will act like a server and listen for post calls from frontend?
Something like this?

server.listen(port, () => {
console.log(Server is listening on http://localhost:${port});
});

what port can I use for this? any (available) port? ok, not 80, not 3000 and so on...

thank you

[panaaj]

So the plugin will act like a server and listen for post calls from frontend?

Yes....You can use methods exposed to the plugin by the server.
The hostname:port will be the same as the Signal K server API. (port 3000 by default).

Example: Using Express router:
i.e. http://hostname:port/my-action

module.exports = (app) => {
  const plugin = {
     id: 'my-plugin',
    start: (settings) => {
      ...
      app.get(`/my-action`, (req, res) => {
          ...
         res.status(200).json(response-data)
      })
    },
    stop: () => { ... },
    ...
  }

Example: Using plugin registerWithRouter which creates paths under /plugins/{plugin.id}:
i.e. http://hostname:port/plugins/my-plugin/my-action

module.exports = (app) => {
  const plugin = {
    id: 'my-plugin',
    start: (settings) => {... },
    stop: () => { ... },
    registerWithRouter: (router) => {
      router.post(`/my-action`, (req, res) => {
          ...
         res.status(200).json(response-data)
      })
    }
  }

[Haimana]

thank you, I'll try it and report back

[VladimirKalachikhin]

It doesn't have to be that hard.
First, It is not necessary to make your own responder (app.get....), you can just use own SignalK path.
Second, I personally use a generated js file to pass parameters, and <script src="options.js"></script>.

[Haimana]

Thank you for your reply
For now, I have to leave my "coding talent" in stand-by, I am on boat now, preparing her for the summer. :)
Best regards and fair wind