|
| 1 | +--- |
| 2 | +Order: 5 |
| 3 | +Area: azure |
| 4 | +TOCTitle: VS Code for the Web - Azure |
| 5 | +PageTitle: Develop and Deploy Azure Applications with VS Code for the Web |
| 6 | +ContentId: 442dd725-5d6c-4b88-9696-95d5ddf5b2b8 |
| 7 | +MetaDescription: VS Code for the Web - Azure |
| 8 | +DateApproved: 05/12/2025 |
| 9 | +--- |
| 10 | + |
| 11 | +# VS Code for the Web - Azure |
| 12 | + |
| 13 | +VS Code for the Web is a zero-install and browser-based version of Visual Studio Code. The `/azure` (for short) environment, accessible via <https://insiders.vscode.dev/azure>, is a dedicated space for Azure development, allowing you to run, debug, and deploy applications to Azure in seconds. |
| 14 | + |
| 15 | +Powered by [Azure Cloud Shell](https://learn.microsoft.com/en-us/azure/cloud-shell/overview), this environment offers up to **4 hours of compute time**, eliminating the need to manually configure dev environments or install dependencies. `/azure` comes preloaded with the latest libraries, extensions, and tools to get you coding instantly. |
| 16 | + |
| 17 | +<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/qmJigVn8gcg?si=1NTRy3uSohVrqY1e" title="Announcing VS Code for the Web" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| 18 | + |
| 19 | +## Getting started |
| 20 | + |
| 21 | +The `/azure` environment includes everything you need to start developing and deploying Azure applications: |
| 22 | + |
| 23 | +### Pre-installed extensions |
| 24 | + |
| 25 | +[Azure Developer CLI](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.azure-dev) - This extension makes it easier to run, create Azure Resources, and deploy Azure applications with the Azure Developer CLI. |
| 26 | + |
| 27 | +### Supported Programming Languages |
| 28 | + |
| 29 | +All major runtimes are pre-installed: |
| 30 | +* Python - 3.12.9 |
| 31 | +* Java - openjdk 17.0.14 2025-01-21 LTS |
| 32 | + * OpenJDK Runtime Environment Microsoft-10800290 (build 17.0.14+7-LTS) |
| 33 | + * OpenJDK 64-Bit Server VM Microsoft-10800290 (build 17.0.14+7-LTS, mixed mode, sharing) |
| 34 | +* Node.js - v20.14.0 |
| 35 | +* C# - 9.0.0 |
| 36 | + |
| 37 | +### GitHub repositories |
| 38 | + |
| 39 | +Seamlessly commit your changes directly to your GitHub repository using the [GitHub Repository extension](https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub). GitHub Repositories allows you to remotely browse and edit a repository from within the editor, without needing to pull code onto your local machine. You can learn more about the extension and how it works in our [GitHub Repositories guide](https://code.visualstudio.com/docs/sourcecontrol/github#_github-repositories-extension). |
| 40 | + |
| 41 | +### Continue working in VS Code on the desktop |
| 42 | + |
| 43 | +After the Azure Cloud Shell container time is up, you may want to continue your work in VS Code on the desktop. Use the **Continue Working on** button, located in the Status Bar of VS Code for the Web, to commit your code to a chosen repository in GitHub, and move over to your local environment. |
| 44 | + |
| 45 | +Within this experience, you have two options for local continuation: |
| 46 | +* **Using Docker**: Launch a pre-configured development container. |
| 47 | +* **Using VS Code Locally**: Clone the repo and configure your environment using a README. |
| 48 | + |
| 49 | +## Azure entry points |
| 50 | + |
| 51 | +The `/azure` experience integrates with Azure AI Foundry to bring code closer to developers. Buttons like **Open in VS Code for the Web** are available directly within environments like the **Chat Playground** and **Agent Playground**. See more in the sample use cases or scenarios section. |
| 52 | + |
| 53 | +To get started: |
| 54 | +1. Choose a model. |
| 55 | +2. Build and test your agent. |
| 56 | +3. Select **View Code**, and then select your programming language and SDK. |
| 57 | +4. Launch directly into VS Code using the **Open in VS Code** button for the Web with **one click**. |
| 58 | + |
| 59 | +Additionally, developers can get started with templates using the AI App Gallery(https://aka.ms/aiapps) and select **Open in VS Code** to launch their template in one operation to the `/azure` environment. |
| 60 | + |
| 61 | +To get started: |
| 62 | +1. Navigate to the AI App Gallery(https://aka.ms/aiapps) |
| 63 | +2. Choose a template or search for a template you'd like to run |
| 64 | +3. Select **Open in VS Code** from the dropdown menu |
| 65 | +4. Launch directly into VS Code and use GitHub Copilot to answer any questions you might have. |
| 66 | + |
| 67 | +## 🧪 Sample use cases or scenarios |
| 68 | + |
| 69 | +The following are commonly used scenarios for the `\azure` environment. |
| 70 | + |
| 71 | +* [Using Azure AI Foundry to create a model deployment and open your code in VS Code]((https://ai.azure.com)) |
| 72 | + |
| 73 | +1. From the Azure AI Foundry portal, select the best model for your use case, including o3, o4-mini or MAI-DS-R1 from Foundry Models. In this case, we’ll use gpt-4o-mini as an example model for an agent workflow. |
| 74 | + |
| 75 | + |
| 76 | + |
| 77 | +2. Provision the model endpoint from the gpt-4o-mini model card. |
| 78 | + |
| 79 | + |
| 80 | + |
| 81 | +3. Arrive in the agents playground, alter generation controls like max responses and past messages. Add knowledge, tools, and actions. |
| 82 | + |
| 83 | + |
| 84 | + |
| 85 | +4. Iterate on your sample prompt and continue experimentation in the agents playground. |
| 86 | + |
| 87 | +5. Once happy, select the **View Code** button to see the contextual code sample for your interaction with the agent in the agents playground. |
| 88 | + |
| 89 | + |
| 90 | + |
| 91 | +There, you can see multi-lingual code samples in Python, C#, and JavaScript for agents and with the inclusion of JSON, cURL, JavaScript, C#, and Go for models Entra ID can be used to authenticate agents with "Key Authorization" now available for models. |
| 92 | + |
| 93 | + |
| 94 | + |
| 95 | +6. When ready, select **Open in VS Code** and be redirected to the /azure environment of VS Code for the Web. |
| 96 | + |
| 97 | + |
| 98 | + |
| 99 | +You’ll notice that as the environment is set up, the code sample, API endpoint, and key are automatically imported into a new VS Code for the Web workspace. |
| 100 | + |
| 101 | + |
| 102 | + |
| 103 | +In the bottom right corner, you’ll see that the API key is set in the terminal’s environment variables and that the sample code has been downloaded successfully. |
| 104 | + |
| 105 | + |
| 106 | + |
| 107 | +7. Run the model locally via the terminal through `python agent_run.py`. Within seconds, you’ll see a successful model response. |
| 108 | + |
| 109 | + |
| 110 | + |
| 111 | +8. `azd` commands can be used to provision and deploy a web app using the agent. `azd init` initializes the git repo which creates a default Azure workspace where the agent can be used in an application. |
| 112 | + |
| 113 | + |
| 114 | + |
| 115 | +9. `azd up` provisions the web app in creating the relevant Azure resources. Once done, you can see your application running in the browser by selecting the link provided in the terminal |
| 116 | + |
| 117 | + |
| 118 | + |
| 119 | +10. Continue in VS Code on the desktop or GitHub Desktop by selecting “Continue on Desktop” in the bottom left corner. This button allows you to move your workspace to your local environment in one operation. If you have a dev container attached to an existing application, you have the choice to move using that container or to your local environment. |
| 120 | + |
| 121 | + |
| 122 | + |
| 123 | +* [Spinning up a quick Azure Function app](https://learn.microsoft.com/en-us/azure/azure-functions/functions-develop-vs-code?tabs=node-v4%2Cpython-v2%2Cisolated-process%2Cquick-create&pivots=programming-language-python) |
| 124 | + |
| 125 | +The above quick start is applicable to vscode.dev/azure since vscode.dev/azure covers all of the prerequisites: |
| 126 | +- Python installed |
| 127 | +- Azure Functions Core Tools installed |
| 128 | +- You need to install these yourself: |
| 129 | +- Azure Functions extension |
| 130 | + |
| 131 | +* [Building and testing an AI agent using the Azure AI Toolkit](https://code.visualstudio.com/docs/intelligentapps/overview) |
| 132 | + |
| 133 | +Key features: |
| 134 | +- Model catalog with rich generative AI models sources (GitHub, ONNX, OpenAI, Anthropic, Google, ...) |
| 135 | +- Bring Your Own Models from remotely hosted model, or Ollama models that are running locally |
| 136 | +- Playground for model inference or testing via chat |
| 137 | +- Attachment support for multi-modal language models |
| 138 | +- Batch run prompts for selected AI models |
| 139 | +- Evaluate an AI model with a dataset for supported popular evaluators like F1 score, relevance, similarity, coherence, and more |
| 140 | + |
| 141 | +* [Rapid prototyping with VS Code extensions and Python](https://code.visualstudio.com/docs/python/python-quick-start) |
| 142 | + |
| 143 | +## 🔧 Limitations |
| 144 | + |
| 145 | +Although VS Code for the Web is almost at parity with VS Code on the desktop, there are some limitations to the development environment: |
| 146 | + |
| 147 | +* No terminal access beyond Cloud Shell |
| 148 | +* Limited support for some native extensions or language features |
| 149 | +* No offline support |
| 150 | + |
| 151 | +## 🛠️ Troubleshooting |
| 152 | + |
| 153 | +If you encounter any issues with VS Code for the Web – Azure, please log an issue in our [GitHub repository](https://github.com/microsoft/vscode-dev-azure) |
| 154 | + |
| 155 | +### Account type prompt issue |
| 156 | +If you see a prompt asking "What type of account did you use to start this tunnel?" then it's likely that you're on vscode.dev/azure and not insiders.vscode.dev/azure. Currently this product is only available on Insiders. To fix this, navigate to <https://insiders.vscode.dev/azure>. |
| 157 | + |
| 158 | + |
| 159 | + |
| 160 | +### Connection issue |
| 161 | +If you're unable to connect to <https://insiders.vscode.dev/azure>, you can usually fix it by resetting your Azure Cloud Shell. This can be done from the Azure Portal. |
| 162 | + |
| 163 | +Open Cloud Shell in the Azure Portal using the button in the top right corner. |
| 164 | + |
| 165 | + |
| 166 | + |
| 167 | +Next, in the Settings dropdown, select **Reset User Settings**. |
| 168 | + |
| 169 | + |
| 170 | + |
| 171 | +Once finished you should see this screen. |
| 172 | + |
| 173 | + |
| 174 | + |
| 175 | +### Gathering logs |
| 176 | +The extension logs will help us diagnose any issues with vscode.dev/azure. You can access them by going to the Output view, then selecting the **VS Code for the Web - Azure** output channel. |
| 177 | + |
| 178 | + |
| 179 | + |
| 180 | + |
| 181 | + |
| 182 | +## 🚀 Next steps / related resources |
| 183 | + |
| 184 | +Keep learning and exploring with the following resources: |
| 185 | + |
| 186 | +* [Azure Developer CLI documentation](https://learn.microsoft.com/en-us/azure/developer/azure-developer-cli/) |
| 187 | +* [GitHub Copilot](https://github.com/features/copilot) |
| 188 | +* [Azure AI Studio](https://ai.azure.com/) |
| 189 | +* [VS Code Dev Containers](https://containers.dev/) |
| 190 | + |
| 191 | +🤝 Feedback and Support |
| 192 | + |
| 193 | +Create issues in our [GitHub repository](https://github.com/microsoft/vscode-dev-azure) as you find them while using vscode.dev/azure. The more detail the better. If possible, include logs from the "VS Code for the Web - Azure" output channel. |
0 commit comments