Creating a Web App using Azure CLI

A simple web application requires a fine balance between functionality, performance, security, and user experience. By adhering to best practices, users can ensure their applications are reliable, scalable, and maintainable. These steps guide new Azure CLI users and are practices every new web developer should follow.

Before we begin, let’s ensure the following are available for practice.

1. Have you made sure that you have installed the Azure CLI on your desktop device?

2. Make sure you have a GitHub account.

Welcome to the world of Web apps using Azure CLI.

Table of Contents.

1. Accessing your Azure Account.

2. Creating your Resource Group.

3. Creating your App Service Plan.

4. Creating your Web Application.

5. Create an index file in GitBash and push to GitHub.

6. Configure the deployment source of your Web Application.

7. Create a Deployment Slot.

8. Conclusion.

Accessing your Azure Account.

Step 1: Open the PowerShell terminal on your desktop to begin, and log in to your Azure account by typing the command az loginand press the Enter button on your pc as shown below. You will be redirected to a web browser to sign in to your Azure account, select your account, and click on continue.

The command az loginbelow will direct you to select your subscription tenant from your Azure account as shown below, so as to log in to your Azure CLI.

Creating your Resource Group.

Step 2: The creation of a resource group will accommodate your Web App and your App Service Plan. By so doing, we input this command: az group create --name⁣(Name your resource)⁣ --location(input the location you want your resource to be), press Enter, and the output is as shown below: display succeeded.

Creating your App Service Plan.

Step 3: By creating your App service plan, you can think of it as an operating system that hosts your web application. It provides the infrastructure and resources needed to run and scale your apps. Now, input the command: az appservice plan create --name <name your plan> --resource-group <name of your resource group>, press Enter, and the output is captured below.

Creating your Web Application.

Step 4: Once the App service plan has been created successfully, the next command to input is to create our web application itself. Next is to input the command az webapp create --name <name your web app> —-resource-group <resource group name> --plan <name of your plan>, as captured below.

Create an index file in GitBash and push to GitHub.

Step 5: Creating an index file in GitBash to push to GitHub is as follows:

1. Configure Your Local Environment: To configure your environment, that is, to ensure you are logged into your GitHub account. Input the command git config --global user.name <username> and press Enter. Next, input git config --global user.email < ⁣your email> and press enter as shown below.

2. Create Your Folder/Directory: To create your directory, input the commandmkdir, which means “make a directory.” "mkdir MGJ-Universal," and thereafter input the command "cd (your directory)" and press enter to open your directory.

   

   Input the command "git init" and press Enter. The command initializes a new Git repository in the current working directory. Just like a subdirectory named "git"

   

3. Create Your File And Input Your Code: To create a new empty Text file named index.html, input the command "touch index.html" and press Enter.

   Now, input the code into an empty file with the command “vim index.html” and press Enter, as shown below.

   

   Kindly note, a blank space will appear; type on the letter "i," which means "insert," on your keyboard to edit the file. Right-click and click on paste to input your generated code. To continue with your commands, press the esc button on your keyboard. To close the index.html file, type (:wq) and press Enter.

   

   To view the generated code, type “cat index.html” and press Enter to see as shown.

   

4. Create and clone a repository from GitHub: To create a new repository, log in to your GitHub account, and in the upper-left corner of your page, click on the + sign and select "New repository."

   

   Give your repo a name, ensure it’s public, and tick the "Add a ReadMe file" box. On your repository page, click on "Code,” and ensure the link you are to copy is HTTPS. Copy the link by clicking on the copy icon, and go back to your git bash and paste as copied.

   

   Now that we've created our repo and copied the HTTPS URL, let's go back to our GitBash to continue.

5. Push code to GitHub: To add a remote repository named "origin" with a specified link to your Git repository, you can use the "git remote add origin" command followed by the remote name ("origin") and the URL of the remote repository.

   git remote add origin <remote_repository_url> press Enter, and see the output as below.

   

   To add the file input"git add index.html", press enter, and to check if the file has been added, type "git status", From the information provided, we can see that the new file has been added and can be tracked.

   

   

   To create a new commit in your Git repository with a commit message, input the command “git commit -m <the message>” and press Enter.

   

   Thereafter, input the command “git push origin master”and press Enter. Kindly note that this command pushes the commits from your local "master" branch to the remote repository specified by the remote name "origin.”

   

   Thereafter, it will show on your GitHub account that the master had recent pushes minutes ago; click on compare and pull request.

   

   This will direct you to your Git manager credentials for authorization, and click git-ecosystem as shown below.

   

   After executing the push command, Git will upload your local commits to the GitHub repository in your master branch as shown in the generated command.

   

   Now we have created an index file in GitBash and pushed the generated code to our GitHub account, We will copy the URL of our repository and go to our GitHub account, navigate to the right on your Web App repository page, and right-click on the green Code button. Copy the HTTPS link as shown below.

   

   Configure the deployment source of your Web Application.

   Step 6: Now that we've successfully copied your Web App Repository URL, Configure the deployment source of our web app and input az webapp deployment source config --name <name of your web app> --resource-group <name of your resource group> --repo-url <the HTTPS URL of the web app repo that contains your index file> --branch master --manual-integration press Enter, as shown below, deployment was successful.

   

   i. Now, to view our Web App, navigate to App Services on the Azure portal; you will find your Web App. Click on your App to see the overview

   

   ii. Click on the app service you created and the default domain link to view your domain.

   

   iii. Now you will see your default domain reflecting your html.index file as shown below.

   

   iv. To view our Deployment, click on the "Deployment Center." From the image capture below, we can see our source as Git, and we can also see the link to our repository and the branch of our file.

   

   v. We can also view your commit message on the Logs as shown below.

   

   Create a Deployment Slot.

   Step 7: A deployment slot is like a separate version of your web App that you can use to test and make changes before deploying them to your production environment.

   For instance, you have a website that is already up and running, and you want to make some updates/upgrades (add new features). Instead of making those changes directly to your live website, which could potentially cause malfunction or web downtime for users, you can create a deployment slot. This helps for the seamless operation of the web app.

   Now, to create a deployment slot, go to your Web App page and scroll down to the left. Click on the deployment slot, on the deployment slot page, it will require an upgrade as shown below, because of the additional features we are trying to achieve. Since we are on a free-tier account, we are using.

   

   i. It will take you to select App Service Pricing Plan, and we will click on the first part for the premium because we need a low price due to this training, and click select to continue.

   

   ii. Note, the upgrade pricing plan pops up; click on the upgrade button to continue, as shown below

   

   iii. We have been able to upgrade this part so as to activate our deployment slot, click on +add in the top middle of the page, and click add slot as shown below.

   

   iv. Give your slot a name and click on the "Add" button.

   

   v. We can see that our web app is in the production state, running, with 100% traffic. The new named update is not in production but is ready for additional features as it is running with 0% traffic.

   

   vi. You can see the slot has its environment where you can make updates to the website App without disrupting the production/live environment.

   

   vii. In a real-life scenario, after testing the new update to the web App and the new update was well received with updates running as shown, we can go ahead and click on the Swap button to add the traffic back to production on the next capture.

   

   

   viii. Once the swap page opens, click on the swap button to swap.

   

   ix. Now we have it; our web App has been updated without tampering with the production environment after refreshing, as shown below.

   

   Conclusion.

   Now that we have created a web app using Azure CLI, this involves a few key steps: logging into the Azure portal, creating a resource group, creating an app service plan, and finally creating the web app itself. These steps can be easily executed through the command line, providing a streamlined approach to managing your web application infrastructure. Furthermore, the use of The Azure Command-Line Interface (CLI) is a cross-platform command-line tool to connect to Azure and execute administrative commands on Azure resources. It allows the execution of commands through a terminal using interactive command-line prompts or a script.