Deploying Files To Azure Web App Through GitHub

Introduction

Deployment is always a hot topic of discussion among developers.

Files can also be deployed to Azure using Visual Studio. In this article, I will be showing you all how to deploy files on Microsoft Public Cloud i.e. Microsoft Azure, using GitHub.

Prerequisites

Microsoft Azure Account: If not, create your free account clicking here.
GitHub Account: If not, create your free account clicking here.

Way to do

Once done with the above mentioned prerequisites, let's start!

Step 1 - Create Azure Web App

Go to Microsoft Azure Portal .
Click on New => Web + Mobile => Web App.

Enter details as mention below,

App Name - Enter a unique name for your Application. This name is unique across Azure.
Subscription
Resource Group - Group of related Azure products/service created in Azure Portal. You can select existing resource group or create new.
App Service Plan / Location - You can select existing App service plan or create new, files will be deployed/hosted at this given Location.

Once done with entering required details, click on Create.

Notification message could be seen once the deployment starts.

And then, finally with Deployment succeeded.

Now, Click => App Services => ' Web app name entered'. Here, we entered as 'deploytoazureusinggithub'.

Once clicked on our Web App, portal will display details with its Overview, as seen in the below image.

Step 2 - Now, we need to link our GitHub account with Web App we created in above step.

To accomplish above task, we need navigate to 'Deployment options' under App Deployment section.

Trick - Enter required action at search box, here in case, enter 'GutHub' and it will open the required option from current blade in portal window,

Select Deployment options => Choose Source (This will list all options available for linking as Source) => GitHub.

Once selecting source as GitHub, next step is to authorize our Web App with GitHub account to be used.

Click => Authorize, as shown in below image.

When clicked on Authorize, it will open a popup window, with GitHub account details asking for permission to get linked.

Verifying GitHub details, Click => Authorize application,

Authorizing will close pop window, and below success message would be displayed in Azure Portal.

Click OK .

Authorization section would display your GitHub username.

As my GitHub account username is KasamShaikh, the same is being displayed at Authorization section as seen in below image.

Now, it's time to select repository or project to be selected as file source. As seen below, all repositories are listed for selection. Here, we will select 'deploytoAzure'.

Selecting, will add selected project and its 'master' as branch under choose branch section.

Refer to the below image.

Click OK.

The below notification will get displayed, stating our set up to be completed successfully. Also, this will deploy files from repository to Azure web app.

Let's Test it!

Here, I have one index.html file added to repository we selected, as seen below.

Browse web app url to view,

Great! by now we created our web app and linked it with GitHub account. The steps also deployed files from repository to Azure Web App account.

Let's do one more round of testing. Modify index.html from deploytoAzure repository, with adding hyperlink, as shown in the below image.

Enter Commit Comments => Commit Changes.

Committing any changes will deploy file to Azure Web App,

Browse Azure Web url to verify changes,

So, changes got reflected.

Also, we can view this commit comment ( highlighted in above image ) and deployed file logs in Azure Portal, under Deployment options.

Summary

In this article, we have gone through how seamlessly we can deploy files using GitHub as the source. Also, having deployment logs with no extra settings or coding, makes tracking in place effortless.

I would recommend you try this out once. Let me know in case of any queries or concerns with respect to the same. Thank You!