hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Updates to first extensions doc

Browse Source 
Fixes issue #1200

Signed-off-by: Steve Richards <srichards@mirantis.com>
This commit is contained in:
Steve Richards 2020-11-03 09:03:06 +00:00
parent 13ba557bc6
commit 9c073a88b9
1 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/extensions/get-started/your-first-extension.md
View File

@ -4,40 +4,56 @@ In this topic, we'll teach you the fundamental concepts for building extensions.
## Installing and Building the extension
Simple Lens extension that adds "hello-world" page to a cluster menu.
Simple Lens extension that adds "Hello World" page to a cluster menu.
### Linux
First you will need to clone the [Lens Extension samples](https://github.com/lensapp/lens-extension-samples) repository to your local machine:
```sh
git clone https://github.com/lensapp/lens-extension-samples.git
```
Next you need to create a symlink from the directory that Lens will monitor for user installed extensions to the sample extension, in this case **helloworld-sample**:
```sh
mkdir -p ~/.k8slens/extensions
git clone https://github.com/lensapp/lens-extension-samples.git
cp -pr lens-extension-samples/helloworld-sample ~/.k8slens/extensions
cd ~/.k8slens/extensions
ln -s <lens-extension-samples directory>/helloworld-sample helloworld-sample
```
To build the extension you can use `make` or run the `npm` commands manually:
```sh
cd ~/.k8slens/extensions/helloworld-sample
cd <lens-extension-samples directory>/helloworld-sample
make build
```
OR
```sh
cd ~/.k8slens/extensions/helloworld-sample
cd <lens-extension-samples directory>/helloworld-sample
npm install
npm run build
```
Open Lens application and navigate to a cluster. You should see "Hello World" in the Lens sidebar menu.
If you want to watch for any source code changes and automatically rebuild the extension you can use:
```sh
cd <lens-extension-samples directory>/helloworld-sample
npm run dev
```
Finally, if you already have Lens open you will need to quit and restart Lens for the extension to be loaded. After this initial restart you can reload Lens and it will pick up any new builds of the extension. Within Lens connect to an existing cluster or [create a new one](../../clusters/adding-clusters.md). You should see then see the "Hello World" page in the Lens sidebar cluster menu.
## Developing the extension
Let's make a change to the message:
Let's make a change to the message that our helloworld-sample extension displays:
* Change the message from Hello World from HelloWorld! to **Hello Lens Extensions** in `page.tsx`
* Rebuild the extension
* Reload the Lens window
* Navigate to `<lens-extension-samples directory>/helloworld-sample`.
* Change the message from HelloWorld! to **Hello Lens Extensions** in `page.tsx`.
* Rebuild the extension or, if you used `npm run dev`, the extension should automatically rebuild.
* Reload the Lens window and click on the Hello World page.
* You should see the updated message showing up.
## Next steps