Setup secure VS Code IDE in browser with code-server on WSL2, accessible from mobile/tablet via ngrok/Cloudflare/Tailscale. Full IDE features with extension support, resource management, and performance optimization. Use when you need remote IDE access, VS Code in browser, remote development, or full coding environment on mobile/tablet.
63
75%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./skills/code-server-remote-ide-wsl2/SKILL.mdAccess full VS Code IDE from any device (phone, tablet, remote computer) via secure web-based code-server with ngrok, Cloudflare Tunnel, or Tailscale.
What This Skill Does:
When to Use This Skill:
When NOT to Use This Skill:
What You'll Get:
System Requirements:
User Requirements:
Not Required:
Get remote VS Code IDE access in <15 minutes:
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./install.shFollow prompts to:
./configure-auth.shThis generates a strong hashed password and configures secure access.
./configure-resources.shThis sets WSL2 memory/CPU limits to prevent resource exhaustion.
./code-server-start.shThis will:
Copy the URL and open in any browser (tablet, phone, computer)
Open the displayed URL in browser → Enter password → You now have full VS Code IDE!
./code-server-stop.shDone! You now have working remote IDE access.
For detailed setup, extension management, and optimization, see the full workflow below.
This step installs code-server and your chosen tunnel service. You only need to do this once.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./install.shThe installer will:
ngrok - Best for beginners:
Cloudflare Tunnel - Best for production:
Tailscale - Best for private access:
Recommendation: Start with Cloudflare Tunnel (unlimited bandwidth important for IDE).
After choosing tunnel service, you'll need to create free account and get auth token:
For ngrok:
ngrok config add-authtoken YOUR_TOKEN_HEREFor Cloudflare Tunnel:
cloudflared tunnel login)For Tailscale:
sudo tailscale up# Check code-server installed
code-server --version
# Check tunnel tool installed
ngrok version # or: cloudflared --version # or: tailscale version
# Run health check
./health-check.shTroubleshooting Installation:
Configure secure access with hashed password. You only need to do this once.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./configure-auth.shThis will:
The script will display:
==================================================
code-server Remote IDE Credentials
==================================================
Password: aB3$xK9#mL2@pQ7!
Save this password securely!
You'll need it to login to VS Code in browser.
Configuration saved to:
~/.config/code-server/config.yaml
==================================================Save this password - you'll need it to login from browser.
Security Notes:
~/.config/code-server/config.yaml with 600 permissions~/.code-server/.env (for scripts only)./configure-auth.shTroubleshooting Authentication:
./configure-auth.sh to generate new one./configure-auth.sh --custom-passwordConfigure WSL2 resource limits to prevent code-server from consuming all memory.
code-server resource usage:
Without limits: code-server can consume all available RAM, slowing down Windows.
With limits: WSL2 restricted to safe amount, system stays responsive.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./configure-resources.shThis will:
| System RAM | WSL2 Memory Limit | Processors | code-server Usage |
|---|---|---|---|
| 8 GB | 4 GB | 2 | Light use OK |
| 16 GB | 8 GB | 4 | Moderate use OK |
| 32 GB+ | 12-16 GB | 6-8 | Heavy use OK |
Example .wslconfig:
[wsl2]
memory=8GB
processors=4
swap=2GBRestart WSL2 (PowerShell as Admin):
wsl --shutdownWait 8 seconds, then start WSL2:
wslVerify new limits (in WSL2):
# Check memory
free -h
# Check CPUs
nprocTroubleshooting Resources:
Start code-server and tunnel, get connection URL. Do this each time you want remote access.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./code-server-start.shThe script will:
You'll see output like this:
==================================================
code-server Remote IDE - CONNECTION READY
==================================================
🌐 Connection URL:
https://abc123.ngrok-free.app
🔐 Login Password:
aB3$xK9#mL2@pQ7!
💻 To connect from tablet/phone/browser:
1. Open the URL above in any browser
2. Enter the password above
3. You'll see full VS Code IDE
📊 Resource Usage (baseline):
code-server: 245 MB
Tunnel: 24 MB
Total: 269 MB
⚠️ Security Warnings:
- Only share URL with trusted people
- URL is HTTPS encrypted
- Session is active until you stop it
- Remember to stop when done (saves resources)
==================================================
Session running. Press Ctrl+C to stop (or use ./code-server-stop.sh)Option 1: Keep terminal open (simplest)
Option 2: Run in background (advanced)
./code-server-start.sh &
disownNow you can close terminal and code-server keeps running.
Troubleshooting Start:
lsof -i :8080Use the connection URL from any device with browser.
On your tablet, phone, or remote computer:
You'll see code-server password prompt:
You now see full VS Code interface in browser!
What You Can Do:
First Time Setup:
Tablet (iPad/Android with keyboard):
Phone:
Tips:
To disconnect (without stopping code-server):
To fully stop (free up resources):
Manage VS Code extensions and monitor resource usage.
Method 1: Via UI (easiest)
Method 2: Via CLI
# Use our helper script
./manage-extensions.sh
# Or manually:
code-server --install-extension EXTENSION_IDPopular Extensions:
ms-python.pythondbaeumer.vscode-eslintesbenp.prettier-vscodeeamonn.gitlensms-azuretools.vscode-dockerExample:
# Install Python extension
code-server --install-extension ms-python.pythonMost extensions work, but some don't:
✅ Work Well:
⚠️ May Not Work:
Check compatibility: See extension's marketplace page for web/remote support.
# Check current status
./code-server-status.shThis shows:
If resource usage high:
./manage-extensions.shInteractive menu:
Example:
$ ./manage-extensions.sh
1) List installed
2) Install extension
3) Remove extension
Enter choice: 1
Installed Extensions:
- ms-python.python (Python)
- dbaeumer.vscode-eslint (ESLint)
- esbenp.prettier-vscode (Prettier)For detailed extension management, see Extension Management Guide.
Stop code-server and tunnel when you're done. This frees up resources.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./code-server-stop.shThis will:
The script will show:
Stopping code-server remote IDE session...
✓ Tunnel stopped
✓ code-server stopped
Final resource usage:
code-server: 1.2 GB (peak)
Session duration: 2 hours 15 minutes
Session ended successfully.Verify Nothing Running:
./code-server-status.shShould show: code-server is not running
Troubleshooting Stop:
ps aux | grep code-serverpkill -9 code-server && pkill -9 ngrokCheck if code-server session is running and get connection info.
cd ~/.claude/skills/code-server-remote-ide-wsl2/scripts
./code-server-status.shIf Running, you'll see:
==================================================
code-server Remote IDE - STATUS
==================================================
Status: RUNNING ✓
🌐 Connection URL:
https://abc123.ngrok-free.app
🔐 Login Password:
aB3$xK9#mL2@pQ7!
⏱️ Session Duration: 1 hour 23 minutes
📊 Resource Usage:
code-server: 856 MB
Tunnel: 24 MB
Total: 880 MB
💻 System Resources:
WSL2 Memory Limit: 8 GB
Currently Used: 2.1 GB (26%)
Available: 5.9 GB
📦 Extensions Loaded: 8
To stop session: ./code-server-stop.sh
==================================================If Stopped, you'll see:
==================================================
code-server Remote IDE - STATUS
==================================================
Status: NOT RUNNING
To start session: ./code-server-start.sh
==================================================Check before starting: Avoid starting duplicate sessions
./code-server-status.sh && ./code-server-start.shGet URL when you forgot it: Status shows current URL
./code-server-status.sh # Copy URL from outputMonitor resource usage: See if memory is getting high
./code-server-status.sh # Check memory usageCheck if forgotten session running: See if you left it running
./code-server-status.sh # If running, consider stoppingSecurity-First Design: This skill implements defense-in-depth security to protect your WSL2 development environment.
✅ Authentication Required
✅ HTTPS Encryption
✅ Localhost Binding
✅ Secure Credential Storage
✅ WebSocket Origin Validation
Do:
./code-server-status.sh)Don't:
Protected Against:
Not Protected Against (out of scope):
⚠️ code-server Has Full Access:
⚠️ Extensions Can Execute Code:
⚠️ ngrok Free Tier Warning: ngrok free tier URLs are public. However:
For enhanced security, see Security Guide:
1. Choose Fast Tunnel:
2. Limit Extensions:
3. Close Unused Tabs:
4. Optimize Settings:
{
"files.watcherExclude": {
"**/node_modules/**": true,
"**/.git/objects/**": true
},
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true
}
}5. Use Search Wisely:
# Check resource usage
./code-server-status.sh
# If high:
# - Remove extensions
# - Close tabs
# - Restart sessionFor detailed optimization, see Performance Optimization Guide.
Error: code-server: command not found
Fix:
# Reinstall code-server
./install.shError: Address already in use (port 8080)
Fix:
# Find what's using port
lsof -i :8080
# Kill the process
kill <PID>
# Or use different port
CODE_SERVER_PORT=8081 ./code-server-start.shError: "Incorrect password" or password doesn't work
Fix:
# Reset password
./configure-auth.sh
# Get new password
./code-server-status.shError in browser console: WebSocket connection failed
Fix:
./code-server-status.sh./code-server-stop.sh && ./code-server-start.shIssue: code-server using >2GB memory
Fix:
./configure-resources.shIssue: Installed extension doesn't appear
Fix:
Issue: IDE feels sluggish, typing delayed
Fix:
ping 8.8.8.8 (should be <100ms)htopFor more issues, see Troubleshooting Guide.
Comprehensive guides for deeper understanding:
All automation scripts are in scripts/ directory:
./install.sh # Interactive installer for code-server + tunnel
./install.sh --ngrok # Non-interactive: install with ngrok
./install.sh --cloudflare # Non-interactive: install with Cloudflare
./install.sh --tailscale # Non-interactive: install with Tailscale./configure-auth.sh # Interactive: generate hashed password
./configure-auth.sh --custom-password # Interactive: use your password
./configure-resources.sh # Interactive: configure WSL2 limits./code-server-start.sh # Start code-server + tunnel, display URL
./code-server-stop.sh # Stop both gracefully
./code-server-status.sh # Check status, show URL + resources./manage-extensions.sh # Interactive extension manager./health-check.sh # Verify installation and configurationConfiguration templates for advanced users:
File: templates/config.yaml.template
Example config.yaml (created automatically by configure-auth.sh):
bind-addr: 127.0.0.1:8080
auth: password
password: HASHED_PASSWORD_HERE
cert: falseFile: templates/.wslconfig.template
Example .wslconfig for Windows (created by configure-resources.sh):
[wsl2]
memory=8GB
processors=4
swap=2GBFile: templates/code-server.service
For auto-start on WSL2 boot (requires systemd support):
# Copy template
cp templates/code-server.service ~/.config/systemd/user/
# Enable auto-start
systemctl --user enable code-server
systemctl --user start code-serverFile: templates/.env.template
Example .env configuration (created by configure-auth.sh):
CODE_SERVER_PASSWORD=strongpassword
TUNNEL_TYPE=cloudflare
CLOUDFLARE_TUNNEL_TOKEN=your_token_hereWhen to use code-server (this skill):
When to use ttyd:
Can use both: Install both skills, use ttyd for quick tasks, code-server for serious coding.
After Setup:
Advanced Setup:
Explore More:
You've successfully setup remote IDE access when:
./code-server-start.sh)./code-server-stop.sh)./code-server-status.sh)Congratulations! You now have secure remote VS Code IDE access from any device.
code-server-remote-ide-wsl2 - Full VS Code IDE, anywhere you go.
93ed392
Also appears in
since Sep 12, 2026
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.