Your First Extension#
We recommend to always use Yeoman generator for Lens Extension to start new extension project. Read the generator guide here.
If you want to setup the project manually, please continue reading.
In this topic, you'll learn the basics of building extensions by creating an extension that adds a "Hello World" page to a cluster menu.
Install the Extension#
To install the extension, clone the Lens Extension samples repository to your local machine:
git clone https://github.com/lensapp/lens-extension-samples.git
Next you need to create a symlink.
A symlink connects the directory that Lens will monitor for user-installed extensions to the sample extension.
In this case the sample extension is
Linux & macOS#
mkdir -p ~/.k8slens/extensions cd ~/.k8slens/extensions ln -s lens-extension-samples/helloworld-sample helloworld-sample
Create the directory that Lens will monitor for user-installed extensions:
mkdir C:\Users\<user>\.k8slens\extensions -force cd C:\Users\<user>\.k8slens\extensions
If you have administrator rights, you can create symlink to the sample extension – in this case
cmd /c mklink /D helloworld-sample lens-extension-samples\helloworld-sample
Without administrator rights, you need to copy the extensions sample directory into
Copy-Item 'lens-extension-samples\helloworld-sample' 'C:\Users\<user>\.k8slens\extensions\helloworld-sample'
Build the Extension#
To build the extension you can use
make or run the
npm commands manually:
cd <lens-extension-samples directory>/helloworld-sample make build
To run the
npm commands, enter:
cd <lens-extension-samples directory>/helloworld-sample npm install npm run build
Optionally, automatically rebuild the extension by watching for changes to the source code. To do so, enter:
cd <lens-extension-samples directory>/helloworld-sample npm run dev
You must restart Lens for the extension to load. After this initial restart, reload Lens and it will automatically pick up changes any time the extension rebuilds.
With Lens running, either connect to an existing cluster or create a new one - refer to the latest Lens Documentation for details on how to add a cluster in Lens IDE. You will see the "Hello World" page in the left-side cluster menu.
Develop the Extension#
Finally, you'll make a change to the message that our Hello World sample extension displays:
- Navigate to
page.tsx, change the message from
Hello Lens Extensions.
- Rebuild the extension. If you used
npm run dev, the extension will rebuild automatically.
- Reload the Lens window.
- Click on the Hello World page.
- The updated message will appear.
In the next topic, we'll take a closer look at the source code of our Hello World sample.
You can find the source code for this tutorial at: lensapp/lens-extension-samples. Extension Guides contains additional samples.