Tutorial: Set Up a Web App on Azure

This tutorial guides you through the process of creating and configuring your first web application hosted on Microsoft Azure.

Prerequisites

An active Azure subscription. If you don't have one, sign up for a free trial.
Basic understanding of web application development.
(Optional) Azure CLI installed on your local machine.

Step 1: Create a Web App Resource

Using the Azure Portal

Sign in to the Azure portal.
In the top search bar, type "App Services" and select it from the list.
Click the + Create button.
On the "Basics" tab:
- Subscription: Select your Azure subscription.
- Resource group: Click "Create new" and give it a name (e.g., myWebAppRG).
- Name: Enter a unique name for your web app (e.g., my-awesome-web-app-123). This will be part of your URL.
- Publish: Select "Code".
- Runtime stack: Choose your preferred language and version (e.g., "Node 18 LTS", ".NET 7", "Python 3.10").
- Operating System: Select "Linux" or "Windows".
- Region: Choose a region closest to your users.
Click Review + create.
Once validation passes, click Create.

Using Azure CLI

Open your terminal or command prompt and run the following commands:

# Log in to Azure
az login

# Create a resource group
az group create --name myWebAppRG --location eastus

# Create the web app
az webapp create --resource-group myWebAppRG --name my-awesome-web-app-cli --runtime "NODE|18-lts" --deployment-local-git

Replace my-awesome-web-app-cli with your desired web app name and adjust the --runtime as needed.

Step 2: Deploy Your Application Code

Once your web app resource is created, you need to deploy your code. Here are common methods:

Local Git Deployment: Deploy directly from a local Git repository.
GitHub Actions: Set up a CI/CD pipeline to automatically deploy on code commits.
FTP/FTPS: Deploy files directly using FTP clients.
Azure DevOps: Integrate with Azure DevOps for robust CI/CD.

For this tutorial, let's assume you're using Local Git Deployment. After creating the web app with --deployment-local-git, you will be provided with a Git URL. You can then clone it and push your code.

For more detailed deployment options, refer to the App Service Deployment Guide.

Step 3: Configure Your Web App

Navigate to your web app in the Azure portal. You can find options for:

Deployment Center: Manage deployment sources and configurations.
Configuration: Set application settings, connection strings, and general settings.
Custom domains: Map your own domain name to the web app.
SSL certificates: Secure your web app with HTTPS.
Scale up (App Service plan): Adjust the performance and capacity of your hosting plan.

Example: Adding an Application Setting

Go to your App Service in the Azure portal.
In the left-hand menu, under "Settings", select Configuration.
Go to the "Application settings" tab.
Click + New application setting.
Enter a Name (e.g., MY_API_KEY) and a Value (e.g., yourSecretKey123).
Click OK and then Save at the top of the Configuration blade.

Step 4: Browse Your Web App

You can find the URL of your web app on its Overview page in the Azure portal. It will look something like https://your-app-name.azurewebsites.net.

Open this URL in your web browser to see your deployed application!

Next Steps

Learn how to monitor your web app's performance.
Explore scaling options to handle increased traffic.
Integrate with other Azure services like Cosmos DB or Azure Functions.