diff --git a/docs/azure/aksextensions.md b/docs/azure/aksextensions.md index 3ebbb58e82..b662504445 100644 --- a/docs/azure/aksextensions.md +++ b/docs/azure/aksextensions.md @@ -1,5 +1,5 @@ --- -Order: 6 +Order: 7 Area: azure TOCTitle: Azure Kubernetes Service ContentId: 131f9633-5446-4384-96ca-7bff2e3dc0fc diff --git a/docs/azure/containers.md b/docs/azure/containers.md index 6e2f71217a..368eed1adf 100644 --- a/docs/azure/containers.md +++ b/docs/azure/containers.md @@ -1,5 +1,5 @@ --- -Order: 4 +Order: 6 Area: azure TOCTitle: Containers ContentId: 42F8B9F8-BD03-4159-9479-17C5BDE30531 diff --git a/docs/azure/images/vscodeforweb/eighth.png b/docs/azure/images/vscodeforweb/eighth.png new file mode 100644 index 0000000000..d895540f8b Binary files /dev/null and b/docs/azure/images/vscodeforweb/eighth.png differ diff --git a/docs/azure/images/vscodeforweb/eleventh.png b/docs/azure/images/vscodeforweb/eleventh.png new file mode 100644 index 0000000000..8b13cc8b46 Binary files /dev/null and b/docs/azure/images/vscodeforweb/eleventh.png differ diff --git a/docs/azure/images/vscodeforweb/fifteenth.png b/docs/azure/images/vscodeforweb/fifteenth.png new file mode 100644 index 0000000000..0d1cbd99ca Binary files /dev/null and b/docs/azure/images/vscodeforweb/fifteenth.png differ diff --git a/docs/azure/images/vscodeforweb/fifth.png b/docs/azure/images/vscodeforweb/fifth.png new file mode 100644 index 0000000000..1120b9ff9e Binary files /dev/null and b/docs/azure/images/vscodeforweb/fifth.png differ diff --git a/docs/azure/images/vscodeforweb/first.png b/docs/azure/images/vscodeforweb/first.png new file mode 100644 index 0000000000..d0c9f88717 Binary files /dev/null and b/docs/azure/images/vscodeforweb/first.png differ diff --git a/docs/azure/images/vscodeforweb/fourteenth.png b/docs/azure/images/vscodeforweb/fourteenth.png new file mode 100644 index 0000000000..f6180fea94 Binary files /dev/null and b/docs/azure/images/vscodeforweb/fourteenth.png differ diff --git a/docs/azure/images/vscodeforweb/fourth.png b/docs/azure/images/vscodeforweb/fourth.png new file mode 100644 index 0000000000..5897175df4 Binary files /dev/null and b/docs/azure/images/vscodeforweb/fourth.png differ diff --git a/docs/azure/images/vscodeforweb/ninth.png b/docs/azure/images/vscodeforweb/ninth.png new file mode 100644 index 0000000000..6c254c2229 Binary files /dev/null and b/docs/azure/images/vscodeforweb/ninth.png differ diff --git a/docs/azure/images/vscodeforweb/second.png b/docs/azure/images/vscodeforweb/second.png new file mode 100644 index 0000000000..85c868e7ee Binary files /dev/null and b/docs/azure/images/vscodeforweb/second.png differ diff --git a/docs/azure/images/vscodeforweb/seventeenth.png b/docs/azure/images/vscodeforweb/seventeenth.png new file mode 100644 index 0000000000..79682bc47f Binary files /dev/null and b/docs/azure/images/vscodeforweb/seventeenth.png differ diff --git a/docs/azure/images/vscodeforweb/seventh.png b/docs/azure/images/vscodeforweb/seventh.png new file mode 100644 index 0000000000..a5eaa099dd Binary files /dev/null and b/docs/azure/images/vscodeforweb/seventh.png differ diff --git a/docs/azure/images/vscodeforweb/sixteenth.png b/docs/azure/images/vscodeforweb/sixteenth.png new file mode 100644 index 0000000000..dddf17b853 Binary files /dev/null and b/docs/azure/images/vscodeforweb/sixteenth.png differ diff --git a/docs/azure/images/vscodeforweb/sixth.png b/docs/azure/images/vscodeforweb/sixth.png new file mode 100644 index 0000000000..d37730326f Binary files /dev/null and b/docs/azure/images/vscodeforweb/sixth.png differ diff --git a/docs/azure/images/vscodeforweb/tbs1.png b/docs/azure/images/vscodeforweb/tbs1.png new file mode 100644 index 0000000000..493626a3eb Binary files /dev/null and b/docs/azure/images/vscodeforweb/tbs1.png differ diff --git a/docs/azure/images/vscodeforweb/tbs2.png b/docs/azure/images/vscodeforweb/tbs2.png new file mode 100644 index 0000000000..019df94ebc Binary files /dev/null and b/docs/azure/images/vscodeforweb/tbs2.png differ diff --git a/docs/azure/images/vscodeforweb/tbs3.png b/docs/azure/images/vscodeforweb/tbs3.png new file mode 100644 index 0000000000..b9a23a9917 Binary files /dev/null and b/docs/azure/images/vscodeforweb/tbs3.png differ diff --git a/docs/azure/images/vscodeforweb/tbs4.png b/docs/azure/images/vscodeforweb/tbs4.png new file mode 100644 index 0000000000..e558db2d10 Binary files /dev/null and b/docs/azure/images/vscodeforweb/tbs4.png differ diff --git a/docs/azure/images/vscodeforweb/tbs5.png b/docs/azure/images/vscodeforweb/tbs5.png new file mode 100644 index 0000000000..320c2922df Binary files /dev/null and b/docs/azure/images/vscodeforweb/tbs5.png differ diff --git a/docs/azure/images/vscodeforweb/tbs6.png b/docs/azure/images/vscodeforweb/tbs6.png new file mode 100644 index 0000000000..a982bdb580 Binary files /dev/null and b/docs/azure/images/vscodeforweb/tbs6.png differ diff --git a/docs/azure/images/vscodeforweb/tenth.png b/docs/azure/images/vscodeforweb/tenth.png new file mode 100644 index 0000000000..1762cf01e3 Binary files /dev/null and b/docs/azure/images/vscodeforweb/tenth.png differ diff --git a/docs/azure/images/vscodeforweb/third.png b/docs/azure/images/vscodeforweb/third.png new file mode 100644 index 0000000000..97912c666c Binary files /dev/null and b/docs/azure/images/vscodeforweb/third.png differ diff --git a/docs/azure/images/vscodeforweb/thirteenth.png b/docs/azure/images/vscodeforweb/thirteenth.png new file mode 100644 index 0000000000..af78b55499 Binary files /dev/null and b/docs/azure/images/vscodeforweb/thirteenth.png differ diff --git a/docs/azure/images/vscodeforweb/twelveth.png b/docs/azure/images/vscodeforweb/twelveth.png new file mode 100644 index 0000000000..135f1f394d Binary files /dev/null and b/docs/azure/images/vscodeforweb/twelveth.png differ diff --git a/docs/azure/kubernetes.md b/docs/azure/kubernetes.md index 235a4d31a1..6e9a3a0e18 100644 --- a/docs/azure/kubernetes.md +++ b/docs/azure/kubernetes.md @@ -1,5 +1,5 @@ --- -Order: 7 +Order: 8 Area: azure TOCTitle: Kubernetes ContentId: d0ece2e4-8dd2-4c0d-a773-604542651c9e diff --git a/docs/azure/mongodb.md b/docs/azure/mongodb.md index f341fc5cb2..bdc1716709 100644 --- a/docs/azure/mongodb.md +++ b/docs/azure/mongodb.md @@ -1,5 +1,5 @@ --- -Order: 8 +Order: 9 Area: azure TOCTitle: MongoDB PageTitle: Working with MongoDB in Visual Studio Code diff --git a/docs/azure/remote-debugging.md b/docs/azure/remote-debugging.md index ffca1368bd..5b2b03f7a3 100644 --- a/docs/azure/remote-debugging.md +++ b/docs/azure/remote-debugging.md @@ -1,5 +1,5 @@ --- -Order: 9 +Order: 10 Area: azure TOCTitle: Remote Debugging for Node.js PageTitle: Azure Remote Debugging for Node.js with Visual Studio Code diff --git a/docs/azure/vscodeforweb.md b/docs/azure/vscodeforweb.md new file mode 100644 index 0000000000..f6807fc443 --- /dev/null +++ b/docs/azure/vscodeforweb.md @@ -0,0 +1,193 @@ +--- +Order: 5 +Area: azure +TOCTitle: VS Code for the Web - Azure +PageTitle: Develop and Deploy Azure Applications with VS Code for the Web +ContentId: 442dd725-5d6c-4b88-9696-95d5ddf5b2b8 +MetaDescription: VS Code for the Web - Azure +DateApproved: 05/12/2025 +--- + +# VS Code for the Web - Azure + +VS Code for the Web is a zero-install and browser-based version of Visual Studio Code. The `/azure` (for short) environment, accessible via , is a dedicated space for Azure development, allowing you to run, debug, and deploy applications to Azure in seconds. + +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. + + + +## Getting started + +The `/azure` environment includes everything you need to start developing and deploying Azure applications: + +### Pre-installed extensions + +[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. + +### Supported Programming Languages + +All major runtimes are pre-installed: +* Python - 3.12.9 +* Java - openjdk 17.0.14 2025-01-21 LTS + * OpenJDK Runtime Environment Microsoft-10800290 (build 17.0.14+7-LTS) + * OpenJDK 64-Bit Server VM Microsoft-10800290 (build 17.0.14+7-LTS, mixed mode, sharing) +* Node.js - v20.14.0 +* C# - 9.0.0 + +### GitHub repositories + +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). + +### Continue working in VS Code on the desktop + +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. + +Within this experience, you have two options for local continuation: +* **Using Docker**: Launch a pre-configured development container. +* **Using VS Code Locally**: Clone the repo and configure your environment using a README. + +## Azure entry points + +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. + +To get started: +1. Choose a model. +2. Build and test your agent. +3. Select **View Code**, and then select your programming language and SDK. +4. Launch directly into VS Code using the **Open in VS Code** button for the Web with **one click**. + +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. + +To get started: +1. Navigate to the AI App Gallery(https://aka.ms/aiapps) +2. Choose a template or search for a template you'd like to run +3. Select **Open in VS Code** from the dropdown menu +4. Launch directly into VS Code and use GitHub Copilot to answer any questions you might have. + +## 🧪 Sample use cases or scenarios + +The following are commonly used scenarios for the `\azure` environment. + +* [Using Azure AI Foundry to create a model deployment and open your code in VS Code]((https://ai.azure.com)) + +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. + +![Screenshot that shows Azure AI Foundry Portal](images/vscodeforweb/first.png) + +2. Provision the model endpoint from the gpt-4o-mini model card. + +![Screenshot that shows Azure AI Foundry Portal Model](images/vscodeforweb/second.png) + +3. Arrive in the agents playground, alter generation controls like max responses and past messages. Add knowledge, tools, and actions. + +![Screenshot that shows model output](images/vscodeforweb/third.png) + +4. Iterate on your sample prompt and continue experimentation in the agents playground. + +5. Once happy, select the **View Code** button to see the contextual code sample for your interaction with the agent in the agents playground. + +![Screenshot that shows view code button](images/vscodeforweb/fourth.png) + +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. + +![Screenshot that shows EntraID auth](images/vscodeforweb/fifth.png) + +6. When ready, select **Open in VS Code** and be redirected to the /azure environment of VS Code for the Web. + +![Screenshot that shows Open in VS Code button](images/vscodeforweb/sixth.png) + +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. + +![Screenshot that shows loading dial](images/vscodeforweb/seventh.png) + +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. + +![Screenshot that shows loaded environment](images/vscodeforweb/eighth.png) + +7. Run the model locally via the terminal through `python agent_run.py`. Within seconds, you’ll see a successful model response. + +![Screenshot that shows agent python file](images/vscodeforweb/thirteenth.png) + +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. + +![Screenshot that shows azd init](images/vscodeforweb/fourteenth.png) + +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 + +![Screenshot that shows azd up](images/vscodeforweb/fifteenth.png) + +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. + +![Screenshot that shows Continue On button](images/vscodeforweb/sixteenth.png) + +* [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) + +The above quick start is applicable to vscode.dev/azure since vscode.dev/azure covers all of the prerequisites: +- Python installed +- Azure Functions Core Tools installed +- You need to install these yourself: +- Azure Functions extension + +* [Building and testing an AI agent using the Azure AI Toolkit](https://code.visualstudio.com/docs/intelligentapps/overview) + +Key features: +- Model catalog with rich generative AI models sources (GitHub, ONNX, OpenAI, Anthropic, Google, ...) +- Bring Your Own Models from remotely hosted model, or Ollama models that are running locally +- Playground for model inference or testing via chat +- Attachment support for multi-modal language models +- Batch run prompts for selected AI models +- Evaluate an AI model with a dataset for supported popular evaluators like F1 score, relevance, similarity, coherence, and more + +* [Rapid prototyping with VS Code extensions and Python](https://code.visualstudio.com/docs/python/python-quick-start) + +## 🔧 Limitations + +Although VS Code for the Web is almost at parity with VS Code on the desktop, there are some limitations to the development environment: + +* No terminal access beyond Cloud Shell +* Limited support for some native extensions or language features +* No offline support + +## 🛠️ Troubleshooting + +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) + +### Account type prompt issue +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 . + +![Screenshot that shows Account Type](images/vscodeforweb/tbs1.png) + +### Connection issue +If you're unable to connect to , you can usually fix it by resetting your Azure Cloud Shell. This can be done from the Azure Portal. + +Open Cloud Shell in the Azure Portal using the button in the top right corner. + +![Screenshot that shows Azure Portal ](images/vscodeforweb/tbs2.png) + +Next, in the Settings dropdown, select **Reset User Settings**. + +![Screenshot that shows Settings](images/vscodeforweb/tbs3.png) + +Once finished you should see this screen. + +![Screenshot that shows Azure Cloudshell](images/vscodeforweb/tbs4.png) + +### Gathering logs +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. + +![Screenshot that shows Logs](images/vscodeforweb/tbs5.png) + +![Screenshot that shows Logs](images/vscodeforweb/tbs6.png) + +## 🚀 Next steps / related resources + +Keep learning and exploring with the following resources: + +* [Azure Developer CLI documentation](https://learn.microsoft.com/en-us/azure/developer/azure-developer-cli/) +* [GitHub Copilot](https://github.com/features/copilot) +* [Azure AI Studio](https://ai.azure.com/) +* [VS Code Dev Containers](https://containers.dev/) + +🤝 Feedback and Support + +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. diff --git a/docs/toc.json b/docs/toc.json index ad46c673d4..32cec1117c 100644 --- a/docs/toc.json +++ b/docs/toc.json @@ -363,6 +363,7 @@ ["Getting Started", "/docs/azure/gettingstarted"], ["Resources View", "/docs/azure/resourcesextension"], ["Deployment", "/docs/azure/deployment"], + ["VS Code for the Web - Azure","/docs/azure/vscodeforweb"], ["Containers", "/docs/azure/containers"], ["Azure Kubernetes Service", "/docs/azure/aksextensions"], ["Kubernetes", "/docs/azure/kubernetes"],