All Products
Search
Document Center

Function Compute (2.0):What is WebIDE?

Last Updated:Mar 15, 2024

Web Integrated Development Environment (WebIDE) is an online IDE that is provided by Alibaba Cloud Function Compute. WebIDE provides cloud development experience that is similar to that of Visual Studio Code (VS Code). Developers can directly write, debug, and deploy code online without the need to install a complex development environment on on-premise machines. This topic describes the features and UI of WebIDE, and the methods to configure WebIDE in the Function Compute console.

Features

WebIDE provides the following features:

  • Comprehensive capabilities in code development, deployment, and testing

  • Consistent terminal and runtime environments between WebIDE and Function Compute

    • Common development tools, such as pip, npm, and composer, and various programming languages are provided for different runtimes. You can use WebIDE to package third-party dependencies without the need to worry about the differences of online environments.

    • Serverless Devs is built in WebIDE and can be automatically configured based on your account. You do not need to run the s config command to configure Serverless Devs. By default, the configured alias is default.

  • Code hinting, automatic code completion, and code debugging

Note

WebIDE is optimized for Google Chrome. For optimal user experience, we recommend that you use the latest version of Google Chrome.

Limits

  • WebIDE supports only Python, Node.js, PHP, and custom runtimes. For more information, see What runtimes in Function Compute support WebIDE? Online coding is not supported for Java, Go, and C# runtimes. You can only upload compiled .zip files or binary files in these runtimes.

  • WebIDE provides each user with 5 GB of storage. When the storage is full, you can no longer write data. We recommend that you periodically clear your storage.

  • When you open WebIDE of a function, an instance is automatically started. This instance is approximately equal to one function instance with 1 vCPU and 1.5 GB of memory in a Custom Container runtime.

  • The environment of the WebIDE-related instance is the same as the runtime of your function. However, the instance cannot load custom layers and mounted Apsara File Storage NAS (NAS) and Object Storage Service (OSS) resources. The WebIDE-related instance also cannot access the virtual private cloud (VPC) that is configured for the service. If you want to use the preceding features, invoke the function after you deploy code or use dedicated WebIDE.

  • Dedicated WebIDE is available only in the following regions: China (Hangzhou), China (Shanghai), China (Beijing), China (Zhangjiakou), China (Hohhot), China (Shenzhen), China (Hong Kong), Singapore, Japan (Tokyo), Germany (Frankfurt), and US (Virginia). If you want to use dedicated WebIDE in another region, join the DingTalk group (ID: 11721331) to contact technical support.

WebIDE overview

This topic describes the overview of the WebIDE user interface (UI), which is shown in the following figure. The WebIDE UI consists of resource manager (1), file editor (2), function operation (3), and command line interface (CLI) terminal (4) sections.web-ide

  • Resource manager: You can view code structure, including code files and dependencies.

  • File editor: You can edit function code. After you edit code, click the image.png button to debug your code. If you want to debug code online in a runtime as you do so in a terminal environment, click Deploy in the function operation section.

  • Function operation: You can perform operations in this section to deploy code and test your function. After you click Exit, the function operation section is located in the upper-left corner of the WebIDE UI.

  • CLI terminal: In the top navigation bar, choose Terminal > New Terminal to launch the CLI terminal. You can debug your code and install third-party dependencies in the CLI terminal.

Configure WebIDE in the Function Compute console

Prerequisites

A service and a function are created. For more information, see Create a service and Create a function.

Procedure

  1. Log on to the Function Compute console. In the left-side navigation pane, click Services & Functions.

  2. In the top navigation bar, select a region. On the Services page, click the desired service.

  3. On the Functions page, click the name of the desired function. On the Function Details page that appears, click the Code tab.

  4. (Optional) On the Code tab of the function details page, click Configure WebIDE in the upper-right corner of the WebIDE UI. In the Configure WebIDE panel, select a WebIDE type.

    You can select Serverless or Dedicated.

    • Serverless

      You can select Disable Dedicated WebIDE to ensure that Serverless WebIDE is automatically selected every time you launch WebIDE.

    • Dedicated

      If you want instances to load your custom layers and mounted NAS file systems, or OSS resources, or you want to access the VPCs configured for your services, you can select Dedicated WebIDE and configure the following parameters:

      • Instance Specifications

      • Execution Timeout Period

      If you use dedicated WebIDE, Function Compute can reuse or automatically create a VPC, a vSwitch, and a General-purpose NAS file system based on the VPC of the region where your function resides. For information about the billing of the automatically created resources, see Billing of General-purpose NAS file systems.

  5. On the WebIDE UI, write function code, install third-party dependencies, and then perform tests based on your business requirements.

    For more information about the sections of the WebIDE UI, see WebIDE overview.

Important

If you use dedicated WebIDE, make sure that your function can run as expected. Otherwise, WebIDE may fail to be launched.

Troubleshooting

WebIDE throws an exception during loading. How do I resolve the issue?

Refresh the function details page or reset the WebIDE environment to resolve the issue. For more information about how to reset a WebIDE environment, see How do I reset the environment variables, runtime environment, and layers of WebIDE?

What is dedicated WebIDE?

Dedicated WebIDE is a function that is deployed in your account in Function Compute. The name of the service in which your function resides starts with _webide-server-.

If you use dedicated WebIDE, the WebIDE-related instance can load custom layers and mounted NAS and OSS resources and allow you to access the VPC that is configured for your service. This provides a consistent environment between the WebIDE terminal and online Function Compute runtime to facilitate coding and debugging. You can also configure custom instance specifications. For example, you can increase the CPU and memory specifications to improve the performance of WebIDE.

When you use dedicated WebIDE, the corresponding function runs in your account, and you are charged for the following resources:

Why does my function run as expected in the WebIDE terminal but fail to run after I clicked Test Function?

WebIDE helps you test code, build projects, and install dependencies in an efficient manner. However, the WebIDE environment is not the actual execution environment of Function Compute In serverless WebIDE, you cannot directly test custom layers or access NAS or OSS resources. You also cannot access other resources over VPC.

To prevent the preceding issue, you can use dedicated WebIDE. You can also click Deploy, and then click Test Function to test the function.

How do I reset the environment variables, runtime, and layers of WebIDE?

When you refresh the function details page or the WebIDE UI, the latest configurations, such as environment variables, layers, and runtime of the online function are synchronized to the WebIDE-related instance. You can view the latest function environment variables and other information by running env in the WebIDE terminal.

How long is the data of serverless WebIDE retained?

By default, the data in serverless WebIDE is retained for 48 hours. If you do not launch the function in the serverless WebIDE in 48 hours, the data is deleted.

If the online code is modified in the console or by using an SDK tool, the code checksum of the function is changed and the content of serverless WebIDE is automatically updated to the latest version when you refresh or relaunch serverless WebIDE.

What runtimes in Function Compute support WebIDE?

What runtimes in Function Compute support WebIDE?

  • Python

    Python 3.10, Python 3.9, Python 3.6, and Python 2.7

  • Node.js

    Node.js 16, Node.js 14, Node.js 12, Node.js 10, and Node.js 8

  • PHP

    PHP 7.2

  • Custom runtime

    Custom runtime (Debian 9 and Debian10)

Can I debug code in WebIDE?

Yes, you can debug code in WebIDE. You can use the built-in VS Code debugging plug-ins for different runtimes in WebIDE. If you use a programming language that is not commonly used in a custom runtime, you can install the VS Code plug-in for that programming language.

For example, if your function runs Python 3.9, you must add specific code to run the handler. The content of the red box in the following figure shows the sample code.vscode-auxiliary-code

When I modify function code, git displays code differences. Is this because function code is hosted by WebIDE?

No, function code is not hosted by WebIDE. When you launch WebIDE, git init is automatically initialized the first time you open a function code package to display the differences between the code and the online code. After you click Deploy, commit is automatically generated to make the code in the WebIDE terminal and online environments identical. save function with codechecksum xxxx in the following figure indicates that the function is deployed once. This feature helps improve user experience.git-init-commit

Why is the code of a function different when I log on to the Function Compute console by using two RAM users of the same Alibaba Cloud?

WebIDE in Function Compute supports workspace isolation for Resource Access Management (RAM) users that belong to the same Alibaba Cloud account. For example, WebIDE A is used when RAM User A logs on to the Function Compute console, and WebIDE B is used when RAM User B logs on to the Function Compute console. The modifications made by a RAM user do not affect the business of the other RAM user. In this case, the code for RAM User A and RAM User B is different.

RAM User A and RAM User B can view the differences between the code in their workspaces and the online function code. For more information, see When I modify function code, git displays code differences. Is this because function code is hosted by WebIDE?

Why is my WebIDE terminal slowly loaded, or why does it fail to be loaded?

To resolve this issue, you can perform the following operations:

  1. Check whether the network settings are valid. For example, check whether your local client has configured a proxy to restrict access or whether the WebSocket is disabled. WebIDE uses WebSocket to implement real-time communication and interaction. If you disable WebSocket, WebIDE cannot run as expected.

  2. Check whether the local client has launched a function that was in regions outside China. If the network of the local client becomes unstable in regions outside China, the function cannot be immediately connected or fail to be connected.

  3. Check whether your code package is too large. If the size of the code package is too large and it takes a long time to upload or deploy the code, you can optimize the code package and try again.

If the issue persists after you perform the preceding operations, contact us.

References

  • You can also use the WebIDE terminal to package third-party dependencies of your function. For more information, see Use WebIDE to package third-party dependencies of a function.

  • If the volume of your function code or third-party dependencies that you want to install is large, you can put the dependencies into layers or use the Function Compute common layer to reduce the size of your code package. For more information, see Create a custom layer.

  • You can also use the local debugging feature of Serverless Devs to test functions. For more information, see Local commands.