mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
402c28d25a
Edited and reworked content in the Extension Guides Overview and the Generator and Main Extension guides. Signed-off-by: Paul Williams <pawilliams@mirantis.com> Update docs/extensions/guides/main-extension.md Co-authored-by: Panu Horsmalahti <panu.horsmalahti@iki.fi> Update docs/extensions/guides/generator.md Co-authored-by: chh <1474479+chenhunghan@users.noreply.github.com> Signed-off-by: Paul Williams <pawilliams@mirantis.com> Co-authored-by: Paul Williams <pawilliams@mirantis.com> Co-authored-by: chh <1474479+chenhunghan@users.noreply.github.com>
72 lines
2.6 KiB
Markdown
72 lines
2.6 KiB
Markdown
# Lens Extension Generator
|
|
|
|
The [Lens Extension Generator](https://github.com/lensapp/generator-lens-ext) creates a directory with the necessary files for developing an extension.
|
|
|
|
## Installing and Getting Started with the Generator
|
|
|
|
To begin, install Yeoman and the Lens Extension Generator with the following command:
|
|
|
|
```bash
|
|
npm install -g yo generator-lens-ext
|
|
```
|
|
|
|
Run the generator by entering the following command: `yo lens-ext`.
|
|
|
|
Answer the following questions:
|
|
|
|
```bash
|
|
# ? What type of extension do you want to create? New Extension (TypeScript)
|
|
# ? What's the name of your extension? my-first-lens-ext
|
|
# ? What's the description of your extension? My hello world extension
|
|
# ? What's your extension's publisher name? @my-org/my-first-lens-ext
|
|
# ? Initialize a git repository? Yes
|
|
# ? Install dependencies after initialization? Yes
|
|
# ? Which package manager to use? yarn
|
|
# ? symlink created extension folder to ~/.k8slens/extensions (mac/linux) or :Users\<user>\.k8slens\extensions (windows)? Yes
|
|
```
|
|
|
|
Next, you'll need to have webpack watch the `my-first-lens-ext` folder. Start webpack by entering:
|
|
|
|
```bash
|
|
cd my-first-lens-ext
|
|
npm start # start the webpack server in watch mode
|
|
```
|
|
|
|
Open Lens and you will see a **Hello World** item in the left-side menu under **Custom Resources**:
|
|
|
|
|
|
|
|
## Developing the Extension
|
|
|
|
Next, you'll try changing the way the new menu item appears in the UI. You'll change it from "Hello World" to "Hello Lens".
|
|
|
|
Open `my-first-lens-ext/renderer.tsx` and change the value of `title` from `"Hello World"` to `"Hello Lens"`:
|
|
|
|
```tsx
|
|
clusterPageMenus = [
|
|
{
|
|
target: { pageId: "hello" },
|
|
title: "Hello Lens",
|
|
components: {
|
|
Icon: ExampleIcon,
|
|
}
|
|
}
|
|
]
|
|
```
|
|
|
|
Reload Lens and you will see that the menu item text has changed to "Hello Lens." To reload Lens, enter `CMD+R` on Mac and `Ctrl+R` on Windows/Linux.
|
|
|
|
|
|
|
|
## Debugging the Extension
|
|
|
|
To debug your extension, please see our instructions on [Testing Extensions](../testing-and-publishing/testing.md).
|
|
|
|
## Next Steps
|
|
|
|
To dive deeper, consider looking at [Common Capabilities](../capabilities/common-capabilities.md), [Styling](../capabilities/styling.md), or [Extension Anatomy](anatomy.md).
|
|
|
|
If you find problems with the Lens Extension Generator, or have feature requests, you are welcome to raise an [issue](https://github.com/lensapp/generator-lens-ext/issues). You can find the Lens contribution guidelines [here](../../contributing/README.md).
|
|
|
|
The Generator source code is hosted at [Github](https://github.com/lensapp/generator-lens-ext).
|