Skip to content
Login Changemaker Archive. Learn more

# Code Server: VS Code in Your Browser

Code Server brings the powerful and familiar Visual Studio Code experience directly to your web browser. This allows you to develop, edit code, and manage your projects from any device with internet access, without needing to install VS Code locally.

It's an essential tool within Changemaker for making quick edits to your website content, managing configuration files, or even full-fledged development tasks on the go.

## Key Features

- Full VS Code Experience: Access almost all features of desktop VS Code, including the editor, terminal, debugger (for supported languages), extensions, themes, and settings.
- Remote Access: Code from anywhere, on any device (laptops, tablets, etc.).
- Workspace Management: Open and manage your project folders just like in desktop VS Code.
- Extension Marketplace: Install and use your favorite VS Code extensions.
- Integrated Terminal: Access a terminal directly within the browser interface.
- Git Integration: Manage your version control seamlessly.

## Documentation

For more detailed information about Code Server, visit the official repository.

## Getting Started with Code Server

### Accessing Code Server

1. URL: You can access Code Server locally via `http://localhost:8888/` (or your configured external URL if set up).
2. Login: You will be prompted for a password. This password can be found in the configuration file located at `configs/code-server/.config/code-server/config.yaml` within your main Changemaker project directory (e.g., `/home/bunker-admin/Changemaker/configs/code-server/.config/code-server/config.yaml`). You might need to access this file directly on your server or through another method for the initial password retrieval.

### Basic Usage: Editing Your Documentation Site

A common use case within Changemaker is editing your MkDocs documentation site.

1. Open Your Workspace:

   - Once logged into Code Server, use the "File" menu or the Explorer sidebar to "Open Folder...".
   - Navigate to and select the root directory of your Changemaker project (e.g., `/home/bunker-admin/Changemaker/` or the path where your Changemaker files are located if different, typically where the `docker-compose.yml` for Changemaker is).

2. Navigate to Documentation Files:

   - In the Explorer sidebar, expand the `mkdocs` folder, then the `docs` folder.
   - Here you'll find all your Markdown (`.md`) files (like `index.md`, `readme.md`, files within `apps/`, etc.), your site configuration (`mkdocs.yml`), and custom assets (like `stylesheets/extra.css` or files in `overrides/`).

3. Edit a File:

   - Click on a Markdown file (e.g., `index.md` or any page you want to change like `apps/code-server.md` itself!).
   - The file will open in the editor. Make your changes using standard Markdown syntax. You'll benefit from live preview capabilities if you have the appropriate VS Code extensions installed (e.g., Markdown Preview Enhanced).

4. Save Changes:

   - Press `Ctrl+S` (or `Cmd+S` on Mac) to save your changes.
   - If your MkDocs development server is running with live reload (e.g., via `mkdocs serve` executed in a terminal, perhaps within Code Server itself or on your host machine), your documentation site should update automatically in your browser. Otherwise, you may need to rebuild/redeploy your MkDocs site.

### Using the Integrated Terminal

The integrated terminal is extremely useful for various tasks without leaving Code Server: * Running Git commands (`git pull`, `git add .`, `git commit -m "docs: update content"`, `git push`). * Managing your MkDocs site (`mkdocs serve` to start a live-preview server, `mkdocs build` to generate static files). * Any other shell commands needed for your project.

To open the terminal: Go to "Terminal" > "New Terminal" in the Code Server menu, or use the shortcut (often `Ctrl+\` or `Ctrl+~`).

## Further Information

For more detailed information on Code Server's features, advanced configurations, and troubleshooting, please refer to the official Code Server Documentation.