diff --git a/docs/ides.md b/docs/ides.md index a8d038c06b623..b14f478aa5d9b 100644 --- a/docs/ides.md +++ b/docs/ides.md @@ -16,6 +16,8 @@ support should work: - Rider - RubyMine - WebStorm +- Web IDEs (code-server, JupyterLab, Jetbrains Projector) + - Note: These are [configured in the template](./ides/configuring-web-ides.md) ## SSH configuration @@ -57,88 +59,6 @@ Code, connected to your Coder workspace for compute, etc. 1. In VS Code's left-hand nav bar, click **Remote Explorer** and right-click on a workspace to connect. -## VS Code in the browser +## Web IDEs (Jupyter, code-server, Jetbrains Projector) -> You must have Docker Desktop running for this template to work. - -Coder offers a [sample template that includes -code-server](../examples/templates/docker-code-server/README.md). - -To use: - -1. Start Coder: - - ```console - coder server --dev - ``` - -1. Open a new terminal and run: - - ```console - coder templates init - ``` - -1. Select the **Develop code-server in Docker** option when prompted. - -1. Navigate into your new folder and create your sample template: - - ```console - cd code-server-docker && coder templates create - ``` - - Follow the prompts that appear in the terminal. - -1. Create your workspace: - - ```console - coder create --template="docker-code-server" [workspace name] - ``` - -1. Log into Coder's Web UI, and open your workspace. Then, - click **code-server** to launch VS Code in a new browser window. - -## JetBrains Gateway with SSH - -If your image -[includes a JetBrains IDE](../admin/workspace-management/installing-jetbrains.md) -and you've [set up SSH access to Coder](./ssh.md), you can use JetBrains Gateway -to run a local JetBrains IDE connected to your Coder workspace. - -> See the [Docker sample template](../examples/templates/docker/main.tf) for an -> example of how to refer to images in your template. - -Please note that: - -- Your Coder workspace must be running, and Gateway needs compute resources, so - monitor your resource usage on the Coder dashboard and adjust accordingly. -- If you use a premium JetBrains IDE (e.g., GoLand, IntelliJ IDEA Ultimate), you - will still need a license to use it remotely with Coder. - -1. [Download and install JetBrains Toolbox](https://www.jetbrains.com/toolbox-app/). - Locate JetBrains Gateway in the Toolbox list and click **Install**. - -1. Open JetBrains Gateway and click **Connect via SSH** within the **Run the IDE - Remotely** section. - -1. Click the small **gear icon** to the right of the **Connection** field, then - the **+** button on the next screen to create a new configuration. - -1. Enter your Coder workspace alias target in **Host** (e.g., - `coder.`), `22` in **Port**, `coder` in **User name**, and change - **Authentication Type** to **OpenSSH config and authentication agent**. Leave - the local port field blank. Click **Test Connection**. If the test is - successful, click **Ok** at the bottom to proceed. - -1. With your created configuration in the **Connection** chosen in the drop-down - field, click **Check Connection and Continue**. - -1. Select a JetBrains IDE from the **IDE version** drop-down (make sure that you - choose the IDE included in your image), then click the folder icon and select the - `/home/coder` directory in your Coder workspace. Click **Download and Start - IDE** to proceed. - -1. During this installation step, Gateway downloads the IDE and a JetBrains - client. This may take a couple of minutes. - -1. When your IDE download is complete, JetBrains will prompt you for your - license. When done, you'll be able to use your IDE. +Web IDEs (code-server, JetBrains Projector, VNC, etc.) are defined in the template. See [configuring IDEs](./templates/configuring-ides.md). diff --git a/docs/ides/configuring-web-ides.md b/docs/ides/configuring-web-ides.md new file mode 100644 index 0000000000000..d399e27d8cf5d --- /dev/null +++ b/docs/ides/configuring-web-ides.md @@ -0,0 +1,146 @@ +# Configuring web IDEs + +By default, Coder workspaces allow connections via: + +- Web terminal +- SSH (plus any [SSH-compatible IDE](../ides.md)) + +It's common to also let developers to connect via web IDEs. + +![Row of IDEs](../images/ide-row.png) + +In Coder, web IDEs are defined as +[coder_app](https://registry.terraform.io/providers/coder/coder/latest/docs/resources/app) +resources in the template. This gives you full control over the version, +behavior, and configuration for applications in your workspace. + +## code-server + +![code-server in a workspace](../images/code-server-ide.png) + +[code-server](https://github.com/coder/coder) is our supported method of running VS Code in the web browser. A simple way to install code-server in Linux/MacOS workspaces is via the Coder agent in your template: + +```sh +# edit your template +cd your-template/ +vim main.tf +``` + +```hcl +resource "coder_agent" "dev" { + arch = "amd64" + os = "linux" + startup_script = < Coder-provided VNC clients are on the roadmap ([#2106](https://github.com/coder/coder/issues/2106)). + +As a starting point, see the [desktop-container](https://github.com/bpmct/coder-templates/tree/main/desktop-container) community template. It builds & provisions a Dockerized workspace with the following software: + +- Ubuntu 20.04 +- TigerVNC server +- noVNC client +- XFCE Desktop + +## JetBrains Projector + +[JetBrains Projector](https://jetbrains.github.io/projector-client/mkdocs/latest/) is a JetBrains Incubator project which renders JetBrains IDEs in the web browser. + +![JetBrains Projector in Coder](../images/jetbrains-projector.png) + +> It is common to see latency and performance issues with Projector. We recommend using [Jetbrains Gateway](https://youtrack.jetbrains.com/issues/GTW) whenever possible (also no Template edits required!) + +Workspace requirements: + +- JetBrains server +- IDE (e.g IntelliJ IDEA, pyCharm) + +Installation instructions will vary depending on your workspace's operating system, platform, and build system. + +As a starting point, see the [jetbrains-container](https://github.com/bpmct/coder-templates/tree/main/jetbrains-container) community template. It builds & provisions a Dockerized workspaces for the following IDEs: + +- CLion +- pyCharm +- DataGrip +- IntelliJ IDEA Community +- IntelliJ IDEA Ultimate +- PhpStorm +- pyCharm Community +- PyCharm Professional +- Rider +- Rubymine +- WebStorm +- ➕ code-server (just in case!) + +## Custom IDEs and applications + +As long as the process is running on the specified port inside your resource, you support any application. + +```sh +# edit your template +cd your-template/ +vim main.tf +``` + +```hcl +resource "coder_app" "portainer" { + agent_id = coder_agent.dev.id + name = "portainer" + icon = "https://simpleicons.org/icons/portainer.svg" + url = "http://localhost:8000" + relative_path = true +} +``` + +> The full `coder_app` schema is described in the +> [Terraform provider](https://registry.terraform.io/providers/coder/coder/latest/docs/resources/app). + +```sh +# update your template +coder templates update your-template +``` diff --git a/docs/images/code-server-ide.png b/docs/images/code-server-ide.png new file mode 100644 index 0000000000000..a35720acdd2b8 Binary files /dev/null and b/docs/images/code-server-ide.png differ diff --git a/docs/images/custom-app.png b/docs/images/custom-app.png new file mode 100644 index 0000000000000..297889ed6921c Binary files /dev/null and b/docs/images/custom-app.png differ diff --git a/docs/images/ide-row.png b/docs/images/ide-row.png new file mode 100644 index 0000000000000..90f007d059273 Binary files /dev/null and b/docs/images/ide-row.png differ diff --git a/docs/images/jetbrains-projector.png b/docs/images/jetbrains-projector.png new file mode 100644 index 0000000000000..a0b7285dd93d4 Binary files /dev/null and b/docs/images/jetbrains-projector.png differ diff --git a/docs/images/vnc-desktop.png b/docs/images/vnc-desktop.png new file mode 100644 index 0000000000000..e584be31d9d57 Binary files /dev/null and b/docs/images/vnc-desktop.png differ diff --git a/docs/manifest.json b/docs/manifest.json index a1cd32e1ccfc9..6517d0de19603 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1,5 +1,7 @@ { - "versions": ["0.6.6"], + "versions": [ + "0.6.6" + ], "routes": [ { "title": "About", @@ -32,13 +34,12 @@ "path": "./templates.md", "icon": " ", "children": [ - { - "title": "Authentication & Secrets", - "description": "Learn how to authenticate the provisioner", - "path": "./templates/authentication.md", - "icon": "" - } - ] + { + "title": "Authentication & Secrets", + "description": "Learn how to authenticate the provisioner", + "path": "./templates/authentication.md" + } + ] }, { "title": "Workspaces", @@ -49,8 +50,15 @@ { "title": "IDEs", "description": "Learn how to use your IDE of choice with Coder.", + "path": "./ides.md", "icon": "\n\n\n", - "path": "./ides.md" + "children": [ + { + "title": "Configuring Web IDEs", + "description": "Learn how to configure web IDEs in your templates", + "path": "./ides/configuring-web-ides.md" + } + ] }, { "title": "Dotfiles",