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:
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
Tools for Development containers
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.
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
@azurescope. - 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.