mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
ba063417e0
Resolved conflicts in Your First Extension after rebasing from master Reworked extensions/README.md Signed-off-by: Paul Williams <pawilliams@mirantis.com> Reworked the content in your-first-extension.md Signed-off-by: Paul Williams <pawilliams@mirantis.com> Reworked beginning of extension-anatomy.md Signed-off-by: Paul Williams <pawilliams@mirantis.com> Reworked the writing in extensions/get-started/anatomy.md Signed-off-by: Paul Williams <pawilliams@mirantis.com> Reworked beginning of wrapping-up.md Signed-off-by: Paul Williams <pawilliams@mirantis.com> Squashed 3 commits Reworked writing in wrapping-up.md Signed-off-by: Paul Williams <pawilliams@mirantis.com> Reworked content throughout Extension Development > Getting Started and squashed commits Removed extensions/capabilities/README.md and extensions/testing-and-publishing/bundling.md from mkdocs.yml nav Signed-off-by: Paul Williams <pawilliams@mirantis.com> Added extensions/get-started/overview.md to mkdocs.yml nav, reworked writing in extensions/get-started/wrapping-up.md and extensions/get-started/overview.md, changed links that pointed to extensions/capabilities/overview.md to go to extensions/capabilities/common-capabilities.md instead Signed-off-by: Paul Williams <pawilliams@mirantis.com> Changed all titles throughout docs, including in body, to title case Signed-off-by: Paul Williams <pawilliams@mirantis.com> Reworked bullets in extensions/get-started/anatomy.md Signed-off-by: Paul Williams <pawilliams@mirantis.com> Intergrated Windows instructions into your-first-extension.md, made minor edits throughout extensions/get-started and fixed a couple titles in mkdocs.yml nav Signed-off-by: Paul Williams <pawilliams@mirantis.com> Changed Extension Development > Get Started to Getting Started in mkdocs.yml Signed-off-by: Paul Williams <pawilliams@mirantis.com>
88 lines
3.0 KiB
Markdown
88 lines
3.0 KiB
Markdown
# Your First Extension
|
||
|
||
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](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. A symlink connects the directory that Lens will monitor for user-installed extensions to the sample extension. In this case the sample extension is `helloworld-sample`.
|
||
|
||
### Linux & macOS
|
||
|
||
```sh
|
||
mkdir -p ~/.k8slens/extensions
|
||
cd ~/.k8slens/extensions
|
||
ln -s lens-extension-samples/helloworld-sample helloworld-sample
|
||
```
|
||
|
||
### Windows
|
||
|
||
Create the directory that Lens will monitor for user-installed extensions:
|
||
|
||
```sh
|
||
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 `helloworld-sample`:
|
||
|
||
```sh
|
||
cmd /c mklink /D helloworld-sample lens-extension-samples\helloworld-sample
|
||
```
|
||
|
||
Without administrator rights, you need to copy the extensions sample directory into `C:\Users\<user>\.k8slens\extensions`:
|
||
|
||
```
|
||
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:
|
||
|
||
```sh
|
||
cd <lens-extension-samples directory>/helloworld-sample
|
||
make build
|
||
```
|
||
|
||
To run the `npm` commands, enter:
|
||
|
||
```sh
|
||
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:
|
||
|
||
```sh
|
||
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](../../clusters/adding-clusters.md). 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:
|
||
|
||
1. Navigate to `<lens-extension-samples directory>/helloworld-sample`.
|
||
2. In `page.tsx`, change the message from `HelloWorld!` to `Hello Lens Extensions`.
|
||
3. Rebuild the extension. If you used `npm run dev`, the extension will rebuild automatically.
|
||
4. Reload the Lens window.
|
||
5. Click on the Hello World page.
|
||
6. The updated message will appear.
|
||
|
||
## Next Steps
|
||
|
||
In the [next topic](anatomy.md), 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](https://github.com/lensapp/lens-extension-samples/tree/master/helloworld-sample). [Extension Guides](../guides/README.md) contains additional samples.
|