LabEx VM WebIDE Interface

​

WebIDE Preview

1. Writing and debugging code in various programming languages (Java, JavaScript, Python, etc.)
2. Web development projects with live preview capabilities, see Create Your First HTML Page in WebIDE
3. Managing project files and directories through an intuitive interface
4. Integrated terminal operations for command-line tasks

​

Environment Layout

1. Left Sidebar:
   • File explorer for project navigation
   • Search functionality
   • Source control for Git operations
   • Extensions panel
2. Editor Area: Main coding workspace
3. Bottom Panel: Terminal, problems, and output
4. Status Bar: Quick access to settings and live preview
5. Top Menu Bar: File, Edit, View, and other options

​

Terminal Access

1. Click the icon in the left bottom corner, and switch to the Terminal tab;
2. Use the top menu: Terminal > New Terminal

​

Preview HTML

1. In the WebIDE, click on the “Go Live” button at the bottom right corner.
2. A new browser tab will open with your HTML page rendered.
3. Or, you can click on the “Web 8080” tab to open the preview.
4. If your project under a subdirectory, you can access it by click the subdirectory name in the explorer, then it will automatically preview the index.html file in that directory.
5. If your project has multiple HTML files, including index.html, you can append the file name to the URL to preview it directly. For example, https://xxx.labex.io/another-file.html.
6. You can open the preview in a new tab by clicking the “Open in New Tab” button. It will open the preview in a new browser tab.

• Start a web server
• Provide real-time updates as you modify your code

Tips: LabEx VM hosts the preview on port 8080. You can share the preview link with others to showcase your work. After your lab vm is stopped, the preview link will no longer work.

​

Usage Scenarios

​

Frequently Asked Questions