Create KS Ext

Heavily inspired by create-next-app and create-react-app. This CLI tool can help you quickly setting up a KubeSphere extension project. You don't need to install or configure tools like webpack, Babel, TypeScript, etc. Just run the command and your project will be ready to go.

Prerequisites

• Access to a Unix-based operating system, such as Linux, MacOS or Windows Subsystem for Linux
• curl or wget installed
• Node.js Active LTS Release installed using one of these methods:
  • Using nvm (recommended)
    • Installing nvm
    • Install and change Node version with nvm
  • Binary Download
  • Package manager
• yarn Installation
• git installation
• Ensure the ports 8000 and 8001 is available for the local environment, we use the two ports for the bff server and webpack-dev-server.

Install

Run the command:

yarn create ks-ext

The wizard will ask you the directory name(default is my-app) to be installed in. and create the directory in the current directory. Inside that directory, it will generate the initial project structure and install the dependencies.

It might take a little while, but as soon as the message below, you can go to the next step.

1Success! Created my-ext at /Users/chenzhen/Workspace/qingcloud/create-ks-app/dist/my-ext
2Inside that directory, you can run several commands:
3
4  yarn create:ext
5    Create a new extension.
6
7  yarn dev
8    Starts the development server.
9
10  yarn build:prod
11    Builds the app for production.
12
13  yarn start
14    Runs the built app in production mode.
15
16We suggest that you begin by typing:
17
18  cd my-ext
19  yarn create:ext
20
21And
22
23  yarn dev
24

Options

create-ks-ext comes with the following option:

• -f, --fast-mode - Install dependencies from a tarball.

Create your KubeSphere extension

Switch to the directory you just created and run the command:

yarn create:ext

the wizard will ask you the extension name, displayName, description and author.

1$ ksc create:ext
2? Extension Name demo
3? Display Name Demo
4? Description this is demo
5? Author chenzhen
6? Language JavaScript
7? Are you sure you want to create extension: [demo] ? Yes
8✨  Done in 12.64s.

Then the extension will be created in the extensions directory. The files structure of the extension is as follows:

1.
2├── Dockerfile
3├── README.md
4├── package.json
5└── src
6    ├── App.jsx
7    ├── index.js
8    ├── locales
9    │   ├── en
10    │   │   ├── base.json
11    │   │   └── index.js
12    │   ├── index.js
13    │   └── zh
14    │       ├── base.json
15    │       └── index.js
16    └── routes
17        └── index.js
18

Run development environment

1. Edit the local_config.yaml file in the configs directory. Replace the apiServer value with the real value

1server:
2  apiServer:
3    url: http://apiserver.local
4    wsUrl: ws://apiserver.local

2. run the dev

1yarn dev

And open the browser to http://localhost:8000/, you will see the kubesphere page. for more information about the development environment, please refer to the development documentation