coder/docs/ides/web-ides.md

6.7 KiB

Web IDEs

By default, Coder workspaces allow connections via:

It's common to also let developers to connect via web IDEs.

Row of IDEs

In Coder, web IDEs are defined as coder_app resources in the template. With our generic model, any web application can be used as a Coder application. For example:

# Add button to open Portainer in the workspace dashboard
# Note: Portainer must be already running in the workspace
resource "coder_app" "portainer" {
  agent_id      = coder_agent.main.id
  slug          = "portainer"
  display_name  = "Portainer"
  icon          = "https://simpleicons.org/icons/portainer.svg"
  url           = "https://localhost:9443/api/status"

  healthcheck {
    url       = "https://localhost:9443/api/status"
    interval  = 6
    threshold = 10
  }
}

code-server

code-server in a workspace

code-server 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:

# edit your template
cd your-template/
vim main.tf
resource "coder_agent" "main" {
    arch           = "amd64"
    os             = "linux"
    startup_script = <<EOF
    #!/bin/sh
    # install code-server
    # add '-s -- --version x.x.x' to install a specific code-server version
    curl -fsSL https://code-server.dev/install.sh | sh

    # start code-server on a specific port
    # authn is off since the user already authn-ed into the coder deployment
    code-server --auth none --port 13337
    EOF
}

For advanced use, we recommend installing code-server in your VM snapshot or container image. Here's a Dockerfile which leverages some special code-server features:

FROM codercom/enterprise-base:ubuntu

# install the latest version
RUN curl -fsSL https://code-server.dev/install.sh | sh

# pre-install VS Code extensions
RUN code-server --install-extension eamodio.gitlens

# directly start code-server with the agent's startup_script (see above),
# or use a process manager like supervisord

You'll also need to specify a coder_app resource related to the agent. This is how code-server is displayed on the workspace page.

resource "coder_app" "code-server" {
  agent_id     = coder_agent.main.id
  slug         = "code-server"
  display_name = "code-server"
  url          = "http://localhost:13337/?folder=/home/coder"
  icon         = "/icon/code.svg"

  healthcheck {
    url       = "http://localhost:13337/healthz"
    interval  = 2
    threshold = 10
  }

}

JetBrains Projector

JetBrains Projector is a JetBrains Incubator project which renders JetBrains IDEs in the web browser.

PyCharm in Coder

It is common to see latency and performance issues with Projector. We recommend using JetBrains Gateway whenever possible (also no Template edits required!)

Workspace requirements:

  • JetBrains projector CLI

  • At least 4 CPU cores and 4 GB RAM

  • CLion

  • PyCharm

  • DataGrip

  • GoLand

  • IntelliJ IDEA Community

  • IntelliJ IDEA Ultimate

  • PhpStorm

  • PyCharm Community

  • PyCharm Professional

  • Rider

  • RubyMine

  • WebStorm

Pre-built templates:

You can reference/use these pre-built templates with JetBrains projector:

You need to have a valid ~/.kube/config on your Coder host and a namespace on a Kubernetes cluster to use the Kubernetes pod template examples.

======= PyCharm in Coder

JupyterLab

Configure your agent and coder_app like so to use Jupyter. Notice the subdomain=true configuration:

data "coder_workspace" "me" {}

resource "coder_agent" "coder" {
  os             = "linux"
  arch           = "amd64"
  dir            = "/home/coder"
  startup_script = <<-EOF
pip3 install jupyterlab
$HOME/.local/bin/jupyter lab --ServerApp.token='' --ip='*'
EOF
}

resource "coder_app" "jupyter" {
  agent_id     = coder_agent.coder.id
  slug         = "jupyter"
  display_name = "JupyterLab"
  url          = "http://localhost:8888"
  icon         = "/icon/jupyter.svg"
  share        = "owner"
  subdomain    = true

  healthcheck {
    url       = "http://localhost:8888/healthz"
    interval  = 5
    threshold = 10
  }
}

JupyterLab in Coder

RStudio

Configure your agent and coder_app like so to use RStudio. Notice the subdomain=true configuration:

resource "coder_agent" "coder" {
  os             = "linux"
  arch           = "amd64"
  dir            = "/home/coder"
  startup_script = <<EOT
#!/bin/bash
# start rstudio
/usr/lib/rstudio-server/bin/rserver --server-daemonize=1 --auth-none=1 &
EOT
}

# rstudio
resource "coder_app" "rstudio" {
  agent_id      = coder_agent.coder.id
  slug          = "rstudio"
  display_name  = "R Studio"
  icon          = "https://upload.wikimedia.org/wikipedia/commons/d/d0/RStudio_logo_flat.svg"
  url           = "http://localhost:8787"
  subdomain     = true
  share         = "owner"

  healthcheck {
    url       = "http://localhost:8787/healthz"
    interval  = 3
    threshold = 10
  }
}

RStudio in Coder

Airflow

Configure your agent and coder_app like so to use Airflow. Notice the subdomain=true configuration:

resource "coder_agent" "coder" {
  os   = "linux"
  arch = "amd64"
  dir  = "/home/coder"
  startup_script = <<EOT
#!/bin/bash
# install and start airflow
pip3 install apache-airflow
/home/coder/.local/bin/airflow standalone &
EOT
}

resource "coder_app" "airflow" {
  agent_id      = coder_agent.coder.id
  slug          = "airflow"
  display_name  = "Airflow"
  icon          = "https://upload.wikimedia.org/wikipedia/commons/d/de/AirflowLogo.png"
  url           = "http://localhost:8080"
  subdomain     = true
  share         = "owner"

  healthcheck {
    url       = "http://localhost:8080/healthz"
    interval  = 10
    threshold = 60
  }
}

Airflow in Coder

SSH Fallback

If you prefer to run web IDEs in localhost, you can port forward using SSH or the Coder CLI port-forward sub-command. Some web IDEs may not support URL base path adjustment so port forwarding is the only approach.