All Products
Search
Document Center

Function Compute:What is WebIDE?

Last Updated:May 24, 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 set up a complex development environment on on-premises machines. This topic describes the features and user interface (UI) of WebIDE and how to configure WebIDE in the Function Compute console.

Features

WebIDE provides the following features:

  • Complete code development, deployment, and debugging capabilities

  • 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 worrying about differences with 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. The default alias is default.

  • AI coding by TONGYI Lingma

    Developers can use the AI coding capabilities provided by TONGYI Lingma out of the box to improve coding efficiency. TONGYI Lingma can perform real-time code review, detect potential logic errors, and quickly locate problems and provide suggestions if a function runs abnormally. TONGYI Lingma helps improve both the efficiency and quality of coding.

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 capacity. Data fails to be written if the capacity is used up. We recommend that you periodically clear your storage.

  • When you open WebIDE of a function, an instance (hereinafter referred to as the WebIDE-related instance) is automatically started. This WebIDE-related instance is approximately equivalent to a container instance with 1 vCPU and 1.5 GB of memory.

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

  • 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 11721331 for technical support.

WebIDE UI

This topic describes WebIDE UI in full-screen mode. The WebIDE UI consists of the following areas: resource manager (1), file editor (2), operation bar (3), and CLI terminal (4). The following figure shows an example.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 in the upper-right corner to debug your code. If you want the online code to be the same as the code in the terminal, click Deploy in the operation bar.

  • Operation bar: You can perform operations in this area to deploy code and test your function. After you click Exit Fullscreen, the operation bar is located in the upper-left corner above the WebIDE UI.

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

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 above 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 and 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 billing, see Billing of General-purpose NAS file systems.

  5. On the WebIDE UI, you can perform operations, such as writing function code, installing third-party dependencies, and performing tests, based on your business requirements.

    For more information about the WebIDE UI, see WebIDE UI.

Important

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

FAQ

What do I do if WebIDE throws an exception during loading?

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

What is dedicated WebIDE?

If you use dedicated WebIDE, a WebIDE-related function is deployed in your account in Function Compute. The name of the service in which the 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 vCPU and memory specifications to improve the performance of WebIDE.

The function of dedicated WebIDE runs in your account, and you are charged for the following resources:

Why does my function fail to run after I click Test Function even though it runs as expected in the WebIDE terminal?

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 and OSS resources. You cannot access resources over VPC.

You can use dedicated WebIDE if the serverless WebIDE cannot meet your business requirements. 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 updated to the WebIDE-related instance. You can view the latest function environment variables and other information by running env in a WebIDE terminal.

How long is the data of serverless WebIDE retained?

By default, 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 Function Compute console or by using an SDK tool, code checksum of the function is changed and the content of WebIDE is automatically updated to the latest version when you refresh or relaunch WebIDE.

What runtimes in Function Compute support WebIDE?

WebIDE is supported in the following runtimes:

  • 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 runtimes

    Custom runtimes (Debian 9 and Debian 10)

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 the programming language.

For example, if your function runs in the Python 3.9 runtime, you must add specific code to run your 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. 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 is different when I log on to Function Compute as different RAM users of the same Alibaba Cloud account?

WebIDE in Function Compute supports workspace isolation for different 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?

What do I do if the WebIDE terminal opens slowly or cannot be opened?

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 that restricts access or whether the WebSocket protocol is disabled. WebIDE uses WebSocket to implement real-time communication and interaction. If you disable WebSocket, WebIDE cannot run as expected.

  2. Check whether you launched a function that resides in a region outside the Chinese mainland in your local client. If the network of the local client cannot establish proper cross-border connections, 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.

More information

  • You can also use a 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 your function code or third-party dependencies that you want to install is large, you can put the dependencies into layers or use a public layer of Function Compute 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.