A repository containing extensions (packages) for Cockpit system.
Cockpit is an interactive server admin interface. It is easy to use and very lightweight. Cockpit interacts directly with the operating system from a real Linux session in a browser.
This repository provides a custom starter to create your own UI package. Run the code in development mode to test the user interface based on the PatternFly UI component library and non-system Cockpit API.
- Node.js >= 18.16.1
- pnpm >= 8.14.1
Install node.js from the official website,
or use nvm
for Linux,
for Windows,
for macOS
Install a modern package manager to manage dependencies and monorepository - pnpm using the command
npm install -g pnpmThe monorepository packages use a number of Cockpit libraries that provide access to internationalization, to the system API and the capabilities of Cockpit as a platform.
Important! In development mode, the capabilities of the Cockpit API are limited. Use a test machine with Cockpit to check the built package.To initialize the Cockpit API, execute the next script in your bash or zsh terminal. (Git bash or WSL for Windows users)
./cockpit.shAfter making changes, you need to start building packages.
You can use next command to run the build of all packages WITHOUT combining them in the root build directory
npm run build:modulesor use command to run the build of all packages WITH combining them in the root build directory
./cockpit-build.shor equal npm command
npm run build:shell- Create a new Vite-based project in the
packagesfolder. And register it in the rootpackage.jsonfile - Import the custom build plugin and configure your vite configuration file
vite.config.js
import CustomizedBuild from '../../plugins/customizedBuild.js';
export default defineConfig({
plugins: [
CustomizedBuild(),
],
base: './',
build: {
minify: true,
target: 'esnext',
assetsDir: 'app',
},
});- Replace the content
index.htmlfile to the content below. Note to the path to your application root file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Script Manager</title>
<!--%CUSTOM_RESOURCES%-->
</head>
<body>
<div id="root"></div>
<!--Import your application root file. Here is "stc/main.tsx"-->
<script src="src/main.tsx" type="module"></script>
</body>
</html>- Create a manifest of your Cockpit Package. Place the
manifest.jsonfile in"packages/YOUR_PACKAGE/public/manifest.json"Learn more about the Cockpit package manifest
Andrey Petrov - @ndt080