Tools for JavaScript developers on Azure

JavaScript is an ecosystem of many tools. This article is a selection of tools built and maintained by Microsoft for JavaScript developers. You don't need to use these tools to use Azure, it just makes the experience better, both in functionality and support.

Azure portal

The Azure portal gives you access to all subscriptions and resources for your account.

Visual Studio Code

Visual Studio Code is the preferred IDE for JavaScript development for Azure. The interface, features, and extensions work together to shorten development time and reduce development frustration.

Create a project workspace at the root of your local development project then add all relevant configurations, settings, and extensions. Check in the workspace file with the project so every team member has access to the settings and tools they need for the project.

You get several benefits using Visual Studio Code:

• Visual Studio Code displays the Azure reference documentation inline
• Visual Studio Code provides statement completion
• Few ambiguous types or objects

Visual Studio Code provides of wealth of documentation for JavaScript project use.

Tools for Azure services

Use the following free extensions to use Azure services directly in Visual Studio Code.

Service	Tools	Description
Top services	Visual Studio Code extension	A collection of extensions. Get all the top Azure services in this one extension from Microsoft.
Azure Resource Group	Visual Studio Code extension Azure CLI	View and manage Azure resources. Tutorial: Deploy Express.js MongoDB app to App Service from Visual Studio Code Tutorial: Add Cognitive Search to a website
Azure Static web apps	Visual Studio Code extension SWA CLI	Create and manage Azure Static Web Apps using the VS Code extension or the Static Web Apps CLI (SWA CLI). The VS Code extension integrates with the editor, while the SWA CLI simulates Azure services locally.
Azure Functions	Visual Studio Code extension Azure CLI npm package	Create, manage, view, debug, and deploy functions Quickstart: Create a JavaScript function in Azure using Visual Studio Code
Azure Container Apps	Visual Studio Code extension Azure CLI containerapp	Azure Container Apps allows you to run microservices and containerized applications on a serverless platform. Manage your container apps, deploy new versions, and monitor performance. Tutorial: Deploy a frontend microservice app Tutorial: Deploy a backend microservice app
Azure Cosmos DB	Visual Studio Code Extension Azure CLI	Create, browse, and update globally distributed, multi-model databases in Azure. Quickstart: Connect Azure Functions to Azure Cosmos DB using Visual Studio Code
Storage	Visual Studio Code extension Azure CLI Storage Emulator - Azurite	Azure Storage including Blob Containers, File Shares, Tables, and Queues Quickstart: Connect Azure Functions to Azure Storage using Visual Studio Code

To see all Azure extensions, use this link:

• All Azure extensions

TypeScript

TypeScript offers all of JavaScript's features, and provides a strong but flexible type system.

TypeScript and the Azure SDK client libraries

Azure SDK client library reference documentation is written for TypeScript because the client libraries are written with TypeScript. You don't have to use TypeScript to use the Azure SDK client libraries.

Learn more about the TypeScript guidelines for Azure SDK.

Deployment

The premier deployment tool for Azure is Azure Development CLI. This tool allows you to create and configure your Azure services with Bicep or Terraform, then deploy your source code.

Use Awesome AZD to find deployable samples to understand the end-to-end solutions for Azure.

Continuous integration and testing (CICD) tools

The following integration tools for building and deployment increase your pipeline productivity.

• Git or Git for Windows
• GitHub Actions
• Azure Pipelines integration

Containers

If you're looking for a Microsoft or Azure-specific Docker image, use the Microsoft Container Registry (MRC) to query for an image.

Tools for containers

• Docker
• Remote - Containers
• Remote - SSH

Tools for Development containers

• Development containers
• Dev containers extension

Azure CLI

Azure CLI is optimized for managing Azure resources from the command line.

Azure CLI provides the following use scenarios:

• Azure CLI Local installation
• Azure Cloud Shell
• Docker container

If you use the Azure portal, the Azure CLI is available in the portal from the top navigation bar.

Sample applications, code, and snippets

The GitHub organization, Azure-Samples, contains many samples across the products and services offered by Azure. Use the Azure Samples browser to find a sample to meet your needs.

Other samples include:

• Azure SDK for JS samples
• Microsoft Authentication Library for JS (MSAL.js) samples
• JavaScript end-to-end samples

Playwright

Playwright is a Node.js library to automate Chromium, Firefox, and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable, and fast.

Rush

Rush is a scalable monorepo manager for the web.

Windows Terminal

Windows Terminal allows you to access several different terminal types from the same Windows application including the Azure CLI and Ubuntu. Use this tool to develop and test CICD bash scripts before using those scripts in GitHub Actions or another pipeline.

Windows Subsystem for Linux

The Windows Subsystem for Linux lets developers run a GNU/Linux environment, including most command-line tools, utilities, and applications, directly on Windows, unmodified, without the overhead of a traditional virtual machine or dual-boot setup.

Azure JavaScript developers Tips and tricks

The following list includes tips and tricks Azure developers should know to be more productive:

• Develop a naming schema for your Azure resources.
• Group Azure resources into resource groups, which also use a naming schema.
• For each Azure resource, add tags that communicate the resource's purpose, project, and other vital information. These tags are visible on the Azure portal, for that resource, on the Overview page. Think of the tags as a way to document the resource.
• Most resources have at least one free version per subscription. Use this type of resource while learning how to use it.
• For "secure by default" solutions, learn how to create resources without connection strings or passwords. This security allows you to use the same code in all environments, without having to manage connection strings or rotate keys.
• The latest npm packages for Azure start with @azure scope.
• Most Azure npm packages can use the DefaultAzureCredential. While the setup looks complicated, the benefit of no longer having to manage your local and remote authentication to the Azure platform is great for security and time savings.
• All Azure JavaScript SDKs include TypeScript types. This functionality allows you to adopt strong types for your solutions easily and know they won't become out of sync with the SDK.

Next steps

• Set up your development environment