IDEA configures the skywalking development environment

This is the third day of my participation in the November Update Challenge. For details of the event, please check: 2021 Last Update Challenge

foreword

Recently, I need to do some functional extensions to skywalking, and I have sorted out the steps to configure the development environment on my own idea. The official website provides the steps to install on IntelliJ IDEA: How to build project | Apache SkyWalking , but it is relatively fragmented, and there may be some unexpected situations due to personal environment problems, which are shared here.

surroundings

• Computer: MacBook Pro (16-inch, 2019) and original system
• OS："mac os x", version: "10.15.7", arch: "x86_64"
• IntelliJ IDEA: 2020.2 final release
• WebStorem: 2020.3
• JDK: 1.8.0_271
• maven: Apache Maven 3.6.3
• npm: 7.13.0
• git: 2.15.0
• skywalking: 8.5.0

Environmental issues are very important. For example, if it is not Mac OS, some of the commands executed below should be adjusted appropriately according to your own environment. If the version of IDEA is older than the version I use, some functions of automatic configuration recognition may not be friendly enough, so the steps I record below may not be fully applicable.

Source address description

Although skywalking is mainly divided into multiple parts, such as: back-end OAP, UI, agent and so on. But the backend code and UI are mainly in two git repositories:

The backend is at: github.com/apache/skyw…

The UI part is at: github.com/apache/skyw…

UI is a submodule that acts as a backend repository.

From the idea, you can directly build the front-end and back-end release packages, but for development, you need to configure the front-end and back-end development environments separately.

Backend configuration steps

1. clone code

git clone --recurse-submodules https://github.com/apache/skywalking.git
复制代码

The actual size of the total code file is not small. If the connection to the github network is unstable and the clone fails, other solutions such as setting a proxy can be considered.

After the download is complete, open the project without idea.

2. compile

Open a command line in the project root directory and execute the following command:

mvn compile -Dmaven.test.skip=true
复制代码

It took me 5 minutes to compile.

You can also directly execute the package package to test whether your environment can be successfully packaged and released:

mvn package -Dmaven.test.skip=true
复制代码

If there are related errors such as npm install node or npm run build during the execution process, it may be a network problem. The solutions are as follows:

First modify the frontend-maven-plugin in the pom.xml under the apm-webapp module to the following configuration:

install -g cnpm --registry=https://registry.npm.taobao.org
复制代码

Then re-execute the packaging command, wait until the execution is completed or an error is reported: but the plugin has been executed, recover and re-execute the above command:

3. It may take a while to open the project with idea and introduce dependencies, etc.

Thanks to IDEA's intelligent identification configuration, the source code generated in step 2 has been configured, and no additional operations are required.

If the idea is not so smart, refer to the official documentation to configure these source packages

4. The server startup class for running OAP, the server-starter module under the oap-server module, the default is the h2 database, not the es one

5. Run the web startup class, in the apm-webapp module, the default startup log does not output the console

6. Visit: http://localhost:8080/ , the following appears, indicating that the startup is complete

If you just develop and debug back-end code, this is fine. But if it involves the front-end, you need to configure the front-end development environment separately.

UI configuration steps

1. Clone the code and install

git cloen https://github.com/apache/skywalking-rocketbot-ui.git
cd skywalking-rocketbot-ui
npm install
复制代码

2. Open the project with webstorm

3. run configuration

4. Running, the back-end web service is stopped in advance, and only one OAP server is running. The back-end web is a gateway that forwards requests to oap. Here, the front-end default configuration directly requests the port of oap

The default port is 8080, visit: http://localhost:8080/

The page appears normally, the configuration is complete, and you can develop happily.