Code Server#

AIO Sandbox includes a fully-featured VSCode Server (Code Server) that provides a complete cloud development environment accessible through your web browser.

Access Code Server#

The Code Server is available at:

No authentication required by default - immediate access to a full VSCode environment.

Features#

Full VSCode Experience#

• Complete VSCode interface in the browser
• Extensions marketplace access
• Integrated terminal
• Git integration
• IntelliSense and syntax highlighting
• Debugging capabilities

File System Integration#

Access the same file system as other sandbox components:

• Files created in browser/shell appear instantly
• Edit files from API operations
• Work with downloaded files immediately
• Changes reflect across all interfaces

Development Tools#

Pre-configured development environment:

• Node.js runtime
• Python interpreter
• Git version control
• Package managers (npm, pip, etc.)
• Development servers

Workspace Setup#

Project Structure#

Recommended workspace organization:

Opening Projects#

1. Navigate to Code Server interface
2. Open folder: /home/user/projects/myproject
3. Use File → Open Folder or Ctrl+K, Ctrl+O
4. Select project directory

Creating New Projects#

# Create project structure
mkdir -p /home/user/projects/new-app
cd /home/user/projects/new-app

# Initialize project
npm init -y
git init

# Open in Code Server
# Navigate to http://localhost:8080/code-server/
# Open folder: /home/user/projects/new-app

Development Workflow#

Frontend Development#

Complete React/Vue/Angular development:

// package.json
{
  "name": "my-frontend-app",
  "scripts": {
    "dev": "vite dev --host 0.0.0.0 --port 3000",
    "build": "vite build",
    "preview": "vite preview --host 0.0.0.0 --port 4173"
  }
}

Access development server:

Backend Development#

API development with live reload:

# app.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello from AIO Sandbox!'

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

Access API server:

Full-Stack Development#

Work on both frontend and backend simultaneously:

1. Terminal 1: Start backend server

cd /home/user/projects/my-app/backend
python app.py

2. Terminal 2: Start frontend dev server

cd /home/user/projects/my-app/frontend
npm run dev

3. Access both:
   • Frontend: http://localhost:8080/absproxy/3000/
   • API: http://localhost:8080/proxy/5000/

Extensions and Customization#

Installing Extensions#

1. Open Extensions panel (Ctrl+Shift+X)
2. Search for desired extensions
3. Install directly from marketplace

Popular extensions for sandbox development:

• Python extension pack
• ES7+ React/Redux/React-Native snippets
• GitLens
• Thunder Client (API testing)
• Live Server
• Docker
• Prettier

Workspace Settings#

Configure project-specific settings:

// .vscode/settings.json
{
  "python.defaultInterpreterPath": "/usr/bin/python3",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "terminal.integrated.shell.linux": "/bin/bash",
  "files.autoSave": "afterDelay"
}

User Settings#

Global preferences:

// Settings → Open Settings (JSON)
{
  "workbench.colorTheme": "Dark+ (default dark)",
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'Courier New', monospace",
  "editor.fontLigatures": true,
  "terminal.integrated.fontSize": 12
}

Terminal Integration#

Integrated Terminal#

Access terminal within Code Server:

• Terminal → New Terminal (Ctrl+Shift+`)
• Multiple terminal instances
• Split terminal view
• Terminal tabs

Shell Access#

Same shell as WebSocket terminal:

# All shell features available
ls -la
git status
npm install
python script.py

# Background processes
npm run dev &

Terminal Synchronization#

Terminals are synchronized with WebSocket shell:

• Commands executed in Code Server terminal
• Appear in WebSocket terminal output
• Shared command history
• Shared environment variables

Git Integration#

Repository Management#

Full Git support built-in:

• Visual diff viewer
• Commit interface
• Branch management
• Remote operations

Basic Git Workflow#

1. Initialize repository:

git init
git add .
git commit -m "Initial commit"

2. Visual Git operations:

   • Source Control panel (Ctrl+Shift+G)
   • Stage/unstage files
   • Write commit messages
   • View file changes

3. Branch management:

   • Status bar shows current branch
   • Click to switch branches
   • Create new branches
   • Merge operations

Remote Repositories#

Connect to external repositories:

# Add remote
git remote add origin https://github.com/user/repo.git

# Push changes
git push -u origin main

# Pull updates
git pull origin main

Debugging#

Python Debugging#

Configure Python debugger:

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    },
    {
      "name": "Python: Flask App",
      "type": "python", 
      "request": "launch",
      "program": "app.py",
      "env": {
        "FLASK_ENV": "development"
      }
    }
  ]
}

JavaScript/Node.js Debugging#

Debug Node.js applications:

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/index.js"
    },
    {
      "name": "Attach to Node.js",
      "type": "node",
      "request": "attach",
      "port": 9229
    }
  ]
}

Browser Debugging#

Debug frontend applications:

• Built-in browser dev tools
• React Developer Tools
• Vue.js devtools
• Network inspection

File Operations Integration#

File API Integration#

Work with File API from Code Server:

# api_client.py
import requests

def read_sandbox_file(file_path):
    response = requests.post('http://localhost:8080/v1/file/read', 
                           json={'file': file_path})
    return response.json()

def write_sandbox_file(file_path, content):
    response = requests.post('http://localhost:8080/v1/file/write',
                           json={'file': file_path, 'content': content})
    return response.json()

# Usage in development
data = read_sandbox_file('/tmp/data.json')
processed = process_data(data['data']['content'])
write_sandbox_file('/tmp/output.json', processed)

Browser Integration#

Access browser downloads immediately:

# Process downloaded files
import os
import glob

downloads_dir = '/home/user/Downloads'
csv_files = glob.glob(f'{downloads_dir}/*.csv')

for csv_file in csv_files:
    print(f"Processing: {csv_file}")
    # Process file with pandas, etc.

Performance Optimization#

Resource Management#

• Monitor CPU/memory usage
• Close unused extensions
• Limit terminal instances
• Use workspace folders efficiently

Large File Handling#

// Stream large files
const fs = require('fs');
const readline = require('readline');

async function processLargeFile(filePath) {
    const fileStream = fs.createReadStream(filePath);
    const rl = readline.createInterface({
        input: fileStream,
        crlfDelay: Infinity
    });

    for await (const line of rl) {
        // Process line by line
        console.log(line);
    }
}

Development Server Optimization#

// Vite config for optimal development
// vite.config.js
export default {
  server: {
    host: '0.0.0.0',
    port: 3000,
    hmr: true,
    watch: {
      usePolling: true  // For better file watching in containers
    }
  },
  build: {
    sourcemap: true
  }
}

Troubleshooting#

Common Issues#

Code Server not loading:

# Check service status
ps aux | grep code-server

# Restart if needed
systemctl restart code-server

Extensions not installing:

# Check internet connectivity
curl -I https://marketplace.visualstudio.com

# Clear extension cache
rm -rf /home/user/.local/share/code-server/extensions

Terminal not working:

# Check shell configuration
echo $SHELL
which bash

# Reset terminal settings
rm -rf /home/user/.config/code-server/User/settings.json

Performance Issues#

• Disable unnecessary extensions
• Reduce editor.fontSize for better performance
• Use "files.watcherExclude" for large directories
• Limit concurrent terminal instances

File Sync Issues#

If files don't appear immediately:

# Force file system sync
sync

# Check file permissions
ls -la /path/to/file

# Refresh Code Server
# Ctrl+Shift+P → "Developer: Reload Window"

Best Practices#

Project Organization#

Development Workflow#

1. Create project structure
2. Configure workspace settings
3. Install necessary extensions
4. Set up debugging configuration
5. Configure git repository
6. Start development servers
7. Use preview endpoints for testing

Collaboration#

• Use shared project directories
• Standardize workspace settings
• Document setup instructions
• Use consistent coding standards
• Leverage git for version control

Ready to start coding? The Code Server provides everything you need for modern development workflows. Check out our examples for specific development scenarios.