kirbyup

Appearance

Getting Started ​

This guide will walk you through the steps to get started with kirbyup.

Prerequisites ​

Node.js and npm (or another package manager like pnpm) are required to use kirbyup.

TIP

If you want to skip starting from scratch, pick one of the following starters:

The last two examples are based on the default pluginkit and include ESLint to find bugs in your code. This will help you write cleaner code and avoid common JavaScript or Vue pitfalls and thus provide a better developer experience. The Tailwind CSS example includes Tailwind CSS to style your Panel plugin.

Installation ​

Use a package manager of your choice to install kirbyup as a development dependency:

bash
pnpm add -D kirbyup
bash
yarn add -D kirbyup
bash
npm install -D kirbyup

Having installed kirbyup, you can add the following scripts as shortcuts to the commands you will use most often:

json
{
  "scripts": {
    "dev": "kirbyup serve src/index.js",
    "build": "kirbyup src/index.js"
  },
  "devDependencies": {
    "kirbyup": "^3.4.0"
  }
}

Without the Installation Step ​

If you want to use kirbyup right away and don't want to track it as a dependency in your project, simply call it with npx:

json
{
  "scripts": {
    "dev": "npx -y kirbyup serve src/index.js",
    "build": "npx -y kirbyup src/index.js"
  }
}

INFO

npx may cache a certain version of kirbyup. If npx doesn't use the latest kirbyup version, run npx -y kirbyup@latest instead or delete the ~/.npm/_npx cache folder. Because of the caching, it's recommended to install kirbyup as a development dependency.

Usage ​

kirbyup provides a CLI to build and serve your Panel plugin. It uses Vite under the hood, so you can use all of Vite's features.

Development ​

Start a development server for the Panel plugin:

bash
npm run dev
# Which will run:
# kirbyup serve src/index.js

The terminal will output the port the server is running on, e.g. 5177:

kirbyup v3.4.0
ℹ Starting development server...
✔ Server is listening on :5177

This creates ./index.dev.mjs, telling Kirby to load the development version of the plugin from the dev server started by kirbyup serve when the Panel is opened. The serve command provides hot module replacement and auto-reload.

If you prefer the watch mode to build a development bundle of the final Panel plugin or develop in an older version of Kirby (prior to 3.7.4), run:

bash
npx kirbyup src/index.js --watch

Production ​

To compile the final Panel plugin for production, run:

bash
npm run build
# Which will run:
# kirbyup src/index.js

The terminal will output the path to the bundled and minified plugin assets:

kirbyup v3.4.0
◐ Building src/index.js
./index.js   22.27 kB / gzip: 8.79 KiB
./index.css  0.30 kB / gzip: 0.17 KiB
✔ Build successful