Skip to content

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.