You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/dev-box/how-to-set-up-dev-tunnels.md
+13-11Lines changed: 13 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ ms.author: rosemalcolm
9
9
ms.reviewer: rosemalcolm
10
10
---
11
11
12
-
# Set up Dev Tunnels in VS Code
12
+
# Set up dev tunnels in VS Code
13
13
14
-
Use Microsoft Dev Box with Visual Studio Code (VS Code) to create secure, cloud-based development environments. This article explains how to set up Dev Tunnels and connect to your Dev Box from VS Code. You'll learn how to install the required extension, enable secure tunnels, and connect remotely for a streamlined development experience. Follow these steps to get started quickly and work efficiently from anywhere.
14
+
Use Microsoft Dev Box with Visual Studio Code (VS Code) to create secure, cloud-based development environments. This article explains how to set up dev tunnels and connect to your Dev Box from VS Code. You'll learn how to install the required extension, enable secure tunnels, and connect remotely for a streamlined development experience. Follow these steps to get started quickly and work efficiently from anywhere.
15
15
16
16
## Prerequisites
17
17
- A dev box.
@@ -25,55 +25,57 @@ Follow these steps to set up a dev tunnel and connect to your dev box using VS C
25
25
26
26
Search for **Dev Box** in the VS Code Extension Marketplace and install the latest version (2.0.0 as of May 15, 2025) in your **local** VS Code—not in the Dev Box you want to connect to.
27
27
28
-
:::image type="content" source="media/how-to-setup-dev-tunnels/dev-tunnels-dev-box-extension.png" alt-text="Screenshot of the Dev Box extension in VS Code.":::
28
+
:::image type="content" source="media/how-to-set-up-dev-tunnels/dev-tunnels-dev-box-extension.png" alt-text="Screenshot of the Dev Box extension in VS Code.":::
29
29
30
30
1. Sign in to Dev Box extension
31
31
32
32
Select the Dev Box icon in the left sidebar, and select **Sign In**.
33
33
34
-
:::image type="content" source="media/how-to-setup-dev-tunnels/dev-tunnels-sign-in-extension.png" alt-text="Screenshot of the Dev Box extension showing the sign-in option.":::
34
+
:::image type="content" source="media/how-to-set-up-dev-tunnels/dev-tunnels-sign-in-extension.png" alt-text="Screenshot of the Dev Box extension showing the sign-in option.":::
35
35
36
36
1. Create and enable Dev Box Tunnel
37
37
38
38
After signing in, you'll see all the projects you can access. Choose the project where you created the Dev Box, and select the Dev Box you want to connect to.
39
39
40
40
If you see **No Tunnel** in the description, manually create a tunnel resource first.
41
41
42
-
:::image type="content" source="media/how-to-setup-dev-tunnels/dev-tunnels-create-tunnel.png" alt-text="Screenshot of the Dev Box extension showing the option to create a tunnel.":::
42
+
:::image type="content" source="media/how-to-set-up-dev-tunnels/dev-tunnels-create-tunnel.png" alt-text="Screenshot of the Dev Box extension showing the option to create a tunnel.":::
43
43
44
44
Before enabling the tunnel, you **MUST** log into the Dev Box at least once using any client (for example, browser, Windows App, Remote Desktop client). This step is **mandatory** after each shutdown and restart to establish the required user session for setting up the tunnel. Once logged in, you can disconnect from the Dev Box.
45
45
46
46
You don't need to sign in every time you enable or connect to the tunnel—only after a shutdown or restart.
47
47
48
-
:::image type="content" source="media/how-to-setup-dev-tunnels/dev-tunnels-enable-tunnel.png" alt-text="Screenshot of enabling the tunnel in the Dev Box extension.":::
48
+
:::image type="content" source="media/how-to-set-up-dev-tunnels/dev-tunnels-enable-tunnel.png" alt-text="Screenshot of enabling the tunnel in the Dev Box extension.":::
49
49
50
50
Then, enable the tunnel. This process can take 1–3 minutes, as it installs VS Code on the Dev Box (if not already installed) and sets up the tunnel.
51
51
52
52
1. Connect to the Dev Box in VS Code
53
53
54
54
Once everything is set up, you can open the Dev Box in VS Code by clicking the **Connect to Tunnel** button.
55
55
56
-
:::image type="content" source="media/how-to-setup-dev-tunnels/dev-tunnels-connect-tunnnel.png" alt-text="Screens1. Dev Box remote experience in VS Code.":::
56
+
:::image type="content" source="media/how-to-set-up-dev-tunnels/dev-tunnels-connect-tunnnel.png" alt-text="Screenshot of the Dev Box extension showing the option to connect to the tunnel.":::
57
+
58
+
1. Explore the remote experience in VS Code
57
59
58
60
Open any folder or workspace on the remote Dev Box using **File > Open File/Folder/Workspace** just as you would locally.
59
61
60
62
If you have a Windows Subsystem for Linux (WSL) environment on the Dev Box, connect to it using **Remote Explorer**.
61
63
62
-
:::image type="content" source="media/how-to-setup-dev-tunnels/dev-tunnels-wsl-targets.png" alt-text="Screenshot of the Remote Explorer in VS Code showing WSL targets.":::
64
+
:::image type="content" source="media/how-to-set-up-dev-tunnels/dev-tunnels-wsl-targets.png" alt-text="Screenshot of the Remote Explorer in VS Code showing WSL targets.":::
63
65
64
66
Select WSL targets from the dropdown to see all the WSL distributions. Open any WSL distribution in the current or a new window.
65
67
66
-
:::image type="content" source="media/how-to-setup-dev-tunnels/dev-tunnels-ubuntu.png" alt-text="Screenshot of a WSL distribution terminal in VS Code.":::
68
+
:::image type="content" source="media/how-to-set-up-dev-tunnels/dev-tunnels-ubuntu.png" alt-text="Screenshot of a WSL distribution terminal in VS Code.":::
67
69
68
70
For more information on the WSL development experience, see [Remote - WSL](https://code.visualstudio.com/docs/remote/wsl) and [Set up a WSL development environment](/windows/wsl/setup/environment).
69
71
70
72
## Frequently asked questions
71
73
72
-
1. Why do I need to sign-in to the Dev Box before enabling the tunnel?
74
+
- Why do I need to sign-in to the Dev Box before enabling the tunnel?
73
75
74
76
This step is required to establish a user session for setting up the tunnel. After the initial login, you can just disconnect from the Dev Box. Then you can enable or connect
75
77
76
-
1. Why can't I connect to the Dev Box even if the tunnel is enabled?
78
+
- Why can't I connect to the Dev Box even if the tunnel is enabled?
77
79
78
80
Refresh the Dev Box extension explorer view with the button in the top right corner to check the latest status of the tunnel. If the tunnel is enabled, but you still can't connect, try disabling the tunnel, signing in to the Dev Box, and then re-enabling the tunnel.nnect, try disabling the tunnel, logging into the Dev Box, and then re-enabling the tunnel.
0 commit comments