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

Java Development Sample

Your First Java Lab

This is a sample Java lab that demonstrates how to write, compile, and run a simple Java program using the LabEx WebIDE.

Working with Java projects in WebIDE:

1. Create a new Java file via the explorer
2. Write your Java code with syntax highlighting
3. Compile and run in the terminal:

Copy

javac MyClass.java
java MyClass

4. View compilation errors and warnings in real-time

Web Development Sample

Your First HTML Lab

This is a sample HTML lab that demonstrates how to create a simple web page using the LabEx WebIDE.

For frontend development tasks:

1. Create HTML, CSS, and JavaScript files
2. Click the “Go Live” button in the bottom right corner
3. Access your web page through:
   • Web 8080 tab at the top of the LabEx VM
   • Create new port preview tabs using the + button

Note: Your project is automatically deployed to a public URL on the LabEx server, making it accessible through the Web tabs.

Python Development Sample

Create an Astronaut Name Tag Processor

This is a sample Python challenge that demonstrates how to process astronaut names using the LabEx WebIDE.

For Python programming:

1. Create a Python file in the explorer
2. Write your Python code with:
   • Syntax highlighting
   • Code completion
   • Error detection
3. Run your script in the terminal:

Copy

python3 script.py

4. Use the integrated debugger for step-by-step execution

​

Frequently Asked Questions

How do I access my web application?

LabEx VM automatically deploys your web projects:

1. Default port 8080:
   • Click the “Web 8080” tab at the top of the LabEx VM
   • Your application will be accessible through a public URL
2. Custom ports:
   • Click the + button to create new port preview tabs
   • Each port gets its own public URL
   • Useful for running multiple services (e.g., frontend and backend)

Note: Unlike local development, you don’t access localhost directly as LabEx runs in the cloud.

What are the essential keyboard shortcuts?

Common shortcuts in the WebIDE:

• File Operations
  • New File: Ctrl+N
  • Save: Ctrl+S
  • Find: Ctrl+F
  • Replace: Ctrl+H
• Panel Controls
  • Toggle Sidebar: Ctrl+B
  • Toggle Terminal: Ctrl+`
  • Command Palette: Ctrl+Shift+P
• Editor Features
  • Multi-cursor: Alt+Click
  • Select All Occurrences: Ctrl+Shift+L
  • Format Document: Shift+Alt+F

Can I install additional tools or packages?

Yes, you can install additional tools using the Ubuntu package manager:

Copy

sudo apt update
sudo apt install package-name

For language-specific package managers:

• Node.js/npm:

Copy

npm install package-name

• Python/pip:

Copy

pip install package-name

Remember that installations are temporary and will be reset when your session ends.

How do I handle file uploads and downloads?

The WebIDE provides several ways to manage files:

1. Upload Files:
   • Drag and drop files into the explorer
   • Use the upload/download after right-clicking in the explorer
   
2. Download Files:
   • Right-click the file in explorer
   • Select “Download”
3. Copy/Paste:
   • Text content can be copied directly between your local machine and the WebIDE
   • Binary files should use the upload/download features

Remember that all files are temporary and will be lost when your session ends.