Deploy Your First Web App to Azure

Deploy a Node.js Express app to Azure App Service using the Azure CLI.

Introduction

30 Second Summary

Every website you visit lives on a server somewhere in the world. Learning how to put your own app on the internet is one of the most fundamental cloud skills you can build.

In this project, you will build a Node.js web application and deploy it to Azure App Service using a single command in the Azure CLI.

What You'll Build

A Node.js Express web application deployed to Azure App Service on the Free (F1) tier, accessible to anyone via a public URL.

By the end of this project, you'll have:

A working Node.js Express application running locally on your machine.
An Azure free account with a Resource Group, App Service Plan, and App Service configured.
A live deployed web app on Azure accessible via a public URL that anyone can visit.
Secret Mission: Add a custom JSON API endpoint and redeploy with zero downtime.

Are there any prerequisites?

You need a Microsoft account (or a GitHub account) for Azure signup. You also need a credit or debit card for identity verification during account creation. Your card will not be charged.

Install Node.js and Azure CLI

Before you can build and deploy your web app, you need two tools on your machine. Node.js runs JavaScript outside the browser, and the Azure CLI lets you manage Azure resources directly from your terminal.

In this step, you will install both tools and verify they are working correctly.

In this step, get ready to:

Install Node.js v24 LTS.
Install Azure CLI.

Install Node.js v24 LTS

Node.js is the JavaScript runtime that powers your Express web app. You need version 24 (the current LTS release) installed before you can create your project.

In VS Code, open the integrated terminal by pressing Ctrl+` (Windows/Linux) or Control+` (macOS).
Check if Node.js is already installed by running this command:

node --version

✔️ I see version 24 or higher

Your terminal shows something like v24.16.0. Node.js is ready to go.

Confirm npm is also available by running this command:

npm --version

You should see a version number like 11.13.0 or similar. Both tools are installed and you can skip ahead to the Azure CLI section below.

ⓧ I see an older version

Your terminal shows a version lower than v24. You need to upgrade to the latest LTS release.

Open your browser and go to https://nodejs.org/en/download.
The page should show Node.js v24 LTS as the recommended download. Click the download button for your operating system.
Run the downloaded installer. It will walk you through a setup wizard. Accept the default settings at each step.
After the installer finishes, close your current terminal in VS Code and open a new one by pressing Ctrl+` (Windows/Linux) or Control+` (macOS).
Verify the upgrade by running:

node --version

You should now see v24 or higher.

Confirm npm is also available by running:

npm --version

You should see a version number printed. Both tools are ready.

Why a new terminal?

The Node.js installer updates your system PATH so your terminal can find the node and npm commands. Terminals that were already open still use the old PATH. Opening a fresh terminal picks up the new PATH automatically.

ⓧ Command not found

Node.js is not installed on your machine yet. Follow these steps to install it.

Open your browser and go to https://nodejs.org/en/download.
The page should show Node.js v24 LTS as the recommended download. Click the download button for your operating system.
Run the downloaded installer. It will walk you through a setup wizard. Accept the default settings at each step.
After the installer finishes, close your current terminal in VS Code and open a new one by pressing Ctrl+` (Windows/Linux) or Control+` (macOS).
Verify the installation by running:

node --version

You should see v24 or higher printed in the terminal.

Confirm npm is also available by running:

npm --version

You should see a version number printed. Both tools are ready.

Why a new terminal?

Still seeing the old version or command not found?

Make sure you opened a brand new terminal after the installer finished. If the issue persists, try closing and reopening VS Code entirely.

On macOS, if node --version still shows an older version after installing v24, the system may be resolving to an older installation. Try running /usr/local/bin/node --version to confirm the new version is present, then update your PATH accordingly.

help me troubleshoot my Node.js installation

Install Azure CLI

The Azure CLI is a command-line tool that lets you create and manage Azure resources without clicking through web pages. You will use it to deploy your app in a later step.

Install Azure CLI using Windows Package Manager by running this command in your terminal:

winget install --exact --id Microsoft.AzureCLI

What does this command do?

WinGet is the built-in package manager for Windows. This command downloads and installs the Azure CLI from Microsoft's official package registry. The --exact flag ensures it matches the package ID precisely, and --id Microsoft.AzureCLI tells WinGet exactly which package to install.

What will I see during installation?

WinGet will download the installer and may show a progress bar. You might see a Windows User Account Control (UAC) prompt asking for permission. Click Yes to allow the installation to proceed.

After the installation finishes, close your current terminal and open a new one by pressing Ctrl+` (Windows/Linux) or Control+` (macOS). This is required so the terminal picks up the new az command.
Verify Azure CLI is installed by running this command:

az version

✔️ I see version information

Your terminal displays version details including a line like azure-cli 2.87.0 or similar. The Azure CLI is installed and ready.

ⓧ Command not found

The terminal does not recognize the az command. Try these fixes:

Make sure you opened a new terminal after the install completed. The old terminal does not know about the new command.
Try closing VS Code entirely and reopening it. Then open a fresh terminal.
If it still does not work, run the install command again to make sure it completed successfully:

winget install --exact --id Microsoft.AzureCLI

After reinstalling, open a new terminal and try az version again.

WinGet itself not recognized?

If your terminal says WinGet is not found, you may be running an older version of Windows that does not include it. You can install Azure CLI manually by downloading the MSI installer from the official Azure CLI install page at https://learn.microsoft.com/en-us/cli/azure/install-azure-cli-windows.

help me install Azure CLI on my Windows machine

Your development tools are locked and loaded. Next up, you will create your free Azure account and connect it to the CLI so you can start deploying to the cloud.

Create Your Azure Free Account

Your local tools are installed and ready. Now you need an Azure account so you have somewhere to deploy your app to the cloud.

Azure offers a free account with $200 in credit for 30 days. In this step, you will create that account and connect it to the Azure CLI you installed earlier.

In this step, get ready to:

Create an Azure free account with $200 credit.
Connect the Azure CLI to your new subscription.

Sign up for an Azure free account

Azure's free tier gives you $200 in credit for up to 30 days. You will not be charged beyond the credit unless you manually upgrade your account.

Open https://azure.microsoft.com/en-us/pricing/purchase-options/azure-account in your browser.
Click Try Azure for free.
Sign in with your Microsoft account or GitHub account.
If you do not have either, select the option to create a new Microsoft account.

Complete the signup wizard

The signup wizard has four sections. Work through each one in order.

In the About you section, enter your country/region, first name, last name, email address, phone number, and street address.
In the Identity verification by phone section, choose to receive a verification code via SMS or phone call.
Enter the code in the text box to verify your identity.
In the Identity verification by card section, enter your credit or debit card details. Virtual and prepaid cards are not accepted.
Ensure your billing address matches the country/region you selected.
In the Agreement section, review the Microsoft Customer Agreement.
Click Sign up.

Why is there a $1 charge on my card?

A temporary authorization hold of approximately $1 will appear on your card. This verifies your card is valid and will be removed within 3-5 days.

You will not be charged for using Azure during this project. The Free F1 tier has no cost.

What is a Resource Group?

When your account is created, Azure organizes everything you build into Resource Groups. Think of a Resource Group as a folder that holds related cloud resources together.

In the next steps, you will see a Resource Group created automatically when you deploy your app. It keeps your app, its hosting plan, and its settings in one place.

Connect Azure CLI to your new account

Your Azure account exists, but the CLI on your machine does not know about it yet. You need to sign in so the CLI can manage your Azure resources.

In VS Code, open a terminal by pressing Ctrl+` (the backtick key, top-left of your keyboard).
Authenticate your CLI with Azure by running this command:

az login

What does this command do?

This opens your default browser to a Microsoft sign-in page. After you authenticate with the same credentials you used to create your Azure account, the browser confirms success and the CLI displays your subscription details in the terminal.

Sign in with the same Microsoft or GitHub account you used to create your Azure free account.
Return to your terminal. You should see a JSON output showing your subscription name, subscription ID, and tenant ID.

Browser did not open?

If the browser does not open automatically, the terminal will display a URL and a device code. Open the URL manually in your browser and enter the code to authenticate.

Make sure you are using the same account you signed up with. If you have multiple Microsoft accounts, the CLI may default to a different one.

Help me troubleshoot az login.

Your Azure account is live and your CLI is connected. Next up, you will build the Node.js app that you are going to deploy to the cloud.

Create a Node.js Express App

Your Azure account is live and your CLI is connected. Now you need an app to deploy.

In this step, you'll use Express Generator to scaffold a full Node.js web application. Instead of writing boilerplate from scratch, Express Generator creates a production-ready project structure in seconds.

In this step, get ready to:

Scaffold a Node.js Express project with routes, views, and static files.
Test the app locally in your browser.
Explore the project structure in VS Code.

Scaffold the Express project

Express Generator is a scaffolding tool that creates a complete project with routing, templating, and middleware already wired up. You'll use it to generate a project called myExpressApp on your Desktop.

Move to your Desktop by running this command:

cd ~/Desktop

Generate the Express project by running this command:

npx express-generator myExpressApp --view ejs

What does this command do?

npx runs the express-generator package without installing it globally. The --view ejs flag tells it to use EJS as the templating engine for rendering HTML pages.

The command creates a new folder called myExpressApp containing your entire project structure.

npx install prompt

npx may ask you to confirm the installation of the express-generator package. Type y and press Enter to proceed.

You should see a list of created files in the terminal, including app.js, package.json, routes/, and views/.

Move into the new project folder and install its dependencies by running these commands:

cd myExpressApp
npm install

What does npm install do?

npm install reads the package.json file and downloads all the libraries your Express app needs to run. These are saved in a node_modules folder inside your project.

You should see a summary in the terminal showing the number of packages installed.

Seeing errors during npm install?

Make sure you ran cd myExpressApp before running npm install. The install command needs to find package.json in your current directory.

If you see network errors, check your internet connection and try running the command again.

help me fix npm install errors in my Express project

Start the app locally

Before deploying to Azure, you should confirm the app works on your own machine. Express apps include a built-in development server you can start with a single command.

Start the local development server by running:

npm start

The terminal will appear to hang with no output. This is normal. The server is running and waiting for requests.

Open your browser and visit http://localhost:3000.

You should see the Express welcome page with the text "Welcome to Express" displayed.

Don't see the welcome page?

Make sure you typed the URL exactly as http://localhost:3000 with no trailing slash or extra characters.

If the page won't load, check your terminal. If you see an error about port 3000 being in use, another application is occupying that port. Close the other application and try npm start again.

help me troubleshoot why localhost:3000 isn't loading my Express app

Stop the server and explore the project structure

Now that you've confirmed the app works, you can stop the server and take a closer look at the files Express Generator created for you.

Press Ctrl+C in your terminal to stop the running server.
Switch back to VS Code.
Click File in the top menu bar.
Click Open Folder.
Navigate to your Desktop, select the myExpressApp folder, and click Open.

In the Explorer sidebar on the left, you should see your project files and folders.

What are these files?

app.js is the main application file. It wires together middleware, routes, and error handling.
routes/ contains URL handlers. Each file defines what happens when someone visits a specific path.
views/ holds EJS templates that render HTML pages for the browser.
public/ stores static files like CSS and images that get served directly to visitors.

Click on app.js in the Explorer sidebar to open it and take a quick look at its contents.

You'll see it imports routes, sets up the view engine, and configures middleware. You'll modify this file in the Secret Mission later.

Your Express app is built and tested. Next up, you'll deploy it to Azure App Service and make it live on the internet.

Deploy to Azure App Service

In the previous step, you built and tested an Express app on your own machine. That's great for development, but nobody else can see it yet.

Azure App Service is Microsoft's managed platform for hosting web applications. In this step, you'll use a single CLI command to deploy your app to the cloud and get a live public URL.

In this step, get ready to:

Deploy your Express app to Azure App Service using the Azure CLI.
Verify your app is live and accessible on the internet.
Explore your new Azure resources in the Azure Portal.

Deploy your app with a single command

The az webapp up command handles everything in one step. It creates a Resource Group (a container for related resources), an App Service Plan (the hosting environment), and an App Service (your actual web app), then deploys your code.

Before you run the command, choose a globally unique name for your app. This name becomes part of your public URL (e.g., myapp-yourname-2026.azurewebsites.net). Use only lowercase letters, numbers, and hyphens.
Deploy your app to Azure by running this command:

az webapp up --sku F1 --name [[APPNAME="myapp-yourname-2026"]]

What does this command do?

--sku F1 selects the Free pricing tier, so you won't be charged anything.
--name sets the globally unique name for your App Service (and its URL).
The CLI auto-detects your Node.js project and creates a Linux app to host it.
A Resource Group and App Service Plan are created automatically if they don't already exist.

The deployment takes 1-2 minutes. When it finishes, the CLI outputs JSON with your app's details including the live URL.

Find the URL in the CLI output. It follows the pattern https://<your-app-name>.azurewebsites.net.
Open that URL in your browser.

You should see the same Express welcome page you saw locally, but now it's live on the internet.

Deployment failed or app not loading?

If you see a name conflict error, your chosen app name is already taken. Pick a more unique name and run the command again with the new --name value.
If you get an authentication error, run az login again in your terminal to refresh your credentials, then retry the deploy command.
If the site loads but shows an error page, make sure you ran the command from inside the myExpressApp folder (the one containing package.json).

help me troubleshoot my Azure App Service deployment

Explore your Azure resources

Your single command just created three Azure resources behind the scenes. Let's confirm they exist using the CLI and the Azure Portal.

List your deployed web apps by running this command:

az webapp list --output table

What does this command do?

This lists all web apps in your Azure subscription in a readable table format. You should see your app name, its resource group, location, and current state listed in the output.

Open your browser and go to https://portal.azure.com.
In the search bar at the top of the portal, type Resource groups and select it from the results.
Click on the resource group that was created for your app (its name will match what the CLI output showed).
Inside the resource group, you'll see three resources: your App Service Plan, your App Service, and any related configuration.

What are Resource Groups, App Service Plans, and App Services?

A Resource Group is a logical container that holds related Azure resources together. Think of it as a folder for your project's cloud infrastructure.

An App Service Plan defines the compute resources (CPU, memory, pricing tier) available to your apps. Your plan uses the Free F1 tier, which costs nothing.

An App Service is your actual running web application. It sits inside an App Service Plan and serves your Express app to the internet.

Your app is live on the internet. Next up, you'll update your code and redeploy to see how fast changes go live on Azure.

Update and Redeploy

Your app is live on Azure, but it still shows the default Express welcome page.

In this step, you will make a quick edit to the homepage title and redeploy with a single command. This proves how fast iteration cycles are with Azure App Service and the Azure CLI.

In this step, get ready to:

Customize the Express welcome page title.
Redeploy the updated code to Azure with zero additional configuration.
Confirm your live site reflects the change.

Change the welcome page title

The Express welcome page gets its title from routes/index.js. You will swap the default title for a custom message.

In VS Code, open routes/index.js from the Explorer sidebar.
Find this line:

  res.render('index', { title: 'Express' });

Replace 'Express' with 'Hello Azure!', so the line now looks like this:

  res.render('index', { title: 'Hello Azure!' });

Save routes/index.js.

✔️ Awesome, I've got everything!

Great. Double check you have saved routes/index.js before moving on.

ⓧ I'd like to double check the full code

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Hello Azure!' });
});

module.exports = router;

Redeploy to Azure

The az webapp up command caches your deployment settings in a local .azure/config file. That means you can redeploy without repeating any arguments.

Redeploy your updated app to Azure by running this command:

az webapp up

What does this command do?

Because you already ran az webapp up --sku F1 --name <your-app-name> in the previous step, the CLI stored your app name, resource group, and plan in .azure/config.

Running az webapp up again zips your current project files and deploys them to the same App Service. No new resources are created.

The deployment takes about 30 seconds to one minute. Wait until the CLI outputs a JSON block with your app URL before continuing.

Seeing an error?

Make sure your terminal is still inside the myExpressApp directory. The CLI needs to find your project files to zip and deploy.
If you see an authentication error, run az login again, sign in, and retry the deploy command.

Help me troubleshoot my az webapp up redeployment.

Confirm the update on your live site

Open the live URL that the CLI printed (https://<your-unique-app-name>.azurewebsites.net) in your browser.
Refresh the page if it was already open.

You should see Hello Azure! displayed as the page title instead of the old "Express" text.

Why was there no downtime?

Azure App Service deploys your new code in the background while the old version keeps serving traffic. Once the new deployment is ready, App Service swaps it in instantly.

This means visitors never see a broken page during redeployment.

Still seeing the old title?

Try a hard refresh: Cmd+Shift+R (macOS) or Ctrl+Shift+R (Windows). Your browser may have cached the old page.
Check that you saved routes/index.js before redeploying. Unsaved changes stay on your machine only.
Wait 30 seconds and refresh again. The deployment may still be propagating.

Help me figure out why my updated title is not showing on my Azure URL.

Secret mission

Add a JSON API Endpoint

Your app serves HTML pages, but most modern web apps also expose API endpoints that return raw data. Can you add a JSON status endpoint, test it locally, and ship it to production?

Clean Up Your Resources

This project uses Azure App Service on the Free F1 tier, which incurs no ongoing costs. You can leave your app running indefinitely without being charged.

Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

Azure Resource Group (contains your App Service Plan and App Service).
Azure App Service Plan (Free F1 tier).
Azure App Service (your live web app).
Local myExpressApp project folder.
Azure CLI (installed on your machine).
Node.js (installed on your machine).

Keep everything running

No action needed. Choose this if you are still actively building or want to keep your live Azure URL accessible.

Your app stays live at its .azurewebsites.net URL with no charges on the Free F1 tier.
The Azure CLI and Node.js remain installed and ready for future projects.
Your local myExpressApp folder stays on your Desktop.

Pause - I'll come back to this later

Since the Free F1 tier has no cost, there is nothing to pause. Your app will remain live at no charge.

If you want a completely clean slate later, use the Delete tab to remove everything, then recreate from scratch when you return.
Otherwise, leave everything as-is. The Free tier has no cost implications.

Delete - I don't want to use this again

Remove all project resources and start fresh. Follow each item below to fully clean up.

Delete your Azure Resource Group (this removes the App Service Plan and App Service in one step) by running this command:
Replace the resource group name with the one shown in your terminal output from the original az webapp up command.

az group delete --name [[RESOURCE_GROUP="your-resource-group-name"]] --yes --no-wait

Delete your local project folder by running:

cd ~/Desktop
rmdir /s /q myExpressApp

macOS or Linux users

Use this command instead to remove the folder:

cd ~/Desktop
rm -rf myExpressApp

Uninstall Azure CLI by opening Windows Settings.
Go to Apps, then Installed apps (Windows 11) or Apps & Features (Windows 10).
Search for Azure CLI in the search bar. The program is listed as Microsoft CLI 2.0 for Azure.
Select it and click Uninstall.
Uninstall Node.js the same way. Search for Node.js in the same Installed apps list, select it, and click Uninstall.

That's a Wrap!

Nice work! You just took a Node.js app from your local machine to a live URL on Azure App Service.

You've learned how to:

Build and deploy a Node.js Express application to Azure App Service using a single CLI command.
Provision Azure's core building blocks (Resource Groups, App Service Plans, and App Services) from the command line.
Update and redeploy your app with zero downtime using the Azure CLI.
Secret Mission: Added a custom JSON API endpoint and shipped it to production.

Ready to quiz yourself?