Building a Web App with Azure CLI: A Step-by-Step Guide

Hey everyone, welcome back!

Today, we’re diving into the world of Azure CLI to build and deploy a web app like a pro! If you’ve ever wondered how to get your project from your local machine to the cloud this guide has got you covered. No complicated UI, no clicking around just pure command-line magic! ✨

So grab your terminal, and let’s turn some code into a live web app in just a few steps! 🔥

🛠 Prerequisites Let’s Get Set Up! 🚀

Before we jump in, here are a few things you’ll need:

✅ Install Azure CLI on your desktop 🔧
✅ Create a Web Application Repository on GitHub 📂
✅ Set up a directory to house your files (Need help? Check out my blog on how I created an index file in Git Bash and pushed it to GitHub!) 📝

Alright, now that we’re all set let’s dive in and get started! 🎯🔥

STEP 1: 🔑 Logging Into Your Azure Account 🌍💻

Time to get into Azure mode let’s log in! 🚀

1: Open your PowerShell terminal on your desktop. 🖥️
2: Type az login and hit Enter ⌨️

3: A web browser will pop up sign in to your Azure account. 🌐
4: Select your account and log in. ✅

5: Once you see the success message, close the browser and head back to your terminal. 🔄
6: Boom! 🎉 You’re now logged into Azure and ready to roll! 🚀🔥

STEP 2: 🏗️ Creating Your Resource Group 🌍💡

Now, let’s set up your Resource Group—this will house your Web App and App Service Plan! 🚀

1: Time to create your resource group! 🏠
2: Type the command below, replacing the placeholders:

az group create --name <your-resource-name> --location <your-location>

3: Pro tip leave a space after each word to avoid errors. 😉
4: Hit Enter, and just like that you've got yourself a Resource Group! 🎉🔥

STEP 3: ⚙️ Creating Your App Service Plan 🏗️

Now, let’s set up your App Service Plan think of it as the engine that powers your Web App! ⚡ It provides the infrastructure and resources needed to keep your app running smoothly.

1: Time to create your App Service Plan! 🔥
2: Type the command below, replacing the placeholders:

az appservice plan create --name <your-plan-name> --resource-group <your-resource-group-name>

3: Hit Enter and let Azure do its magic! 🎩✨
4: Boom! 🎉 Your App Service Plan is ready to go! 💻

STEP 4: 🌐 Creating Your Web Application 🎨

Awesome! 🎉 Now that your App Service Plan is set up, it’s time to bring your Web Application to life! 🌟

1: Get ready to create your Web App! 🏗️
2: Type the command below, replacing the placeholders:

az webapp create --name <your-webapp-name> --resource-group <your-resource-group-name> --plan <your-plan-name>

3: Hit Enter and watch your Web App take shape! 🏗️💡
4: Awesome! 🎉 Your Web App is officially live on Azure! 🌍

STEP 5: 💻Copy the HTTPS URL of Your Web App Repository in GitHub 🌍

Before we dive in, make sure you've created a repository and an index file for your Web App. Need help? Check out my blog on Creating and Pushing an Index File to GitHub Using Git Bash!

1: Head over to your GitHub account 🏠
2: Navigate to your Web App repository page 📂
3: Look to the right and find the green "Code" button 🟩
4: Right-click on it and copy the HTTPS link 🔗✨

Congratulations! 🎉 You’ve got your repo link! Now, let’s keep going! 🏗️🔥

STEP 6: ⚙️ Configure The Deployment Source of Your Web Application 🚀

Now that we’ve successfully copied your Web App Repository URL, it’s time to configure the deployment source for your web app. Let’s get it done! 🎯

1: Open your terminal and input the command below, then hit Enter ⌨️

az webapp deployment source config --name <name of your web app> --resource-group <name of your resource group> --repo-url <the HTTPS URL of your web app repo that contains your index file> --branch master --manual-integration

2: Once the command runs successfully, you'll see a confirmation message 📜✅

3: Now, head over to the Azure portal and navigate to App Services 🌐

4: Click on your Web App and check out the Overview section 👀

5: Click on the default domain link viola! Your index.html file is now live! 🎉

6: To view your deployment details, go to the Deployment Center 🏗️

7: Here, you'll see your source as Git, your repo link, and the branch where your file is stored 🔗✨

8: Want to check your commit message? Head over to the Logs section 📜

And that’s it! 🎯 You’ve successfully deployed your Web App using Azure CLI! 🔥💻

Creating a Deployment Slot in Azure

A deployment slot is like a testing ground for your web app! 🛠️ Instead of making changes directly to your live website (which could lead to unexpected issues 😬), you can create a separate slot to test updates before pushing them to production. 🔄

Here’s how you can create and use a Deployment Slot in Azure:

Step 1: Head over to your Web App page on the Azure portal and scroll down to the left panel. Click on Deployment Slots 📂

Step 2: You’ll see your Web App running in the Production state, with 100% traffic flowing to it. 🌍📊

Step 3: To create a new slot, click on + Add Slot at the top-middle of the page ➕

Step 4: Give your new slot a unique name and click Add. ✏️✅

Step 5: Set the percentage of traffic you want to direct to this slot, then hit Save 🎯

Step 6: Click on the newly created slot to get an overview of your deployment environment 👀

Step 7: Your slot is now a separate environment where you can test updates without affecting the live version of your app 🚀

Step 8: Once you’ve tested your updates and everything looks good, it’s time to deploy them to production!

Step 9: Click on the Swap button 🔄 to switch the tested version with the production version.

Step 10: A swap page will open click Swap again to finalize the update. 🎯

🎉 At last! Your web app has been updated successfully without any downtime! Now your users can enjoy the latest version of your app seamlessly! 🔥

Thanks for reading! I hope you found this helpful. 😊