Deploy a Web App to Azure: The Basics

Step 1: Create an Azure App Service Instance

The first step is to create a new App Service in the Azure portal. This service will host your web application.

1. Log in to the Azure portal.
2. Click Create a resource.
3. Search for "Web App" and select it.
4. Click Create.
5. Fill in the required details:
   • Subscription: Select your Azure subscription.
   • Resource Group: Create a new one (e.g., my-webapp-rg) or select an existing one.
   • Name: Choose a unique name for your web app (e.g., my-unique-app-name). This will be part of your default URL.
   • Publish: Select Code.
   • Runtime stack: Choose your preferred runtime (e.g., Node 18 LTS, .NET 7, Python 3.10).
   • Operating System: Select Linux or Windows.
   • Region: Choose a region close to your users.
   • App Service Plan: Create a new one or select an existing one. For basic testing, the F1 (Free) tier is sufficient.
6. Click Review + create, then Create.

Step 2: Prepare Your Web Application

For this basic tutorial, we'll assume you have a simple web application. If you don't, you can create a minimal one. For example, a simple Node.js Express app:

Create a file named index.js with the following content:

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 at http://localhost:${port}`);
});
                

Create a package.json file:

{
  "name": "my-azure-app",
  "version": "1.0.0",
  "description": "A simple Azure App Service demo",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}
                

Install dependencies:

npm install
                

Step 3: Deploy Your Code

Azure App Service supports various deployment methods. We'll use the built-in deployment center for simplicity.

1. Navigate to your newly created App Service in the Azure portal.
2. In the left-hand menu, under Deployment, click Deployment Center.
3. Under the Source tab, choose your source control. For this example, let's select Local Git.
4. Click Connect.
5. Follow the instructions to set up a Git deployment user (if you haven't already).
6. You will get a Git remote URL. Add this as a remote to your local Git repository:

   
   git remote add azure <Your-Git-Remote-URL>
                           

7. Push your code to the Azure remote:

   
   git push azure main
                           

   (Replace main with your branch name if it's different.)

The Deployment Center will show the build and deployment process. Once complete, your application should be live.

Step 4: Access Your Web App

Once deployment is successful, you can access your web app via its default URL.

1. Go to your App Service overview page in the Azure portal.
2. Find the URL in the Essentials section at the top. It will look something like: https://my-unique-app-name.azurewebsites.net.
3. Click on the URL to open your web application in a new browser tab.