Skip to content

Commit e906ce2

Browse files
authored
docs: separate coder desktop sections into install and use pages (coder#18068)
[preview](https://coder.com/docs/@coder-desktop-section/user-guides/desktop) we should consider the "Connect" naming in future PRs --------- Co-authored-by: EdwardAngert <17991901+EdwardAngert@users.noreply.github.com>
1 parent e0718a6 commit e906ce2

File tree

3 files changed

+186
-168
lines changed

3 files changed

+186
-168
lines changed

docs/manifest.json

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,15 @@
198198
"description": "Use Coder Desktop to access your workspace like it's a local machine",
199199
"path": "./user-guides/desktop/index.md",
200200
"icon_path": "./images/icons/computer-code.svg",
201-
"state": ["beta"]
201+
"state": ["beta"],
202+
"children": [
203+
{
204+
"title": "Coder Desktop connect and sync",
205+
"description": "Use Coder Desktop to manage your workspace code and files locally",
206+
"path": "./user-guides/desktop/desktop-connect-sync.md",
207+
"state": ["beta"]
208+
}
209+
]
202210
},
203211
{
204212
"title": "Workspace Management",
Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
# Coder Desktop Connect and Sync
2+
3+
Use Coder Desktop to work on your workspaces and files as though they're on your LAN.
4+
5+
> [!NOTE]
6+
> Coder Desktop requires a Coder deployment running [v2.20.0](https://github.com/coder/coder/releases/tag/v2.20.0) or later.
7+
8+
## Coder Connect
9+
10+
While active, Coder Connect will list the workspaces you own and will configure your system to connect to them over private IPv6 addresses and custom hostnames ending in `.coder`.
11+
12+
![Coder Desktop list of workspaces](../../images/user-guides/desktop/coder-desktop-workspaces.png)
13+
14+
To copy the `.coder` hostname of a workspace agent, you can click the copy icon beside it.
15+
16+
You can also connect to the SSH server in your workspace using any SSH client, such as OpenSSH or PuTTY:
17+
18+
```shell
19+
ssh your-workspace.coder
20+
```
21+
22+
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.
23+
24+
> [!NOTE]
25+
> For Coder versions v2.21.3 and earlier: the Coder IDE extensions for VSCode and JetBrains create their own tunnel and do not utilize the Coder Connect tunnel to connect to workspaces.
26+
27+
### Ping your workspace
28+
29+
<div class="tabs">
30+
31+
### macOS
32+
33+
Use `ping6` in your terminal to verify the connection to your workspace:
34+
35+
```shell
36+
ping6 -c 5 your-workspace.coder
37+
```
38+
39+
### Windows
40+
41+
Use `ping` in a Command Prompt or PowerShell terminal to verify the connection to your workspace:
42+
43+
```shell
44+
ping -n 5 your-workspace.coder
45+
```
46+
47+
</div>
48+
49+
## Sync a local directory with your workspace
50+
51+
Coder Desktop file sync provides bidirectional synchronization between a local directory and your workspace.
52+
You can work offline, add screenshots to documentation, or use local development tools while keeping your files in sync with your workspace.
53+
54+
1. Create a new local directory.
55+
56+
If you select an existing clone of your repository, Desktop will recognize it as conflicting files.
57+
58+
1. In the Coder Desktop app, select **File sync**.
59+
60+
![Coder Desktop File Sync screen](../../images/user-guides/desktop/coder-desktop-file-sync.png)
61+
62+
1. Select the **+** in the corner to select the local path, workspace, and remote path, then select **Add**:
63+
64+
![Coder Desktop File Sync add paths](../../images/user-guides/desktop/coder-desktop-file-sync-add.png)
65+
66+
1. File sync clones your workspace directory to your local directory, then watches for changes:
67+
68+
![Coder Desktop File Sync watching](../../images/user-guides/desktop/coder-desktop-file-sync-watching.png)
69+
70+
For more information about the current status, hover your mouse over the status.
71+
72+
File sync excludes version control system directories like `.git/` from synchronization, so keep your Git-cloned repository wherever you run Git commands.
73+
This means that if you use an IDE with a built-in terminal to edit files on your remote workspace, that should be the Git clone and your local directory should be for file syncs.
74+
75+
> [!NOTE]
76+
> Coder Desktop uses `alpha` and `beta` to distinguish between the:
77+
>
78+
> - Local directory: `alpha`
79+
> - Remote directory: `beta`
80+
81+
### File sync conflicts
82+
83+
File sync shows a `Conflicts` status when it detects conflicting files.
84+
85+
You can hover your mouse over the status for the list of conflicts:
86+
87+
![Desktop file sync conflicts mouseover](../../images/user-guides/desktop/coder-desktop-file-sync-conflicts-mouseover.png)
88+
89+
If you encounter a synchronization conflict, delete the conflicting file that contains changes you don't want to keep.
90+
91+
## Accessing web apps in a secure browser context
92+
93+
Some web applications require a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) to function correctly.
94+
A browser typically considers an origin secure if the connection is to `localhost`, or over `HTTPS`.
95+
96+
As Coder Connect 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.
97+
98+
> [!NOTE]
99+
> 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`).
100+
101+
If you require secure context web APIs, you will need to mark the workspace hostnames as secure in your browser settings.
102+
103+
We are planning some changes to Coder Desktop that will make accessing secure context web apps easier. Stay tuned for updates.
104+
105+
<div class="tabs">
106+
107+
### Chrome
108+
109+
1. Open Chrome and visit `chrome://flags/#unsafely-treat-insecure-origin-as-secure`.
110+
111+
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.
112+
113+
If you need to enter multiple URLs, use a comma to separate them.
114+
115+
![Google Chrome insecure origin settings](../../images/user-guides/desktop/chrome-insecure-origin.png)
116+
117+
1. Ensure that the dropdown to the right of the text field is set to **Enabled**.
118+
119+
1. You will be prompted to relaunch Google Chrome at the bottom of the page. Select **Relaunch** to restart Google Chrome.
120+
121+
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.
122+
123+
1. Web apps accessed on the configured hostnames and ports will now function correctly in a secure context.
124+
125+
### Firefox
126+
127+
1. Open Firefox and visit `about:config`.
128+
129+
1. Read the warning and select **Accept the Risk and Continue** to access the Firefox configuration page.
130+
131+
1. Enter `dom.securecontext.allowlist` into the search bar at the top.
132+
133+
1. Select **String** on the entry with the same name at the bottom of the list, then select the plus icon on the right.
134+
135+
1. In the text field, enter the full workspace hostname, without the `http` scheme and port: `your-workspace.coder`. Then select the tick icon.
136+
137+
If you need to enter multiple URLs, use a comma to separate them.
138+
139+
![Firefox insecure origin settings](../../images/user-guides/desktop/firefox-insecure-origin.png)
140+
141+
1. Web apps accessed on the configured hostnames will now function correctly in a secure context without requiring a restart.
142+
143+
</div>
144+
145+
## Troubleshooting
146+
147+
### Mac: Issues updating Coder Desktop
148+
149+
> No workspaces!
150+
151+
And
152+
153+
> Internal Error: The VPN must be started with the app open during first-time setup.
154+
155+
Due to an issue with the way Coder Desktop works with the macOS [interprocess communication mechanism](https://developer.apple.com/documentation/xpc)(XPC) system network extension, core Desktop functionality can break when you upgrade the application.
156+
157+
<div class="tabs">
158+
159+
The resolution depends on which version of macOS you use:
160+
161+
### macOS <=14
162+
163+
1. Delete the application from `/Applications`.
164+
1. Restart your device.
165+
166+
### macOS 15+
167+
168+
1. Open **System Settings**
169+
1. Select **General**
170+
1. Select **Login Items & Extensions**
171+
1. Scroll down, and select the **** for **Network Extensions**
172+
1. Select the **...** next to Coder Desktop, then **Delete Extension**, and follow the prompts.
173+
1. Re-open Coder Desktop and follow the prompts to reinstall the network extension.
174+
175+
</div>

docs/user-guides/desktop/index.md

Lines changed: 2 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -121,171 +121,6 @@ Before you can use Coder Desktop, you will need to sign in.
121121

122122
1. Coder Connect is now running!
123123

124-
## Coder Connect
124+
## Next Steps
125125

126-
While active, Coder Connect will list the workspaces you own and will configure your system to connect to them over private IPv6 addresses and custom hostnames ending in `.coder`.
127-
128-
![Coder Desktop list of workspaces](../../images/user-guides/desktop/coder-desktop-workspaces.png)
129-
130-
To copy the `.coder` hostname of a workspace agent, you can click the copy icon beside it.
131-
132-
You can also connect to the SSH server in your workspace using any SSH client, such as OpenSSH or PuTTY:
133-
134-
```shell
135-
ssh your-workspace.coder
136-
```
137-
138-
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.
139-
140-
> [!NOTE]
141-
> Currently, the Coder IDE extensions for VSCode and JetBrains create their own tunnel and do not utilize the Coder Connect tunnel to connect to workspaces.
142-
143-
### Ping your workspace
144-
145-
<div class="tabs">
146-
147-
### macOS
148-
149-
Use `ping6` in your terminal to verify the connection to your workspace:
150-
151-
```shell
152-
ping6 -c 5 your-workspace.coder
153-
```
154-
155-
### Windows
156-
157-
Use `ping` in a Command Prompt or PowerShell terminal to verify the connection to your workspace:
158-
159-
```shell
160-
ping -n 5 your-workspace.coder
161-
```
162-
163-
</div>
164-
165-
## Sync a local directory with your workspace
166-
167-
Coder Desktop file sync provides bidirectional synchronization between a local directory and your workspace.
168-
You can work offline, add screenshots to documentation, or use local development tools while keeping your files in sync with your workspace.
169-
170-
1. Create a new local directory.
171-
172-
If you select an existing clone of your repository, Desktop will recognize it as conflicting files.
173-
174-
1. In the Coder Desktop app, select **File sync**.
175-
176-
![Coder Desktop File Sync screen](../../images/user-guides/desktop/coder-desktop-file-sync.png)
177-
178-
1. Select the **+** in the corner to select the local path, workspace, and remote path, then select **Add**:
179-
180-
![Coder Desktop File Sync add paths](../../images/user-guides/desktop/coder-desktop-file-sync-add.png)
181-
182-
1. File sync clones your workspace directory to your local directory, then watches for changes:
183-
184-
![Coder Desktop File Sync watching](../../images/user-guides/desktop/coder-desktop-file-sync-watching.png)
185-
186-
For more information about the current status, hover your mouse over the status.
187-
188-
File sync excludes version control system directories like `.git/` from synchronization, so keep your Git-cloned repository wherever you run Git commands.
189-
This means that if you use an IDE with a built-in terminal to edit files on your remote workspace, that should be the Git clone and your local directory should be for file syncs.
190-
191-
> [!NOTE]
192-
> Coder Desktop uses `alpha` and `beta` to distinguish between the:
193-
>
194-
> - Local directory: `alpha`
195-
> - Remote directory: `beta`
196-
197-
### File sync conflicts
198-
199-
File sync shows a `Conflicts` status when it detects conflicting files.
200-
201-
You can hover your mouse over the status for the list of conflicts:
202-
203-
![Desktop file sync conflicts mouseover](../../images/user-guides/desktop/coder-desktop-file-sync-conflicts-mouseover.png)
204-
205-
If you encounter a synchronization conflict, delete the conflicting file that contains changes you don't want to keep.
206-
207-
## Accessing web apps in a secure browser context
208-
209-
Some web applications require a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) to function correctly.
210-
A browser typically considers an origin secure if the connection is to `localhost`, or over `HTTPS`.
211-
212-
As Coder Connect 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.
213-
214-
> [!NOTE]
215-
> 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`).
216-
217-
If you require secure context web APIs, you will need to mark the workspace hostnames as secure in your browser settings.
218-
219-
We are planning some changes to Coder Desktop that will make accessing secure context web apps easier. Stay tuned for updates.
220-
221-
<div class="tabs">
222-
223-
### Chrome
224-
225-
1. Open Chrome and visit `chrome://flags/#unsafely-treat-insecure-origin-as-secure`.
226-
227-
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.
228-
229-
If you need to enter multiple URLs, use a comma to separate them.
230-
231-
![Google Chrome insecure origin settings](../../images/user-guides/desktop/chrome-insecure-origin.png)
232-
233-
1. Ensure that the dropdown to the right of the text field is set to **Enabled**.
234-
235-
1. You will be prompted to relaunch Google Chrome at the bottom of the page. Select **Relaunch** to restart Google Chrome.
236-
237-
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.
238-
239-
1. Web apps accessed on the configured hostnames and ports will now function correctly in a secure context.
240-
241-
### Firefox
242-
243-
1. Open Firefox and visit `about:config`.
244-
245-
1. Read the warning and select **Accept the Risk and Continue** to access the Firefox configuration page.
246-
247-
1. Enter `dom.securecontext.allowlist` into the search bar at the top.
248-
249-
1. Select **String** on the entry with the same name at the bottom of the list, then select the plus icon on the right.
250-
251-
1. In the text field, enter the full workspace hostname, without the `http` scheme and port: `your-workspace.coder`. Then select the tick icon.
252-
253-
If you need to enter multiple URLs, use a comma to separate them.
254-
255-
![Firefox insecure origin settings](../../images/user-guides/desktop/firefox-insecure-origin.png)
256-
257-
1. Web apps accessed on the configured hostnames will now function correctly in a secure context without requiring a restart.
258-
259-
</div>
260-
261-
## Troubleshooting
262-
263-
### Mac: Issues updating Coder Desktop
264-
265-
> No workspaces!
266-
267-
And
268-
269-
> Internal Error: The VPN must be started with the app open during first-time setup.
270-
271-
Due to an issue with the way Coder Desktop works with the macOS [interprocess communication mechanism](https://developer.apple.com/documentation/xpc)(XPC) system network extension, core Desktop functionality can break when you upgrade the application.
272-
273-
<div class="tabs">
274-
275-
The resolution depends on which version of macOS you use:
276-
277-
### macOS <=14
278-
279-
1. Delete the application from `/Applications`.
280-
1. Restart your device.
281-
282-
### macOS 15+
283-
284-
1. Open **System Settings**
285-
1. Select **General**
286-
1. Select **Login Items & Extensions**
287-
1. Scroll down, and select the **** for **Network Extensions**
288-
1. Select the **...** next to Coder Desktop, then **Delete Extension**, and follow the prompts.
289-
1. Re-open Coder Desktop and follow the prompts to reinstall the network extension.
290-
291-
</div>
126+
- [Connect to and work on your workspace](./desktop-connect-sync.md)

0 commit comments

Comments
 (0)