Skip to content

Commit

Permalink
Updated Azure Extensions homepage, Created new Getting Started page (#…
Browse files Browse the repository at this point in the history
…7520)

* added new getting started page, started new table of developers with scenarios, removed jump links at top of pages, removed redundant links

* added last few types of developers with scenarios

* added data engineer description

* moved developers table to extensions page, added get started info and troubleshooting info to getting started page, added command palette, settings, notifications, output channel, activity log

* added links, added accessible info, added write code section that includes resource and workspace views, grouping, create resources, added troubleshooting info, added next steps, added keyboard shortcuts info, added workspace info, added link to getting started productivity guide on homepage

* added descriptions for productivity guide, get started, write code, and troubleshooting sections

* fixed more formatting, bold, edited front end developer and API developer descriptions

* fixed names

* changed order number of nodes under azure main node

* changed rewording

* renamed to overview page, edited the entire developer table, added azure link, removed searching for extensions section

* fixed

* added bold to shortcuts, added images, renamed titles, added more text to overview page

* added descriptions to when to use section of developer table

* Update docs/azure/gettingstarted.md

keyboard shortcut change

Co-authored-by: Nick Trogh <1908215+ntrogh@users.noreply.github.com>

* working through nicks PR comments

* Update docs/azure/gettingstarted.md

keyboard shortcuts change

Co-authored-by: Nick Trogh <1908215+ntrogh@users.noreply.github.com>

* fixed broken link on deployment page, more edits on getting started and overview

* Update docs/azure/gettingstarted.md

fix for shortcuts

Co-authored-by: Nick Trogh <1908215+ntrogh@users.noreply.github.com>

* fixed newline error, other PR comments

* updated new links on deployment page

---------

Co-authored-by: mistymadonna <@users.noreply.github.com>
Co-authored-by: Nick Trogh <1908215+ntrogh@users.noreply.github.com>
  • Loading branch information
mistymadonna and ntrogh authored Sep 25, 2024
1 parent 03ef0e5 commit 19ed99a
Show file tree
Hide file tree
Showing 10 changed files with 119 additions and 42 deletions.
2 changes: 1 addition & 1 deletion docs/azure/aksextensions.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
Order: 7
Order: 5
Area: azure
TOCTitle: Azure Kubernetes Service
ContentId: 131f9633-5446-4384-96ca-7bff2e3dc0fc
Expand Down
11 changes: 5 additions & 6 deletions docs/azure/deployment.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
Order: 2
Order: 3
Area: azure
TOCTitle: Deployment
PageTitle: Visual Studio Code Azure Tutorials
Expand All @@ -9,9 +9,9 @@ DateApproved: 02/1/2024
---
# Deploying Applications to Azure

Visual Studio Code makes it easy to deploy your applications to the cloud with [Azure](https://azure.microsoft.com) and we've created walkthroughs to help you get started.
Visual Studio Code makes it easy to deploy your applications to the cloud with Azure and we've created walkthroughs to help you get started.

Whether your workflow is through the [Azure CLI](https://learn.microsoft.com/cli/azure) or [Azure App Service](https://azure.microsoft.com/services/app-service), using a Docker container, or creating serverless [Azure Functions](https://azure.microsoft.com/services/functions/), you'll find the deployment steps you need.
Whether you're a fullstack, backend, API developer, or DevOps engineer, you'll find the deployment steps you need.

## Deployment tutorials

Expand All @@ -29,7 +29,6 @@ You can find additional tutorials and walkthroughs on the

## Next steps

* [Deploy to Azure Container Apps](https://learn.microsoft.com/en-us/azure/container-apps/deploy-visual-studio-code) - Run microservices and containerized applications on a serverless platform.
* [Visual Studio Code Azure Extensions](/docs/azure/overview.md) - The Azure Tools extension pack is designed to deploy your application to Azure within minutes.
* [Working with Docker](/docs/azure/docker.md) - Put your application in a Docker container for easy reuse and deployment.
* [Azure Extensions](/docs/azure/extensions.md) - The VS Code Marketplace has hundreds of extensions for Azure and the cloud.
* [Working with MongoDB](/docs/azure/mongodb.md) - Create, manage and query MongoDB databases from within VS Code.
* [Working with Kubernetes](/docs/azure/kubernetes.md) - for automating deployment, scaling, and management of application.
33 changes: 0 additions & 33 deletions docs/azure/extensions.md

This file was deleted.

60 changes: 60 additions & 0 deletions docs/azure/gettingstarted.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
Order: 2
Area: azure
TOCTitle: Getting Started
PageTitle: Azure Tools for Visual Studio Code
ContentId:
MetaDescription: Azure Tools for Visual Studio Code Getting Started guide for developers
DateApproved: 08/21/2024
---
# Getting Started with Azure Tools for Visual Studio Code

The [Azure Tools extension pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack) enables developers to access Azure's cloud services within their current environment, simplifying the process of building web applications, managing backend services, deploying APIs, and handling large datasets. This guide is specifically designed for Azure Tools within VS Code. It provides essential tips for getting started, writing code, deploying applications, troubleshooting with logs, utilizing Azure resources, and effectively navigating your code within VS Code.

![Explorer view](images/extensions/explorer.png)

## Get started

**Install the Azure Tools extension pack.** Open VS Code, navigate to the Extensions view, and search for “Azure Tools.” Install the [Azure Tools extension pack](overview.md) from Microsoft.

**Navigate to the Azure Resources view.** Select the Azure icon in the Activity Bar (sidebar) to open the **Azure Resources** view. Once you're signed in to your Azure account, the Azure Resources view displays all your existing resources. You can create and manage these services right from VS Code.

![Azure icon](images/extensions/azure-icon.png)

**Search Azure commands with the Command Palette.** An important key combination to know is (`kb(workbench.action.showCommands)`), which brings up the Command Palette. It is your starting point for access to all functionality within VS Code including commands, keyboard shortcuts, and opening files.

In the Command Palette, type `Azure` to list the commands that are specific to Azure. For example, to open the Cloud Shell.

![Command palette](images/extensions/command-palette.png)

**Open folders.** A Visual Studio Code *workspace* is the collection of one or more folders that are opened in a VS Code window (instance). In most cases, you will have a single folder opened as the workspace. You can open a workspace by using the **File > Open Folder...** menu, and then selecting a folder. However, depending on your development workflow, you can include more than one folder, using an advanced configuration called Multi-root workspace.

**Review settings.** To edit or review your current settings in VS Code, use (`kb(workbench.action.openSettings)`), to open the Settings editor. It is helpful to review settings that any of the extensions may contribute.

**Identify and customize keyboard shortcuts.** You can use the Keyboard Shortcuts editor (`kb(workbench.action.openGlobalKeybindings)`) to find and configure keyboard shortcuts in VS Code. Get more info about [Keyboard Shortcuts editor](/docs/getstarted/keybindings.md#keyboard-shortcuts-editor).

**Redisplay notifications.** You can right-click the bell icon in the bottom right of the Status Bar in VS Code to see missed notifications.

## Write Code

Save time with these features: efficiently create and manage Azure resources, organize files and deploy easier, customize to align with your workflow, and seamlessly create Azure resources from installed extensions directly within VS Code.

**Resource and Workspace views** Use the Resources explorer to create and manage Azure resources. Use the Workspace explorer to create files and deploy.

**Grouping** Change the way resources are grouped to fit your workflow.

**Create Resources** Create an Azure resource from your installed extensions directly in VS Code.

## Troubleshooting Azure apps/resources

Quickly locate and review detailed log information, access your recent activities, and easily manage the resources you've recently created.

**Find logs.** The Output Channel displays textual information such as logs, messages, and other information. Use **Ctrl+Shift+U** to show Output.

**Tip:** More verbose log info is found in the Output Channel.

**Access resources.** View all of your recent activities and quickly access resources you've recently created in the **Activity Log**.

## Next steps

* [Deployment](/docs/azure/deployment.md) - Learn how to deploy your apps to the cloud using Azure.
3 changes: 3 additions & 0 deletions docs/azure/images/extensions/azure-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions docs/azure/images/extensions/command-palette.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions docs/azure/images/extensions/explorer.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/azure/mongodb.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
Order: 5
Order: 7
Area: azure
TOCTitle: MongoDB
PageTitle: Working with MongoDB in Visual Studio Code
Expand Down
42 changes: 42 additions & 0 deletions docs/azure/overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
Order: 1
Area: azure
TOCTitle: Overview
PageTitle: Visual Studio Code Azure Extensions
ContentId: d2e93075-4cfe-48f4-b05e-f985c86d9713
MetaDescription: Visual Studio Code Azure Extensions
DateApproved: 02/1/2024
---
# Azure Extensions

You can use Azure directly from Visual Studio Code through a range of extensions. The [Azure Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack) extension pack contains various extensions designed to deploy your application to Azure within minutes.

![app service](images/extensions/azure-tools.png)

## Which extension should I use?

The table below describes the various extensions available in the Azure Tools extension pack for VS Code and highlights common use cases.

|Type of Developer|Description|When to use|
|----------------------|---------------------|-------------|
|Fullstack developer|Developers who work on both frontend and backend aspects of apps.|If you're building a web app with both frontend and backend components, use these extensions to deploy and manage the entire stack on Azure.</br></br> **Azure Container Apps** creates or manages containerized apps that handle different parts of your stack.</br> **Azure Functions** creates serverless functions to handle backend tasks and integrate with frontend apps.</br> **Azure App Service** deploys complete web solutions, including dynamic backend services, APIs, and server-side logic.|
|Backend developer|Developers who build microservices architectures and use containers to encapsulate/manage individual microservices.|When developing microservices, backend logic, or APIs for your application, these tools provide the ability to scale effortlessly without managing infrastructure.</br></br>**Azure Container Apps** handles server-side logic, APIs, and microservices.</br> **Azure Functions** handles server-side logic and APIs.</br> **Azure Container Apps** deploys and manages containerized backend services.</br> **Azure Functions** allows you to build scalable, event-driven backend services without the need to manage any infrastructure.</br> **Azure App Service** allows you to deploy RESTful APIs, microservices, and other backend components.|
|DevOps Engineer|Engineers who are responsible for setting up or maintaining CI/CD pipelines and managing cloud infrastructure.|Use these extensions when setting up CI/CD pipelines or automating deployment processes for scalable applications.</br></br>**Azure Container Apps** automates the deployment and scaling of containerized applications.</br> **Azure Functions** automates the deployment of serverless functions and integrates them into a broader DevOps workflow.</br> **Azure App Service** integrates code repositories with automated deployment processes and monitors application performance and logs.</br> **Azure Static Web Apps** automates the deployment process and ensures seamless integration with GitHub Actions or Azure DevOps.|
|Frontend developer|Developers who specialize in building user interfaces using frameworks and libraries like React, Angular, Vue.js, or plain HTML/CSS/JavaScript.|These extensions are perfect for deploying and managing static websites or single-page applications, with integrations for automatic deployments from GitHub or Azure DevOps.</br></br>**Azure Static Web Apps**, **Azure App Service**, **Azure Storage**, and **Azure Functions** offer a streamlined workflow for developing, previewing, and deploying static websites and single-page applications.|
|Enterprise Developer|Developers who work on large-scale apps, services for businesses, and who build Software as a Service (SaaS) apps.|When building enterprise-level applications or SaaS products, these tools help ensure scalability and reliability for business-critical services.</br></br>**Azure Container Apps**, **Azure Functions**, **Azure App Service:** Use these extensions to deploy, scale, and monitor mission-critical applications.</br> Use containers to create scalable, multi-tenant services, and automate various backend processes.|
|API developer|Developers who create and manage APIs for various clients and apps.|For building RESTful or serverless APIs, these extensions streamline the process of deployment and scaling.</br></br>**Azure Functions** or **Azure Container Apps** are options for building and deploying serverless APIs.</br> **Azure Storage** fulfills your API data storage requirements with options like blobs, queues, tables, and files. It also allows for uploading and downloading data.|
|Data engineer|Engineers who process and analyze data streams.|When working with large-scale data streams, these tools help create scalable environments for real-time data processing and analysis.</br></br> Deploy data processing and machine learning models in containers using **Azure Container Apps**, creating scalable and reproducible environments for your data-driven applications.</br> **Azure Functions** let you trigger data workflows, perform ETL tasks, and react to real-time data changes.|

## Visual Studio Code Marketplace

There are many VS Code extensions on the [Marketplace](https://marketplace.visualstudio.com/search?term=azure&target=VSCode&category=All%20categories&sortBy=Relevance) that make it easy to build and host applications on Azure.

<div class="marketplace-extensions-azure-curated"></div>

> **Tip:** Click on an extension tile above to read the description and reviews in the Marketplace.
## Next steps

* [Azure Tools Getting Started](/docs/azure/gettingstarted.md) - Learn how to get started quickly.
* [Azure Architecture Center](https://learn.microsoft.com/en-us/azure/architecture/?source=docs) - Guidance for architecting solutions on Azure using established patterns and practices
* [VS Code Getting Started](https://code.visualstudio.com/docs/getstarted/getting-started)
2 changes: 1 addition & 1 deletion docs/azure/remote-debugging.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
Order: 3
Order: 8
Area: azure
TOCTitle: Remote Debugging for Node.js
PageTitle: Azure Remote Debugging for Node.js with Visual Studio Code
Expand Down

0 comments on commit 19ed99a

Please sign in to comment.