Skip to content

Commit a208b5f

Browse files
author
RoseHJM
committed
Fixed blocking issues
1 parent a258338 commit a208b5f

8 files changed

+13
-11
lines changed

articles/dev-box/how-to-setup-dev-tunnels.md renamed to articles/dev-box/how-to-set-up-dev-tunnels.md

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ ms.author: rosemalcolm
99
ms.reviewer: rosemalcolm
1010
---
1111

12-
# Set up Dev Tunnels in VS Code
12+
# Set up dev tunnels in VS Code
1313

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.
1515

1616
## Prerequisites
1717
- 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
2525

2626
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.
2727

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.":::
2929

3030
1. Sign in to Dev Box extension
3131

3232
Select the Dev Box icon in the left sidebar, and select **Sign In**.
3333

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.":::
3535

3636
1. Create and enable Dev Box Tunnel
3737

3838
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.
3939

4040
If you see **No Tunnel** in the description, manually create a tunnel resource first.
4141

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.":::
4343

4444
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.
4545

4646
You don't need to sign in every time you enable or connect to the tunnel—only after a shutdown or restart.
4747

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.":::
4949

5050
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.
5151

5252
1. Connect to the Dev Box in VS Code
5353

5454
Once everything is set up, you can open the Dev Box in VS Code by clicking the **Connect to Tunnel** button.
5555

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
5759

5860
Open any folder or workspace on the remote Dev Box using **File > Open File/Folder/Workspace** just as you would locally.
5961

6062
If you have a Windows Subsystem for Linux (WSL) environment on the Dev Box, connect to it using **Remote Explorer**.
6163

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.":::
6365

6466
Select WSL targets from the dropdown to see all the WSL distributions. Open any WSL distribution in the current or a new window.
6567

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.":::
6769

6870
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).
6971

7072
## Frequently asked questions
7173

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?
7375

7476
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
7577

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?
7779

7880
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.
7981

0 commit comments

Comments
 (0)