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 much 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 web site hosting, SQL and MongoDB data, Docker Containers, Serverless Functions and more, all on Azure, all from VS Code, 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 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 App Service Visual Studio Code extension

Azure CLI app service

Azure CLI app
App service allows you to manage App Service plans. Web App allows you to manage web apps running in the plan. Browse sites and the Azure portal, create new sites and deploy to slots.

Quickstart: Create a Node.js web app in Azure

Quickstart: Run a custom container in Azure
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

Other resources:

TypeScript

TypeScript offers all of JavaScript's features, and another layer on top of these: TypeScript's type system. The main benefit of TypeScript is that it can highlight unexpected behavior in your code, lowering the chance of bugs.

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.

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

CICD tools

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

Docker Containers

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

Local development

If you typically use Docker containers locally in your development environment, consider using the Remote - Containers extension. This extension allows you to find a relevant container for your current open folder in Visual Studio Code. There are several Node.js containers to select from or you can bring your own. Once you open the project in a container, you can set breakpoints and debug as if you were in your local environment.

Azure CLI

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

Azure CLI provides the following use scenarios:

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

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.

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.
  • Some resources provide two keys, connection strings, or other securing devices. There are two so that two different developers can work on the project without sharing the key or connection string. Rotate these keys when a developer leaves the project.
  • 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.

Next steps