Getting started4 / 4

Install

Developer mode installs your plugin on your test Hodi, then updates it at every save: Hodi restarts by itself to load it.

What you do

In the preview, your test Hodi's developer mode is on: it shows you a code.
2On the highlighted line, type that code at the end of the command.
3Look at Server › Plugins: Hello world is there, with the In development badge.

Back Finish

1{2  "id": "hello-world",3  "name": "Hello world",4  "version": "0.1.0",5  "api": 2,6  "settings": [7    {8      "key": "greeting",9      "type": "text",10      "default": "Hi"11    }12  ]13}

1import type { ServerPlugin } from '@hodi-app/plugin-sdk/server'23const plugin: ServerPlugin = {4  routes: {5    'POST /hello': async (_request, ctx) => {6      const { greeting } = ctx.settings()7      return { body: { text: `${greeting}!` } }8    }9  }10}1112export default plugin

1import { useState } from 'react'2import {3  Button, SettingRow, definePlugin, usePluginApi4} from 'hodi:sdk'56const HelloCard = () => {7  const api = usePluginApi()8  const [text, setText] = useState('Say hello')9  const sayHello = async () => {10    const response = await api('/hello', { method: 'POST' })11    setText((await response.json()).text)12  }13  return (14    <SettingRow label={text} hint="Your route's answer">15      <Button look="primary" onClick={sayHello}>16        Say hello17      </Button>18    </SettingRow>19  )20}2122definePlugin({ settingsPage: HelloCard })

1$ npx hodi-plugin dev \2    --server http://localhost:3000 \3    --code

45✓ plugin.json6✓ server/index.ts7✓ web/index.tsx8✓ locales/fr.json, locales/en.json910Installed: Hello world 0.1.011Waiting for a change…

PreviewLive

Plugins

What the server admin sees.

DiagnosticReports a badly read article0.2.2

Developer modeCode: 482913On