Prepare the environment-IoT Studio(IoT Studio)-阿里云帮助中心

Before developing a custom component, configure a development environment and initialize a project.

Step 1: Install the Node.js runtime environment

Install Node.js 8.9 LTS or later: Select a version to download.

Internal beta users must use bnpm. After the public release, the project will migrate to the aliplus registry source, allowing you to use npm.

Open the CMD command window and run the npm login command to log in.
Note
Visit bone.aliyun.com/profile to get your username and password.
```
npm login --registry https://registry-node.aliyun.com/org/YscSvypAq7EUU~8GmyAjOp/registry/aliyunIoT/
```
Contact technical support, provide your username, and follow the instructions to enable installation permissions.

Run the following command to install the new version of bnpm.

npm i -g @bone/npm --registry https://registry-node.aliyun.com/org/YscSvypAq7EUU~8GmyAjOp/registry/aliyunIoT/

Open the CMD command window and run the bnpm login command to log in.
Note
Visit bone.aliyun.com/profile to get your username and password.
```
bnpm login --registry https://registry-node.aliyun.com/org/YscSvypAq7EUU~8GmyAjOp/registry/aliyunIoT/
```
Run the bnpm install command to install material-cli.
```
bnpm install -g @maliang/material-cli
```
Run material create <project_name> to create a project folder (for example, Demo) on your local computer.
```
material create Demo
```
After navigating to the project folder created in the previous step, run the bnpm install command to install the necessary dependencies.
```
cd Demo
bnpm install
```
Run the npm run start command. Your browser automatically opens and displays the initial state of the component. You can use this page to test your component during development.

The initial configuration of the component is as follows: the page is divided into two areas. The left area is the component preview area, which shows the runtime effect of the component (including an input box and a Reset button). The right area is the property configuration panel, which contains the Style and Interaction tabs for adjusting component properties such as coordinates, size, visibility, and opacity.