Azure Documentation

Learn how to build, manage, and deploy your applications on Microsoft Azure.

Tutorial: Deploy a Web Application to Azure App Service

This tutorial will guide you through the process of deploying a simple web application to Azure App Service using Visual Studio Code.

Prerequisites

Step 1: Prepare Your Web Application

Ensure your web application is configured to run correctly locally. For a Node.js app, this typically involves:

  1. Installing dependencies: npm install
  2. Starting the application: npm start (ensure it listens on the port specified by the PORT environment variable, which Azure will provide).

If you don't have an app, you can create a simple Express app:

// app.js
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.send('Hello from Azure App Service!');
});

app.listen(port, () => {
  console.log(`App listening on port ${port}`);
});

And in your package.json:


{
  "name": "my-azure-app",
  "version": "1.0.0",
  "description": "A simple web app for Azure",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

Step 2: Sign in to Azure in VS Code

1

Sign In

Open Visual Studio Code. Click on the Azure icon in the Activity Bar on the side of the editor. If you are not signed in, you will see a prompt to sign in. Click "Sign in to Azure" and follow the instructions.

Step 3: Deploy to App Service

2

Select Your Subscription and Create App Service

Once signed in, under the "App Service" section, click the "+" button to create a new App Service.

Follow the prompts:

  • Select your Azure Subscription.
  • Choose "Create new App Service".
  • Enter a globally unique name for your web app (e.g., my-awesome-web-app-unique-name). This name will be part of your app's URL (my-awesome-web-app-unique-name.azurewebsites.net).
  • Select a runtime stack (e.g., Node 18 LTS).
  • Choose an operating system (e.g., Linux).
  • Select a region close to you or your users.
  • Choose a pricing plan (e.g., Free F1 for testing, or a Basic/Standard plan for production).
3

Deploy Your Code

After the App Service is created, navigate to your project folder in VS Code.

In the Azure extension, under the "App Service" section, find your newly created App Service. Right-click on it and select "Deploy to Web App...".

VS Code will prompt you to select the folder containing your web application. Choose your project folder.

4

Monitor Deployment

VS Code will open an output window showing the deployment progress. You'll see commands being executed, files being uploaded, and the build process if applicable.

Once the deployment is complete, you'll see a success message and a link to your deployed web app.

Step 4: Verify Your Deployment

Click on the URL provided in the deployment output (it will be in the format https://your-app-name.azurewebsites.net). Your web application should now be live on Azure!

Important Note: Port Binding

Azure App Service dynamically assigns a port to your application. You must ensure your application listens on the port specified by the process.env.PORT environment variable. The example Node.js code above handles this correctly.

Next Steps