CINXE.COM

<!DOCTYPE html><html class=" is-full has-default-focus theme-light" lang="en-us" dir="ltr" data-authenticated="false" data-auth-status-determined="false" data-target="docs" x-ms-format-detection="none"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta property="og:title" content="JavaScript at Microsoft" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://developer.microsoft.com/en-us/javascript/" /><meta property="og:description" content="Everything from Microsoft for JavaScript developers. Beginning resources, application development, and in production. Tools and learning content for JavaScript developers." /><meta property="og:image" content="https://learn.microsoft.com/en-us/media/open-graph-image.png" /> <meta property="og:image:alt" content="Microsoft Learn" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@MicrosoftLearn" /> <meta name="color-scheme" content="light dark"><meta name="author" content="sinedied" /> <meta name="depot_name" content="devMSFT.dev" /> <meta name="description" content="Everything from Microsoft for JavaScript developers. Beginning resources, application development, and in production. Tools and learning content for JavaScript developers." /> <meta name="document_id" content="0c50bb1c-ba6b-7899-def7-c0bb9fa4e4ae" /> <meta name="document_version_independent_id" content="0c50bb1c-ba6b-7899-def7-c0bb9fa4e4ae" /> <meta name="feedback_help_link_type" content="" /> <meta name="feedback_help_link_url" content="" /> <meta name="feedback_product_url" content="" /> <meta name="feedback_system" content="None" /> <meta name="git_commit_id" content="7583c5df789e1d241e072bb01c85b0d169eb5c80" /> <meta name="gitcommit" content="https://github.com/MicrosoftDocs/devmsft/blob/7583c5df789e1d241e072bb01c85b0d169eb5c80/dev/javascript/index.yml" /> <meta name="locale" content="en-us" /> <meta name="ms.author" content="yolasors" /> <meta name="ms.contributors" content="aapowell-09102021" /> <meta name="ms.custom" content="team=cloud_advocates" /> <meta name="ms.date" content="22/05/2023" /> <meta name="ms.service" content="azure" /> <meta name="ms.topic" content="hub-page" /> <meta name="original_content_git_url" content="https://github.com/MicrosoftDocs/devmsft/blob/live/dev/javascript/index.yml" /> <meta name="page_type" content="marketing" /> <meta name="schema" content="Marketing" /> <meta name="services" content="azure" /> <meta name="site_name" content="dev.microsoft.com" /> <meta name="uhfHeaderId" content="DEV_Homeheader" /> <meta name="updated_at" content="2024-10-31 04:12 PM" /> <meta name="persistent_id" content="da7fd3e8-c950-581b-1052-cd663a2559f5" /> <meta name="github_feedback_content_git_url" content="https://github.com/MicrosoftDocs/devmsft/blob/live/dev/javascript/index.yml" /><link href="https://developer.microsoft.com/en-us/javascript/" rel="canonical"><title>JavaScript at Microsoft | Microsoft Developer</title><link rel="stylesheet" href="/static/assets/0.4.028726178/styles/site-ltr.css"> <script id="msdocs-script"> var msDocs = {environment: { supportLevel: 'production', accessLevel: 'online', reviewFeatures: false, systemContent: false, azurePortalHostname: 'portal.azure.com', legacyHosting: false, siteName: 'developer', },data: { timeOrigin: Date.now(), contentLocale: 'en-us', contentDir: 'ltr', userLocale: 'en-us', userDir: 'ltr', pageTemplate: 'Marketing', brand: 'developer', context: {}, hasBinaryRating: false, feedbackHelpLinkType:'', feedbackHelpLinkUrl:'', standardFeedback: false, showFeedbackReport: false, enableTutorialFeedback: false, feedbackSystem: 'None', feedbackGitHubRepo: '', feedbackProductUrl: '',extendBreadcrumb: false,isEditDisplayable: false, hideViewSource: false, hasPageActions: false, hasPrintButton: false, hasBookmark: false, hasShare: true, isPermissioned: false, isPrivateUnauthorized: false,hasRecommendations: false,contributors: [{ name: "mairaw", url: "https://github.com/mairaw" },{ name: "anfibiacreativa", url: "https://github.com/anfibiacreativa" },{ name: "BenDMyers", url: "https://github.com/BenDMyers" },{ name: "jdanyow", url: "https://github.com/jdanyow" }],}, functions:{} }; </script><script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script> <script src="https://js.monitor.azure.com/scripts/c/ms.jsll-4.min.js"></script><script src="/static/assets/0.4.028726178/global/deprecation.js"></script><script src="/static/assets/0.4.028726178/scripts/en-us/index-docs.js"></script></head> <body lang="en-us" dir="ltr"> <div class="header-holder has-default-focus"> <a href="#main" style="z-index: 1070" class="outline-color-text visually-hidden-until-focused position-fixed inner-focus focus-visible top-0 left-0 right-0 padding-xs text-align-center has-body-background" tabindex="1">Skip to main content</a><div hidden id="cookie-consent-holder" data-test-id="cookie-consent-container"></div> <div id="unsupported-browser" style=" background-color: white; color: black; padding: 16px; border-bottom: 1px solid grey;" hidden > <div style="max-width: 800px; margin: 0 auto;"> <p style="font-size: 24px">This browser is no longer supported.</p> <p style="font-size: 16px; margin-top: 16px;">Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.</p> <div style="margin-top: 12px;"> <a href="https://go.microsoft.com/fwlink/p/?LinkID=2092881 " style=" background-color: #0078d4; border: 1px solid #0078d4; color: white; padding: 6px 12px; border-radius: 2px; display: inline-block; ">Download Microsoft Edge</a> <a href="https://learn.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge" style=" background-color: white; padding: 6px 12px; border: 1px solid #505050; color: #171717; border-radius: 2px; display: inline-block; ">More info about Internet Explorer and Microsoft Edge</a> </div> </div> </div>   <header id="ms--site-header" data-test-id="site-header-wrapper" role="banner" itemscope="itemscope" itemtype="http://schema.org/Organization"> <div id="ms--mobile-nav" class="site-header display-none-tablet padding-inline-none gap-none" data-bi-name="mobile-header" data-test-id="mobile-header"></div> <div id="ms--primary-nav" class="site-header display-none display-flex-tablet" data-bi-name="L1-header" data-test-id="primary-header"></div> <div id="ms--secondary-nav" class="display-none" data-bi-name="L2-header" data-test-id="secondary-header"></div> </header><div id="disclaimer-holder" class="has-overflow-hidden has-default-focus">  </div> </div> <div class="mainContainer uhf-container is-full has-default-focus" data-bi-name="body"> <div class="columns has-large-gaps is-gapless-mobile is-gapless"> <section class="primary-holder column ">  <div class="columns is-gapless-mobile has-large-gaps is-gapless"><div id="main-column" class="column "> <main id="main" class="" role="main" data-bi-name="content" lang="en-us" dir="ltr"><div> <button type="button" class="border contents-button button button-clear button-sm is-hidden-tablet has-inner-focus" data-bi-name="contents-expand" data-contents-button hidden> <span class="icon"> <span class="docon docon-editor-list-bullet" aria-hidden="true"></span> </span><span class="contents-expand-title">Table of contents</span></button> </div> <div class=""><div id="Marketing" class="has-overflow-hidden"> <div id="hero-section-0" class="hero is-small background-color-white-static color-black-static "> <div class="hero-background "> <img src="media/js-banner-green.png" aria-hidden="true" data-linktype="relative-path"> </div> <div class="hero-body"> <div class="is-reading-width has-backdrop-filter-blur"> <p class="supertitle is-spaced font-size-sm letter-spacing-wide is-uppercase">Developer hub</p> <h1 id="microsoft-for-javascript-developers" class="title is-size-jumbo-responsive">Microsoft for JavaScript developers</h1> <p class="font-size-md margin-top-lg is-reading-width">Everything from Microsoft for JavaScript developers</p> </div> </div> </div> <div id="hero-section-1" class="hero is-small has-linear-gradient-background-javascript has-text-javascript-invert uhf-container padding-inline-none margin-block-md border-radius-lg has-overflow-hidden"> <div class="hero-background "> <img src="media/serverless-banner.jpg" aria-hidden="true" data-linktype="relative-path"> </div> <div class="hero-body padding-inline-md padding-inline-lg-tablet"> <div class="is-reading-width has-backdrop-filter-blur"> <h2 id="new-video-series-generative-ai-with-javascript" class="title is-2 is-responsive">New video series: Generative AI with JavaScript</h2> <p class="font-size-md margin-top-lg is-reading-width">JavaScript devs, now’s your chance to tap into the potential of Generative AI! Whether you’re just curious or ready to level up your apps, our new video series is packed with everything you need to start building AI-powered applications.</p> <div class="buttons margin-top-md"> <a href="https://www.youtube.com/playlist?list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk" class="button button-clear border" data-linktype="external">Watch the series</a> </div> </div> </div> </div> <div id="markdown-section-2" class="padding-block-sm"> <div class="uhf-container padding-top-sm"> <div class="content"> <h2 id="javascript-dev-day-videos">JavaScript Dev Day Videos</h2> <p>Watch the JavaScript Dev Day videos to learn about the latest features and tools for JavaScript developers.</p> <p>The full playlist is available on <a href="https://www.youtube.com/playlist?list=PLI7iePan8aH7FRDmefj-NAnoxM9V0USZm" data-linktype="external">YouTube</a>.</p> </div> </div> </div> <div id="cards-section-3" class="padding-block-lg"> <div class="uhf-container"> <ul class="grid "> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/vid-rag.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Building a versatile RAG Pattern chat bot with Azure OpenAI, LangChain</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Wassim Chegham, Natalia Venditto and Lars Gyrup Brink Nielsen walk you through the code of our popular JavaScript Azure OpenAI sample. </p> <a href="https://www.youtube.com/watch?v=4fNoGZSTB_A&list=PLI7iePan8aH7FRDmefj-NAnoxM9V0USZm" data-linktype="external">Watch video ›</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/vid-yohan.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">LangChain.js + Azure: A Generative AI App Journey</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Yohan Lasorsa demonstrates the journey of building a generative AI application using LangChain.js and Azure. </p> <a href="https://www.youtube.com/watch?v=nYXSKs8qMY8&list=PLI7iePan8aH7FRDmefj-NAnoxM9V0USZm" data-linktype="external">Watch video ›</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/vid-burke.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">GitHub Copilot Can Do That?</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Burke Holland gives you tips on how GitHub Copilot to make developers' life easier and more enjoyable. </p> <a href="https://www.youtube.com/watch?v=6xKOplqYp4g&list=PLI7iePan8aH7FRDmefj-NAnoxM9V0USZm" data-linktype="external">Watch video ›</a> </div> </div> </article> </li> </ul> </div> </div> <div id="grid-section-4" class="padding-block-md"> <div class="uhf-container"> <h2 id="code-samples" class="title is-2 is-responsive">Code samples</h2> <ul class="grid is-fibonacci"> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://github.com/Azure-Samples/contoso-real-estate" class="card-title stretched-link" data-linktype="external">Enterprise-grade Azure Sample App for JavaScript developers</a> <p class="card-content-description margin-top-xxs"> Real-world example app architecture for an end-to-end cloud-native JavaScript application. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://github.com/Azure-Samples/azure-search-openai-javascript" class="card-title stretched-link" data-linktype="external">ChatGPT + Enterprise Data Sample</a> <p class="card-content-description margin-top-xxs"> Enterprise ChatGPT-like experience using Retrieval Augmented Generation and your own data. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://github.com/Azure-Samples/serverless-chat-langchainjs" class="card-title stretched-link" data-linktype="external">Serverless ChatGPT with RAG using LangChain.js</a> <p class="card-content-description margin-top-xxs"> Serverless ChatGPT-like experience with RAG using LangChain.js, running locally or on Azure. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://github.com/Azure-Samples/langchainjs-quickstart-demo" class="card-title stretched-link" data-linktype="external">Ask YouTube: LangChain.js + Azure Quickstart</a> <p class="card-content-description margin-top-xxs"> Q&A on YouTube videos using LangChain.js, running locally with Ollama or on Azure. </p> </div> </article> </li> </ul> </div> </div> <div id="cards-section-5" class="padding-block-lg"> <div class="uhf-container"> <ul class="grid is-fibonacci"> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/banner-1.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Code</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Whether it's local or in the cloud, we have the tools to help you code and debug your applications, wherever you are. </p> <a href="https://code.visualstudio.com/" data-linktype="external">Visual Studio Code</a> <a href="https://github.com/features/codespaces" data-linktype="external">GitHub Codespaces</a> <a href="https://www.youtube.com/watch?v=l39cjaosxKw&list=PLlrxD0HtieHgMPeBaDQFx9yNuFxx6S1VG&index=19" data-linktype="external">Video: Debugging your Web Apps in VS Code</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/banner-2.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Accelerate</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Build faster and more efficiently with the tools and frameworks that help you get the most out of your code. </p> <a href="https://www.typescriptlang.org/" data-linktype="external">TypeScript: JavaScript that scales</a> <a href="https://aka.ms/ws/copilot-todo" data-linktype="external">Tutorial: Use GitHub Copilot to build and deploy a Node.js application on Azure</a> <a href="https://learn.microsoft.com/azure/developer/javascript/azure-sdk-library-package-index?WT.mc_id=javascript-29163-cxa" data-linktype="external">Azure SDKs for JavaScript</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/banner-3.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Test</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Test your code and make sure it's working as expected. We have tools to help you test your code at every stage of development. </p> <a href="/en-us/microsoft-edge/?WT.mc_id=javascript-29163-cxa" data-linktype="absolute-path">Develop with Edge web browser</a> <a href="https://www.youtube.com/watch?v=SW3TqvhrzU4&list=PLQ6Buerc008dhme8fC80zmhohqpkA0aXI" data-linktype="external">Video series: End-to-end testing with Playwright</a> <a href="https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs" data-linktype="external">Set up continuous integration with GitHub Actions</a> </div> </div> </article> </li> <li class="grid-item"> <article class="media-card border-radius-lg " data-bi-name="card"> <figure class="media-card-image"> <img src="media/banner-4.jpg" alt="" data-linktype="relative-path"> </figure> <div class="media-card-content"> <p class="title is-5 margin-block-none">Run</p> <div class="display-flex flex-direction-column justify-content-space-between flex-grow-1"> <p class="margin-bottom-xs flex-grow-1"> Deploy your code to the cloud and run it in production, your way. </p> <a href="https://www.youtube.com/watch?v=w-tLZjO6XMc&list=PLlrxD0HtieHgMPeBaDQFx9yNuFxx6S1VG&index=1" data-linktype="external">Video series: Azure Static Web Apps</a> <a href="https://learn.microsoft.com/azure/container-apps/overview?WT.mc_id=javascript-29163-cxa" data-linktype="external">Azure Container Apps</a> <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-nodejs?tabs=azure-cli%2Clinux&WT.mc_id=javascript-29163-cxa" data-linktype="external">Tutorial: Use Node.js to connect and query data from Azure Cosmos DB</a> </div> </div> </article> </li> </ul> </div> </div> <div id="grid-section-6" class="padding-block-md"> <div class="uhf-container"> <h2 id="learning-resources" class="title is-2 is-responsive">Learning resources</h2> <ul class="grid is-fibonacci"> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://aka.ms/ws/openai-rag" class="card-title stretched-link" data-linktype="external">Workshop: Create your own ChatGPT with Retrieval-Augmented-Generation</a> <p class="card-content-description margin-top-xxs"> Explore the fundamentals of custom ChatGPT experiences based on a corpus of documents. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://learn.microsoft.com/users/learn-live/collections/12odt3rkw1nqnd?wt.mc_id=build23_lab_collection_azuremkt_LAB120" class="card-title stretched-link" data-linktype="external">Tutorial: Build a serverless web application end-to-end on Microsoft Azure</a> <p class="card-content-description margin-top-xxs"> Build a modern, scalable, composable and cloud-native web application. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://aka.ms/ws/copilot-todo" class="card-title stretched-link" data-linktype="external">Workshop: Use GitHub Copilot to build and deploy a Node.js application on Azure</a> <p class="card-content-description margin-top-xxs"> Explore how to accelerate your development and deployment of a Node.js application with GitHub Copilot. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://learn.microsoft.com/shows/beginners-series-to-javascript/?wt.mc_id=javascript-29163-cxa" class="card-title stretched-link" data-linktype="external">Video series: Beginner's series to JavaScript</a> <p class="card-content-description margin-top-xxs"> Learn the fundamentals of the JavaScript language. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://learn.microsoft.com/shows/beginners-series-to-nodejs/?wt.mc_id=javascript-29163-cxa" class="card-title stretched-link" data-linktype="external">Video series: Beginner's series to Node.js</a> <p class="card-content-description margin-top-xxs"> Discover the fundamentals of Node.js and how to use it to build applications. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://learn.microsoft.com/training/paths/build-javascript-applications-nodejs/?WT.mc_id=javascript-29163-cxa" class="card-title stretched-link" data-linktype="external">Tutorial: Build applications with Node.js</a> <p class="card-content-description margin-top-xxs"> A complete training path to learn how to create Node.js applications. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://learn.microsoft.com/azure/developer/javascript/how-to/deploy-web-app?WT.mc_id=javascript-29163-cxa&WT.mc_id=javascript-29163-cxa" class="card-title stretched-link" data-linktype="external">Tutorial: Deploy and host your Node.js app on Azure</a> <p class="card-content-description margin-top-xxs"> Deploy your first Node.js application in a few steps. </p> </div> </article> </li> <li class="grid-item"> <article class="card position-relative border-left-lg border-left-color-accent" data-bi-name="summary-card"> <div class="card-content"> <a href="https://aka.ms/ws/node-microservices" class="card-title stretched-link" data-linktype="external">Workshop: Microservices in practice with Node.js, Docker, and Azure</a> <p class="card-content-description margin-top-xxs"> Implement a microservices architecture from code to production, using Node.js, Docker, and Azure. </p> </div> </article> </li> </ul> <p class="margin-top-xs">Get more content with Microsoft.Source, our curated monthly developer community newsletter. <a href="https://azure.microsoft.com/resources/join-the-azure-developer-community/?WT.mc_id=javascript-29163-cxa" class="font-weight-semibold" data-linktype="external">Sign up here!</a></p> </div> </div> <div id="grid-section-7" class="padding-block-md"> <div class="uhf-container"> <h2 id="tools-for-javascript-developers" class="title is-2 is-responsive">Tools for JavaScript developers</h2> <ul class="grid is-fibonacci"> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/vscode.png" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://code.visualstudio.com/" class="card-title stretched-link" data-linktype="external">Visual Studio Code</a> <p class="card-content-description margin-top-xxs"> The most popular code editor for JavaScript developers </p> </div> </div> </div> </article> </li> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/typescript.png" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://www.typescriptlang.org/" class="card-title stretched-link" data-linktype="external">TypeScript</a> <p class="card-content-description margin-top-xxs"> Typesafe JavaScript </p> </div> </div> </div> </article> </li> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/static-web-apps.png" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://learn.microsoft.com/azure/static-web-apps/overview?WT.mc_id=javascript-29163-cxa" class="card-title stretched-link" data-linktype="external">Azure Static Web Apps</a> <p class="card-content-description margin-top-xxs"> Deploy your web app and serverless API in minutes </p> </div> </div> </div> </article> </li> <li class="grid-item"> <article class="card position-relative" data-bi-name="icon-card"> <div class="card-content display-flex"> <div class="media align-items-stretch"> <div class="media-left"> <figure class="image is-64x64 "> <img src="media/playwright.png" alt="" aria-hidden="true" data-linktype="relative-path"> </figure> </div> <div class="media-content"> <a href="https://playwright.dev/docs/intro" class="card-title stretched-link" data-linktype="external">Playwright</a> <p class="card-content-description margin-top-xxs"> Automated end-to-end testing across Chromium, Firefox, and WebKit with a single API </p> </div> </div> </div> </article> </li> </ul> </div> </div> <div id="hero-section-8" class="hero is-small has-linear-gradient-background-javascript has-text-javascript-invert uhf-container padding-inline-none margin-block-md border-radius-lg has-overflow-hidden"> <div class="hero-background "> <img src="media/hub-banner-blue.jpg" aria-hidden="true" data-linktype="relative-path"> </div> <div class="hero-body padding-inline-md padding-inline-lg-tablet"> <div class="is-reading-width has-backdrop-filter-blur"> <p class="supertitle is-spaced font-size-sm letter-spacing-wide is-uppercase">More development resources</p> <h2 id="azure-for-javascript-developers" class="title is-2 is-responsive">Azure for JavaScript developers</h2> <p class="font-size-md margin-top-lg is-reading-width">Explore the power of JavaScript on Azure through Quickstarts, How-To Guides, codes samples and more.</p> <div class="buttons margin-top-md"> <a href="https://learn.microsoft.com/azure/developer/javascript/?WT.mc_id=javascript-29163-cxa" class="button button-clear border" data-linktype="external">Explore</a> </div> </div> </div> </div> </div> </div><div id="assertive-live-region" role="alert" aria-live="assertive" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div> <div id="polite-live-region" role="status" aria-live="polite" class="visually-hidden" aria-relevant="additions" aria-atomic="true"></div>  </main>  <div class="border-top is-visible-interactive has-default-focus margin-top-sm margin-top-none"><footer id="footer-interactive" data-bi-name="footer" class="footer-layout"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu-interactive" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu-interactive" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkID=206977" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2024</li> </ul> </footer></div></div></div>  </section>   <aside id="interactive-container" class="interactive-container is-visible-interactive column has-body-background-dark "> </aside>  </div> </div>  <section class="border-top has-default-focus is-hidden-interactive margin-top-sm margin-top-none"><footer id="footer" data-bi-name="footer" class="footer-layout uhf-container has-padding" role="contentinfo"><div class="display-flex gap-xs flex-wrap-wrap is-full-height padding-right-lg-desktop"><a data-mscc-ic="false" class="locale-selector-link button button-sm button-clear flex-shrink-0" href="#" data-bi-name="select-locale"> <span class="icon" aria-hidden="true"> <span class="docon docon-world"></span> </span> <span class="local-selector-link-text"></span></a><div class="ccpa-privacy-link" data-ccpa-privacy-link hidden> <a href="https://aka.ms/yourcaliforniaprivacychoices" class="button button-sm button-clear flex-shrink-0" data-mscc-ic="false" data-bi-name="your-privacy-choices" > <svg role="img" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve" height="16" width="43" focusable="false" > <title>California Consumer Privacy Act (CCPA) Opt-Out Icon</title> <path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"></path> <path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#06f"></path> <path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" style="fill:#fff"></path> <path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" style="fill:#06f"></path> </svg> <span>Your Privacy Choices</span> </a> </div> <div class="flex-shrink-0"> <div class="dropdown has-caret-up"> <button class="dropdown-trigger button button-clear button-sm has-inner-focus theme-dropdown-trigger" aria-controls="theme-menu" aria-expanded="false" title="Theme" data-bi-name="theme"> <span class="icon"> <span class="docon docon-sun" aria-hidden="true"></span> </span> <span>Theme</span> <span class="icon expanded-indicator" aria-hidden="true"> <span class="docon docon-chevron-down-light"></span> </span> </button> <div class="dropdown-menu" id="theme-menu" role="menu"> <ul class="theme-selector padding-xxs" role="none"> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="light"> <span class="theme-light margin-right-xxs"> <span class="theme-selector-icon border display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Light</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="dark"> <span class="theme-dark margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>Dark</span> </button> </li> <li class="theme display-block" role="menuitem"> <button class="button button-clear button-sm theme-control button-block justify-content-flex-start" data-theme-to="high-contrast"> <span class="theme-high-contrast margin-right-xxs"> <span class="border theme-selector-icon display-inline-block has-body-background" aria-hidden="true"> <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 14"> <rect width="22" height="14" class="has-fill-body-background" /> <rect x="5" y="5" width="12" height="4" class="has-fill-secondary" /> <rect x="5" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="8" y="2" width="2" height="1" class="has-fill-secondary" /> <rect x="11" y="2" width="3" height="1" class="has-fill-secondary" /> <rect x="1" y="1" width="2" height="2" class="has-fill-secondary" /> <rect x="5" y="10" width="7" height="2" rx="0.3" class="has-fill-primary" /> <rect x="19" y="1" width="2" height="2" rx="1" class="has-fill-secondary" /> </svg> </span> </span> <span>High contrast</span> </button> </li> </ul> </div> </div> </div> </div> <ul class="links" data-bi-name="footerlinks"> <li class="manage-cookies-holder" hidden></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkId=521839" data-bi-name="privacy">Privacy</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://go.microsoft.com/fwlink/?LinkID=206977" data-bi-name="termsofuse">Terms of Use</a></li><li><a class="external-link-indicator" data-mscc-ic="false" href="https://www.microsoft.com/legal/intellectualproperty/Trademarks/" data-bi-name="trademarks">Trademarks</a></li><li>© Microsoft 2024</li> </ul> </footer> </section> <div id="action-panel" role="region" aria-label="Action Panel" class="action-panel has-default-focus" tabindex="-1"></div> </body> </html>