Relatude Help

The development loop

Start the dev server and leave it running:

npm run dev
  Plugin  http://localhost:5180/index.js
  Open the CMS with ?plugin=http://localhost:5180/index.js

  It reloads each time the plugin is built again. Ctrl+C to stop.

npm run dev runs relatude-plugin dev from @relatude/plugin-kit. It builds the plugin with the project's Vite config, builds it again on every save, and serves it on port 5180, or the next free port. Open your site's CMS with that address in ?plugin=, and add &dev for the interface's development build (Debugging):

https://localhost:5001/relatude.cms/?plugin=http://localhost:5180/index.js&dev

Sign in, and Stock is in the menu. Settings → Plugins lists the plugin with the source Page address. From now on:

  • Save a file, and the page reloads with the new build and the same blades open. If a blade has unsaved changes, a toast offers Reload instead.
  • A failed build shows a toast with the file, line and reason, and the whole error in the terminal. The last good build is still served.
  • Several plugins load together when you repeat plugin= for each.
  • A plugin in the address replaces one the site loads under the same name, so you can work on a site's own plugin where it runs.
  • Only plugins on your computer can be named in ?plugin=: localhost, 127.0.0.1 or [::1]. Otherwise a link could run someone else's code with your rights. Settings → Plugins → Add plugin from URL loads a plugin from any address, in your browser only.
npm run dev -- --port 5190                                  # serve on another port
npm run dev -- --cms https://localhost:5001/relatude.cms/   # also print the link to open

The environment variable RELATUDE_CMS does the same as --cms. Use npm run dev, not npx vite: Vite's dev server serves modules that import their own React, and the plugin's hooks fail.