|
| 1 | +# Coder Desktop (Early Access) |
| 2 | + |
| 3 | +Use Coder Desktop to work on your workspaces as though they're on your LAN, no |
| 4 | +port-forwarding required. |
| 5 | + |
| 6 | +> ⚠️ Note: Coder Desktop requires a Coder deployment running [v2.20.0](https://github.com/coder/coder/releases/tag/v2.20.0) or later. |
| 7 | +
|
| 8 | +## Install Coder Desktop |
| 9 | + |
| 10 | +<div class="tabs"> |
| 11 | + |
| 12 | +You can install Coder Desktop on macOS or Windows. |
| 13 | + |
| 14 | +### macOS |
| 15 | + |
| 16 | +1. Use [Homebrew](https://brew.sh/) to install Coder Desktop: |
| 17 | + |
| 18 | + ```shell |
| 19 | + brew install --cask coder/coder/coder-desktop |
| 20 | + ``` |
| 21 | + |
| 22 | + Alternatively, you can manually install Coder Desktop from the [releases page](https://github.com/coder/coder-desktop-macos/releases). |
| 23 | + |
| 24 | +1. Open **Coder Desktop** from the Applications directory. When macOS asks if you want to open it, select **Open**. |
| 25 | + |
| 26 | +1. The application is treated as a system VPN. macOS will prompt you to confirm with: |
| 27 | + |
| 28 | + **"Coder Desktop" would like to use a new network extension** |
| 29 | + |
| 30 | + Select **Open System Settings**. |
| 31 | + |
| 32 | +1. In the **Network Extensions** system settings, enable the Coder Desktop extension. |
| 33 | + |
| 34 | +1. Continue to the [configuration section](#configure). |
| 35 | + |
| 36 | +### Windows |
| 37 | + |
| 38 | +1. Download the latest `CoderDesktop` installer executable (`.exe`) from the [coder-desktop-windows release page](https://github.com/coder/coder-desktop-windows/releases). |
| 39 | + |
| 40 | + Choose the architecture that fits your Windows system, `x64` or `arm64`. |
| 41 | + |
| 42 | +1. Open the `.exe` file, acknowledge the license terms and conditions, and select **Install**. |
| 43 | + |
| 44 | +1. If a suitable .NET runtime is not already installed, the installation might prompt you with the **.NET Windows Desktop Runtime** installation. |
| 45 | + |
| 46 | + In that installation window, select **Install**. Select **Close** when the runtime installation completes. |
| 47 | + |
| 48 | +1. When the Coder Desktop installation completes, select **Close**. |
| 49 | + |
| 50 | +1. Find and open **Coder Desktop** from your Start Menu. |
| 51 | + |
| 52 | +1. Some systems require an additional Windows App Runtime SDK. |
| 53 | + |
| 54 | + Select **Yes** if you are prompted to install it. |
| 55 | + This will open your default browser where you can download and install the latest stable release of the Windows App Runtime SDK. |
| 56 | + |
| 57 | + Reopen Coder Desktop after you install the runtime. |
| 58 | + |
| 59 | +1. Coder Desktop starts minimized in the Windows System Tray. |
| 60 | + |
| 61 | + You might need to select the **^** in your system tray to show more icons. |
| 62 | + |
| 63 | +1. Continue to the [configuration section](#configure). |
| 64 | + |
| 65 | +</div> |
| 66 | + |
| 67 | +## Configure |
| 68 | + |
| 69 | +Before you can use Coder Desktop, you will need to sign in. |
| 70 | + |
| 71 | +1. Open the Desktop menu and select **Sign in**: |
| 72 | + |
| 73 | + <Image height="325px" src="../../images/user-guides/desktop/coder-desktop-pre-sign-in.png" alt="Coder Desktop menu before the user signs in" align="center" /> |
| 74 | + |
| 75 | +1. In the **Sign In** window, enter your Coder deployment's URL and select **Next**: |
| 76 | + |
| 77 | +  |
| 78 | + |
| 79 | +1. macOS: Select the link to your deployment's `/cli-auth` page to generate a [session token](../../admin/users/sessions-tokens.md). |
| 80 | + |
| 81 | + Windows: Select **Generate a token via the Web UI**. |
| 82 | + |
| 83 | +1. In your web browser, you may be prompted to sign in to Coder with your credentials: |
| 84 | + |
| 85 | + <Image height="412px" src="../../images/templates/coder-login-web.png" alt="Sign in to your Coder deployment" align="center" /> |
| 86 | + |
| 87 | +1. Copy the session token to the clipboard: |
| 88 | + |
| 89 | + <Image height="350px" src="../../images/templates/coder-session-token.png" alt="Copy session token" align="center" /> |
| 90 | + |
| 91 | +1. Paste the token in the **Session Token** field of the **Sign In** screen, then select **Sign In**: |
| 92 | + |
| 93 | +  |
| 94 | + |
| 95 | +1. macOS: Allow the VPN configuration for Coder Desktop if you are prompted. |
| 96 | + |
| 97 | + <Image height="350px" src="../../images/user-guides/desktop/mac-allow-vpn.png" alt="Copy session token" align="center" /> |
| 98 | + |
| 99 | +1. Select the Coder icon in the menu bar (macOS) or system tray (Windows), and click the CoderVPN toggle to start the VPN. |
| 100 | + |
| 101 | + This may take a few moments, as Coder Desktop will download the necessary components from the Coder server if they have been updated. |
| 102 | + |
| 103 | +1. macOS: You may be prompted to enter your password to allow CoderVPN to start. |
| 104 | + |
| 105 | +1. CoderVPN is now running! |
| 106 | + |
| 107 | +## CoderVPN |
| 108 | + |
| 109 | +While active, CoderVPN will list your owned workspaces and configure your system to be able to connect to them over private IPv6 addresses and custom hostnames ending in `.coder`. |
| 110 | + |
| 111 | + |
| 112 | + |
| 113 | +To copy the `.coder` hostname of a workspace agent, you can click the copy icon beside it. |
| 114 | + |
| 115 | +On macOS you can use `ping6` in your terminal to verify the connection to your workspace: |
| 116 | + |
| 117 | + ```shell |
| 118 | + ping6 -c 5 your-workspace.coder |
| 119 | + ``` |
| 120 | + |
| 121 | +On Windows, you can use `ping` in a Command Prompt or PowerShell terminal to verify the connection to your workspace: |
| 122 | + |
| 123 | + ```shell |
| 124 | + ping -n 5 your-workspace.coder |
| 125 | + ``` |
| 126 | + |
| 127 | +Any services listening on ports in your workspace will be available on the same hostname. For example, you can access a web server on port `8080` by visiting `http://your-workspace.coder:8080` in your browser. |
| 128 | + |
| 129 | +You can also connect to the SSH server in your workspace using any SSH client, such as OpenSSH or PuTTY: |
| 130 | + |
| 131 | + ```shell |
| 132 | + ssh your-workspace.coder |
| 133 | + ``` |
| 134 | + |
| 135 | +> ⚠️ Note: Currently, the Coder IDE extensions for VSCode and JetBrains create their own tunnel and do not utilize the CoderVPN tunnel to connect to workspaces. |
| 136 | +
|
| 137 | +## Accessing web apps in a secure browser context |
| 138 | + |
| 139 | +Some web applications require a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) to function correctly. |
| 140 | +A browser typically considers an origin secure if the connection is to `localhost`, or over `HTTPS`. |
| 141 | + |
| 142 | +As CoderVPN uses its own hostnames and does not provide TLS to the browser, Google Chrome and Firefox will not allow any web APIs that require a secure context. |
| 143 | + |
| 144 | +> Note: Despite the browser showing an insecure connection without `HTTPS`, the underlying tunnel is encrypted with WireGuard in the same fashion as other Coder workspace connections (e.g. `coder port-forward`). |
| 145 | +
|
| 146 | +If you require secure context web APIs, you will need to mark the workspace hostnames as secure in your browser settings. |
| 147 | + |
| 148 | +We are planning some changes to Coder Desktop that will make accessing secure context web apps easier. Stay tuned for updates. |
| 149 | + |
| 150 | +<div class="tabs"> |
| 151 | + |
| 152 | +### Chrome |
| 153 | + |
| 154 | +1. Open Chrome and visit `chrome://flags/#unsafely-treat-insecure-origin-as-secure`. |
| 155 | + |
| 156 | +1. Enter the full workspace hostname, including the `http` scheme and the port (e.g. `http://your-workspace.coder:8080`), into the **Insecure origins treated as secure** text field. |
| 157 | + |
| 158 | + If you need to enter multiple URLs, use a comma to separate them. |
| 159 | + |
| 160 | +  |
| 161 | + |
| 162 | +1. Ensure that the dropdown to the right of the text field is set to **Enabled**. |
| 163 | + |
| 164 | +1. You will be prompted to relaunch Google Chrome at the bottom of the page. Select **Relaunch** to restart Google Chrome. |
| 165 | + |
| 166 | +1. On relaunch and subsequent launches, Google Chrome will show a banner stating "You are using an unsupported command-line flag". This banner can be safely dismissed. |
| 167 | + |
| 168 | +1. Web apps accessed on the configured hostnames and ports will now function correctly in a secure context. |
| 169 | + |
| 170 | +### Firefox |
| 171 | + |
| 172 | +1. Open Firefox and visit `about:config`. |
| 173 | + |
| 174 | +1. Read the warning and select **Accept the Risk and Continue** to access the Firefox configuration page. |
| 175 | + |
| 176 | +1. Enter `dom.securecontext.allowlist` into the search bar at the top. |
| 177 | + |
| 178 | +1. Select **String** on the entry with the same name at the bottom of the list, then select the plus icon on the right. |
| 179 | + |
| 180 | +1. In the text field, enter the full workspace hostname, without the `http` scheme and port (e.g. `your-workspace.coder`), and then select the tick icon. |
| 181 | + |
| 182 | + If you need to enter multiple URLs, use a comma to separate them. |
| 183 | + |
| 184 | +  |
| 185 | + |
| 186 | +1. Web apps accessed on the configured hostnames will now function correctly in a secure context without requiring a restart. |
| 187 | + |
| 188 | +</div> |
0 commit comments