Accessing Your Workspace

Accessing Your Workspace

This guide explains how to log into your workspace, use the development environment, and work effectively in your cloud-based IDE.

Logging Into Your Workspace

Prerequisites

Before accessing your workspace:

• ✅ Workspace status is "Running"
• ✅ You have the workspace password
• ✅ Modern web browser (Chrome, Firefox, Safari, Edge)
• ✅ Stable internet connection

Access Steps

1. Start Your Workspace (if not already running)

   • Go to Codex Web dashboard
   • Find your workspace
   • Click Start button
   • Wait for status: "Running"

2. Open Workspace

   • Click the Open button
   • New browser tab opens

3. Enter Password

   • You'll see code-server password prompt
   • Enter your workspace password
   • Click Submit

4. Welcome to Your Workspace!

   • VS Code interface loads
   • You're now in your development environment

Workspace URL Format

Your workspace URL follows this pattern:

https://preview.codexeditor.app/{namespace}/{workspace-name}

Example:

https://preview.codexeditor.app/codex-platform-grp123/workspace-abc456

Tips:

• Bookmark the URL for quick access
• URL remains the same (even after restart)
• Share URL only with authorized users
• Each workspace has unique URL

Authentication

Code-Server Password:

• Set when workspace was created
• Required every time you access
• Separate from Codex Web login
• Cannot be changed (create new workspace instead)

Browser Session:

• Password is remembered during browser session
• Closing tab requires re-authentication
• Different workspace = different password

Your Development Environment

Interface Overview

The code-server interface is VS Code running in your browser:

┌─────────────────────────────────────────────────┐
│  Menu Bar (File, Edit, View, etc.)              │
├─────────┬───────────────────────────────────────┤
│         │                                        │
│ File    │     Editor Area                       │
│ Explorer│     (Your code files)                 │
│         │                                        │
│ Search  │                                        │
│         │                                        │
│ Git     │─────────────────────────────────────  │
│         │     Terminal                          │
│ Exten-  │     $ cursor_here                     │
│ sions   │                                        │
│         │                                        │
└─────────┴───────────────────────────────────────┘

Key Components

1. Activity Bar (Left Side)

• 📁 Explorer: Browse files and folders
• 🔍 Search: Find across all files
• 🔀 Source Control: Git integration
• 🐛 Debug: Run and debug code
• 🧩 Extensions: Install add-ons

2. Side Bar

• Context-specific content
• File tree in Explorer view
• Search results in Search view
• Git changes in Source Control

3. Editor Area (Center)

• Multiple tabs for open files
• Split editor layouts
• Code editing
• Syntax highlighting

4. Terminal (Bottom)

• Full command-line access
• Multiple terminal sessions
• Run commands, scripts
• Install packages

5. Status Bar (Bottom)

• Current branch
• Line/column position
• File encoding
• Language mode

Working with Files

Persistent Storage Location

Important: Your persistent storage is located at:

/workspace/.codex-projects

What This Means:

• ✅ Files HERE are preserved when workspace stops
• ❌ Files ELSEWHERE may be lost
• 🔒 Always work in this directory!

Creating a New Project

Option 1: Using Terminal

cd /workspace/.codex-projects
mkdir my-project
cd my-project
git init

Option 2: Using File Explorer

1. Click Explorer icon
2. Navigate to /workspace/.codex-projects
3. Right-click → New Folder
4. Name your project

Cloning a Git Repository

cd /workspace/.codex-projects
git clone https://github.com/username/repo.git
cd repo

File Operations

Creating Files:

• Click File → New File
• Or right-click in Explorer → New File
• Or use terminal: touch filename.js

Opening Files:

• Click file in Explorer
• Or use File → Open File
• Or use terminal: code filename.js

Saving Files:

• Ctrl/Cmd + S to save
• File → Save All for multiple files
• Auto-save can be enabled in settings

Deleting Files:

• Right-click file → Delete
• Or use terminal: rm filename.js
• Files go to trash (recoverable)

Using the Terminal

Opening Terminal

Methods:

• Click Terminal → New Terminal
• Press Ctrl/Cmd + `` ``
• Use terminal icon in activity bar

Terminal Features

Multiple Terminals:

• Create multiple terminal sessions
• Switch between them using dropdown
• Each terminal is independent

Terminal Commands:

# Navigate directories
cd /workspace/.codex-projects
ls -la

# Run your code
npm run dev
python app.py
go run main.go

# Install dependencies
npm install
pip install -r requirements.txt
cargo build

# Git operations
git status
git add .
git commit -m "message"
git push

Pre-Installed Tools

Typical workspace includes:

• Git
• Node.js and npm
• Python 3
• Common Unix utilities

Check versions:

git --version
node --version
python --version

Installing Additional Tools:

# Node packages
npm install -g typescript

# Python packages
pip install pandas numpy

# System packages (if you have sudo)
sudo apt-get update
sudo apt-get install [package]

Git Integration

Source Control View

Accessing:

1. Click Source Control icon (left sidebar)
2. Or press Ctrl/Cmd + Shift + G

Features:

• View changed files
• Stage/unstage changes
• Commit with messages
• Push/pull from remote
• View history
• Create branches

Basic Git Workflow

1. Stage Changes:

• Click + next to changed file
• Or stage all: click + next to "Changes"

2. Commit:

• Enter commit message in text box
• Click ✓ checkmark to commit

3. Push:

• Click ... menu → Push
• Or use terminal: git push

4. Pull:

• Click ... menu → Pull
• Or use terminal: git pull

Git in Terminal

# Check status
git status

# Stage files
git add file.js
git add .

# Commit
git commit -m "Add new feature"

# Push to remote
git push origin main

# Pull from remote
git pull origin main

# Create branch
git checkout -b feature-branch

# Switch branch
git checkout main

Installing Extensions

Accessing Extensions Marketplace

1. Click Extensions icon (left sidebar)
2. Or press Ctrl/Cmd + Shift + X
3. Search for extensions

Popular Extensions

Languages:

• Python
• JavaScript/TypeScript
• Go
• Java
• PHP

Tools:

• Prettier (code formatting)
• ESLint (JavaScript linting)
• GitLens (advanced Git)
• Docker
• Live Share (collaboration)

Installing an Extension

1. Search for extension name
2. Click Install button
3. Extension activates automatically
4. Some require workspace reload

Extensions Persist:

• Installed extensions remain after workspace restart
• Stored in persistent storage
• No need to reinstall

Customizing Your Environment

Settings

Accessing Settings:

• File → Preferences → Settings
• Or press Ctrl/Cmd + ,

Common Settings:

• Theme (color scheme)
• Font size
• Tab size
• Auto-save
• Format on save

Keyboard Shortcuts

Essential Shortcuts:

Action	Windows/Linux	macOS
Command Palette	Ctrl+Shift+P	Cmd+Shift+P
Quick Open	Ctrl+P	Cmd+P
Terminal	Ctrl+`	Cmd+`
Save	Ctrl+S	Cmd+S
Find	Ctrl+F	Cmd+F
Replace	Ctrl+H	Cmd+H
Go to Line	Ctrl+G	Cmd+G
Comment Line	Ctrl+/	Cmd+/

View Shortcuts:

• File → Preferences → Keyboard Shortcuts
• Or press Ctrl/Cmd + K, Ctrl/Cmd + S

Themes

Changing Theme:

1. Ctrl/Cmd + Shift + P (Command Palette)
2. Type "Color Theme"
3. Select theme from list
4. Preview by arrow keys

Popular Themes:

• Dark+ (default dark)
• Light+ (default light)
• Monokai
• Dracula
• One Dark Pro

Running and Debugging Code

Running Code

Via Terminal:

# Node.js
node app.js

# Python
python script.py

# Go
go run main.go

# With package managers
npm run dev
npm start
yarn dev

Via Run Button:

• Some languages support Run button
• Appears in upper right of editor
• Runs current file

Debugging

Setup Debug Configuration:

1. Click Debug icon (left sidebar)
2. Click create a launch.json file
3. Select environment (Node, Python, etc.)
4. Configuration file is created

Start Debugging:

• Press F5
• Or click Debug icon → Start Debugging

Debug Features:

• Set breakpoints (click line number)
• Step through code
• Inspect variables
• Watch expressions
• Call stack

Development Workflows

Web Development Example

# Clone repository
cd /workspace/.codex-projects
git clone https://github.com/user/my-app.git
cd my-app

# Install dependencies
npm install

# Start dev server
npm run dev

# Server runs on port (e.g., 3000)
# Access via workspace URL + port forwarding

Python Development Example

# Create project
cd /workspace/.codex-projects
mkdir python-project
cd python-project

# Create virtual environment
python -m venv venv
source venv/bin/activate

# Install dependencies
pip install flask pandas

# Run application
python app.py

Working with Multiple Projects

Separate Directories:

/workspace/.codex-projects/
├── frontend-app/
├── backend-api/
├── data-analysis/
└── personal-scripts/

Switch Between Projects:

• Use terminal: cd /workspace/.codex-projects/project-name
• Open different folder in File Explorer
• Open new workspace window: File → Open Folder

Port Forwarding

Accessing Web Applications

When running a web server in your workspace:

Local Development Servers:

• Express on port 3000
• Flask on port 5000
• Django on port 8000

Accessing from Browser: Port forwarding is typically handled automatically. Check with your administrator for specific URLs.

Viewing Forwarded Ports:

• Click Ports tab in terminal panel
• Shows forwarded ports
• Click to open in browser

Best Practices

File Management

Organization:

/workspace/.codex-projects/
├── project-name/
│   ├── src/
│   ├── tests/
│   ├── docs/
│   ├── .git/
│   ├── README.md
│   └── package.json

Naming Conventions:

• Use clear, descriptive names
• Follow language conventions
• Include README files
• Document setup steps

Git Hygiene

Commit Often:

• Small, focused commits
• Clear commit messages
• Push regularly

Branch Strategy:

• Main branch for stable code
• Feature branches for development
• Don't commit directly to main

Gitignore:

• Exclude node_modules
• Exclude build artifacts
• Exclude environment files
• Include .gitignore in repository

Resource Awareness

Monitor Usage:

• Check terminal processes
• Close unused tabs
• Kill finished processes
• Clear logs periodically

Optimize Performance:

• Close large files when done
• Limit open editor tabs
• Stop dev servers when not needed
• Clear terminal output

Security

Don't Commit Secrets:

# Use .env files (add to .gitignore)
API_KEY=secret_key_here
DATABASE_URL=postgres://...

# Load in code
require('dotenv').config()

Good Practices:

• Store credentials in .env
• Add .env to .gitignore
• Use environment variables
• Don't hardcode passwords

Collaboration

Sharing Code

Via Git:

1. Push code to shared repository
2. Team clones repository
3. Everyone has own workspace
4. Collaborate via pull requests

Not via Workspace:

• Don't share workspace passwords
• Don't work in same workspace simultaneously
• Each developer gets own workspace

Code Reviews

Workflow:

1. Work in your workspace
2. Commit and push to feature branch
3. Create pull request
4. Team reviews on GitHub/GitLab
5. Merge when approved

Troubleshooting

Connection Lost

Symptoms:

• "Connection lost" message
• Editor unresponsive
• Commands don't work

Solutions:

1. Check internet connection
2. Refresh browser page
3. Restart workspace if persistent
4. Check workspace status in Codex Web

Files Not Saving

Check:

• File is not read-only
• Sufficient storage space
• File is in persistent directory
• No permission issues

Solutions:

1. Check file permissions
2. Save to different location
3. Check workspace storage usage
4. Copy content and recreate file

Terminal Not Working

Issues:

• Terminal won't open
• Commands not executing
• Unexpected errors

Solutions:

1. Close and reopen terminal
2. Create new terminal session
3. Restart workspace
4. Check terminal process limit

Performance Issues

Symptoms:

• Slow editor response
• Terminal lag
• File operations slow

Solutions:

1. Check resource usage (Codex Web)
2. Close unused tabs and terminals
3. Stop background processes
4. Restart workspace
5. Consider higher resource tier

Tips and Tricks

Productivity Tips

Command Palette:

• Ctrl/Cmd + Shift + P for any action
• Search for any command
• Fastest way to access features

Quick File Open:

• Ctrl/Cmd + P to open files quickly
• Type filename
• No need to navigate tree

Multi-Cursor:

• Alt + Click to add cursor
• Ctrl/Cmd + D to select next occurrence
• Edit multiple locations at once

Split Editor:

• Drag tabs to split view
• Work on multiple files
• Compare code side-by-side

Useful Commands

# Find files
find . -name "*.js"

# Search in files
grep -r "search term" .

# Disk usage
du -sh /workspace/.codex-projects/*

# Process management
ps aux | grep node
kill [PID]

# Check resource usage
htop

Extensions Recommendations

For Web Dev:

• ESLint
• Prettier
• Auto Rename Tag
• Path Intellisense

For Python:

• Python
• Pylance
• Python Docstring Generator

For Everyone:

• GitLens
• Bracket Pair Colorizer
• Better Comments
• Error Lens

Next Steps

• Managing Workspaces - Workspace lifecycle and management
• Understanding Groups - Groups and resources
• Troubleshooting - Common issues and solutions
• Quick Reference - Commands and shortcuts

---

← Managing Workspaces | Admin Overview →