A Simplified Step-by-Step Tutorial: Creating Your First Basic Azure Web App

11 min readDec 24, 2023

Introduction

This practical guide is designed to walk you through the process of creating your first basic web application using Azure App Services. Azure, a comprehensive cloud platform offered by Microsoft, provides a multitude of services for building, deploying, and managing applications. This tutorial is aimed at beginners, focusing on simplicity. We will cover the foundational steps required to set up a basic web application, ensuring that even those with minimal technical background can follow along with the concepts and steps.

Setting Up Your Azure Account

Setting up your Azure account is the first and crucial step towards deploying your web application. Microsoft Azure offers a broad range of cloud services, including those for computing, analytics, storage, and networking. By creating an Azure account, you gain access to these services, which will enable you to develop, deploy, and manage applications through Microsoft’s global network of data centers.

Creating an Azure Account

Before you begin, you need to set up an Azure account. Here’s how you can do it:

Visit the Azure Website: Start by navigating to the Azure website. Here, you’ll find an abundance of resources and information about Azure services.
Sign Up for an Account: You’ll see an option to sign up for a free account. Azure provides a free trial with substantial credits that you can use to explore a wide range of Azure services. This is an excellent opportunity for learning and experimenting without any initial investment.
Provide Your Details: During the sign-up process, you will be asked to provide personal information, including your name, phone number, and credit card details. Note that the credit card is for verification purposes, and you won’t be charged unless you upgrade to a paid account.
Understand the Free Tier Limitations: Azure’s free tier comes with specific limitations. It’s essential to understand these limitations to ensure that you stay within the free usage quotas. Azure provides detailed documentation on what services are included in the free tier and the limits applicable to each service.
Complete the Verification Process: Microsoft will perform a verification check, often including a small transaction on your credit card (which should be refunded). This process helps prevent fraud and ensures the security of the platform.
Explore the Azure Portal: Once your account is set up and verified, take some time to explore the Azure Portal. This web-based interface is where you’ll manage all your Azure services and resources. Familiarize yourself with its layout, features, and where to find various services and settings.

Navigating the Azure Portal

The Azure Portal is a central place where you can manage all your Azure services. Here’s a guide to help you navigate it effectively:

Dashboard Customization: The Azure Portal allows you to customize your dashboard. You can add, remove, and rearrange tiles to suit your preferences and workflow. This customization can enhance your productivity by ensuring that the information you need is readily accessible.
Resource Management: On the portal, you can create, configure, and monitor all Azure resources. This includes virtual machines, databases, and, of course, your web applications. The portal provides a unified view of all your resources, making it easy to track their status and usage.
Billing and Subscription Information: It’s crucial to keep an eye on your usage and billing to avoid unexpected charges, especially if you are using a free account with limited credits. The Azure Portal provides detailed billing and subscription information, allowing you to monitor your spending and usage patterns.
Access to Tools and Extensions: Azure Portal offers various tools and extensions, like Cloud Shell, Azure Advisor, and Azure Marketplace. These tools can significantly enhance your experience and productivity on the platform.
Learning Resources: Azure has a robust learning ecosystem. The portal provides access to documentation, tutorials, and quickstarts. These resources are invaluable, especially for beginners, as they provide step-by-step guides and best practices.
Support and Help: If you encounter any issues or have questions, the Azure Portal provides easy access to support forums, FAQs, and the ability to raise support tickets.

By following these steps and familiarizing yourself with the Azure Portal, you set a strong foundation for your journey in cloud computing and web application development. With your account and understanding of the portal in place, you’re now ready to move on to the next steps of creating and deploying your web application.

Creating a Web App Service

In Azure, creating a web app service is a critical step in establishing your online presence. Azure App Service is a powerful and versatile platform that supports a variety of programming languages and frameworks, making it an ideal choice for hosting web applications. Below is a detailed guide on how to create a web app service in Azure, ensuring no step is overlooked.

Choosing the Right Service

Azure App Services offers different plans, each tailored to meet various needs and budgets. For those new to Azure or working on small-scale projects, the Free and Shared plans are often adequate. These plans are cost-effective yet offer enough resources for basic applications. As your application requirements grow, you can seamlessly upgrade to more powerful plans like Basic, Standard, Premium, or Isolated.

Consider the following when choosing a plan:

Compute Resources: CPU, memory, and storage capabilities.
Scaling Options: Ability to scale up or out as per demand.
Custom Domain Support: Essential for branding and professional presence.
Backup and Restore Features: For data safety and application continuity.
SLA (Service Level Agreement): The uptime and reliability guarantees provided by Azure.

Creating a New Web App

Creating a new web app involves several steps, each critical for the successful deployment of your application.

Login to Azure Portal: Access your Azure account by logging into the Azure Portal.
Navigate to App Services: In the Azure Portal, locate and select “App Services” from the menu. This is your hub for creating and managing web applications.
Start the Web App Creation Process: Click on “Add,” “Create a resource,” or the “+” icon, and then select “Web App” from the available options. This action initiates the web app creation process.
Fill in the App Details: You’ll be prompted to provide specific details for your web app:

App Name: Choose a unique name, which will form part of your app’s URL.
Subscription: Select the Azure subscription under which the app will be created.
Resource Group: Either select an existing resource group or create a new one. Resource groups are a way to organize Azure resources into logical groups for easy management.
Publish: Choose how you intend to publish your app. Options typically include “Code” for applications written in supported languages and “Docker Container” for Docker-based deployments.
Runtime Stack: Pick the programming language or framework your app is based on, such as .NET, Java, Node.js, Python, or PHP.
Operating System: Choose between Windows, Linux, or Docker, depending on your app’s requirements and your comfort level.
Region: Select the data center region where your app will be hosted. Ideally, this should be close to your user base to minimize latency.
App Service Plan: Choose a service plan. You can either create a new plan or use an existing one. This determines the pricing tier and capabilities of your web app, such as compute resources, storage, and custom domain support.

Review and Create: After filling in all the necessary information, review your settings. Ensure that all the details are correct and aligned with your needs.
Deployment: Click “Create” to deploy your web app. Azure will then set up your web app based on the specified configurations. This process might take a few minutes.

Once your web app is deployed, it’s accessible via a unique URL provided by Azure. You can now move on to deploying your actual web application code to this newly created web app. Remember, Azure’s flexibility allows you to adjust the service plan and settings as your application evolves, ensuring that your web app can scale and adapt to changing requirements.

Deploying Your First Application

Deploying your application to Azure Web App Service is a critical step in making your web application accessible to users. This process involves uploading your application code to the Azure platform, where it is hosted and managed. Here’s a detailed guide on how to deploy your first application on Azure.

Preparing Your Application

Before you deploy your application, ensure it is ready for deployment. This preparation typically involves:

Developing Your Application: Create a simple web application using HTML, CSS, and JavaScript, or any other technology stack supported by Azure. Make sure your application runs locally without any issues.
Version Control: It’s a good practice to use version control systems like Git. This not only helps in keeping track of changes but also simplifies the process of deploying your application to Azure.
Building Your Application: If your application requires a build process (like applications created with React, Angular, or Vue), make sure to build your project. This process compiles your code into a format that’s ready for deployment.

Deploying the Application

Azure provides several methods for deploying your application. The most common methods are through FTP, Azure Repos, GitHub, and local Git. Here, we will focus on two widely used methods: FTP and GitHub.

Deploying via FTP

FTP (File Transfer Protocol) is a straightforward method to upload files to your Azure web app:

Obtain FTP Credentials: In your Azure Web App’s dashboard, navigate to “Deployment Center.” Here, you can set up an FTP deployment and obtain the FTP endpoint and credentials.
Upload Files Using an FTP Client: Use an FTP client (like FileZilla) to connect to the provided FTP endpoint using the credentials. Upload your application files (HTML, CSS, JavaScript, etc.) to the appropriate directory (usually /site/wwwroot).
Verify Deployment: Once the upload is complete, navigate to your web app’s URL to check if the application is running correctly.

Deploying via GitHub

For a more automated approach, you can use GitHub:

Connect to GitHub: In the Azure Web App’s “Deployment Center,” select GitHub as the source. You will need to authorize Azure to access your GitHub account.
Configure the Repository and Branch: Choose the repository where your application code is stored and select the branch you want to deploy.
Enable Continuous Deployment: By setting up continuous deployment, Azure will automatically deploy the latest version of your application every time you push changes to the selected branch.
Push Your Code: Commit and push your application code to the selected branch in your GitHub repository. Azure will detect the changes and start the deployment process.
Verify Deployment: Check your web app’s URL to ensure the application is live and running as expected.

Deploying your application is just the beginning. Once your app is live, you’ll need to monitor its performance, manage resources, and possibly scale it to accommodate user demand. Azure offers a range of tools and services to help with these tasks, ensuring that your web application remains efficient, responsive, and secure.

Monitoring and Managing Your Web App

After deploying your application on Azure, the next crucial steps are monitoring its performance and managing its resources effectively. Azure provides a suite of tools to help you monitor the health and performance of your web app, as well as manage various aspects such as scaling, updates, and configuration.

Monitoring Your Web App

Effective monitoring is key to maintaining the health and performance of your application. Azure offers several tools for monitoring:

Azure Monitor: This service provides comprehensive monitoring capabilities across all Azure services. It collects and analyzes telemetry data from your Azure infrastructure and applications. With Azure Monitor, you can track performance metrics, diagnose issues, and ensure your web app is running smoothly.
Application Insights: A feature of Azure Monitor, Application Insights, offers deeper insights into your application’s operations. It helps you understand how your app is performing and how users are interacting with it. You can track custom events, measure performance, and detect anomalies.
Log Analytics: Use Log Analytics for collecting and querying data from different sources across your Azure infrastructure. It’s particularly useful for identifying trends, diagnosing issues, and getting an in-depth understanding of how your application behaves over time.
Alerts: Set up alerts in Azure to get notified about critical conditions within your application or infrastructure. You can configure alerts based on metrics, logs, or other criteria to proactively manage issues.

Managing Your Web App

Managing your Azure web app involves various tasks, from scaling resources to updating application settings:

Scaling: Azure App Service allows you to scale your application either vertically (upgrading to a higher plan for more CPU, memory) or horizontally (adding more instances). You can configure auto-scale settings to automatically adjust resources based on traffic.
Configuration and Settings: In the Azure portal, you can manage various settings for your web app. This includes configuring custom domains, SSL certificates, connection strings, and environment variables.
Updates and Maintenance: Regularly update your application with new features, security patches, and performance improvements. Azure provides continuous integration and continuous deployment (CI/CD) capabilities, making it easier to deploy updates.
Backup and Restore: Set up regular backups for your web app to protect against data loss. Azure allows you to configure backup schedules and restore your app to a previous state if needed.
Access Control and Security: Manage access to your web app using Azure role-based access control (RBAC). Also, ensure that your application complies with security best practices, like using HTTPS, implementing proper authentication, and regularly reviewing security reports and recommendations in Azure.

Understanding and Managing Azure Billing

It is essential to have a clear understanding of Azure’s pricing model, especially when you’re using the platform for learning purposes or running small-scale projects. Azure charges based on resource usage, and costs can accumulate if services are left running unnecessarily.

Be aware of the specific details of the pricing tier you have chosen for your web app. Each tier comes with its own set of features and limitations, and it’s crucial to select one that aligns with your budget and requirements. Azure offers a pricing calculator on their website to estimate the costs associated with various services and configurations.

To avoid unexpected charges, it’s important to actively manage your resources:

Shutting Down Unused Services: If you are using Azure for learning or experimentation, remember to shut down or delete your services once you are done. This is crucial in avoiding ongoing charges for resources that are no longer in use.
Regularly Reviewing Your Billing Statement: Azure provides detailed billing statements that allow you to track your spending. Regularly review these statements to understand your usage patterns and adjust your resources accordingly.
Setting Budget Alerts: Azure allows you to set up budget alerts to notify you when your spending reaches a certain threshold. This can help you stay on top of your expenditures and take action if needed.

By effectively monitoring and managing your web app, you can ensure optimal performance, address issues promptly, and provide a seamless experience for your users. Azure’s robust set of tools makes it easier to keep your web app healthy and efficient, giving you more time to focus on improving your application’s features and user experience.

Conclusion

Throughout this guide, we’ve covered the essentials of creating, deploying, and managing a basic web app using Azure App Services. From setting up an Azure account and choosing the right service plan, to deploying your app and understanding Azure’s monitoring and billing systems, I’ve laid out a path for beginners in cloud computing. Azure’s flexibility and extensive features offer a powerful platform for both learning and development. As you continue to explore and experiment with Azure, you’ll find it an invaluable resource in your journey into web application development and cloud services. Keep learning, stay engaged, and enjoy the process of building and managing your applications in the cloud.