How to make changes to pages and files on Web Apps form ARM Portal

Santosh Gaikwad

Santosh Gaikwad

Connect on LinkedIn      Follow SCI Page

Write to admin@sharecareinspire.com
Santosh Gaikwad

Latest posts by Santosh Gaikwad (see all)

How to make changes to files in web app from portal

While doing development I came across a scenario, where I wanted to change the content of static page of a web app which is hosted in Azure. I did not want to use a visual studio and wanted a quick and easy way to make changes directly on the Azure Portal itself.

I believe this would be a common requirement among all developers, while debugging your Azure Web App deployments it is sometimes useful to view the files that are deployed to the service. There are many scenarios. E.g. update database connection strings or possibly determining which files actually got deployed and where they sit in the file system, or maybe you need to check if all your dependencies have been installed.

So how to view files if you are using a Platform as a Service (PaaS) solution such as Web Apps? Web app doesn’t allow you to remote into VM in the traditional sense and instead abstracts all that complexity for you.

Azure provides best way to manage these issues, using a tool called Kudu. It provides console gives you both command line and file browser access to your sites.

I have created a web app https://mywebapp-asia.azurewebsites.net, and following is the default page of the web app, I want to have my own default page. To make the changes lets follow steps as given below.

Step 1: Create a Web App

Create new azure web app either from ARM portal or PowerShell, following is the default page of a newly created web app. now i want to create another web page and set that as a default page.

Default Web App page
Default Web App page

 

Navigate to properties of the web app and under development tools section select advanced tools option.

Advanced Tools for Web App
Advanced Tools for Web App

As you click on go button, which appears on the rights of the screen,  page will be navigated to Kudu management console.

What is KUDU and how I can access It?

The idea behind a PaaS offering is that you do not have to worry about the operating system or infrastructure or just stuff in general that does not give you actual business benefit.

However, sometimes you do need to access the actual environment you are running code on, usually those are the moments you are either developing a new solution or you need to troubleshoot something that went wrong. KUDU service is developed as a way to access a Microsoft Azure Web Apps environment, which includes Azure Functions.

With KUDU you can get access to log files, environment information/variables and also the actual file system on the runner instance that was assigned to your Azure web app.

Accessing your KUDU console is easily done via the following URL: https://mywebapp-asia.scm.azurewebsites.net where  mywebapp-asia is the name of your web app, following screen snap shows Kudu console.

Kudu Console
Kudu Console

 

Step: 2 Select CMD option from Debug console menu.

As you select CMD from debug console menu, you will be presented with file explorer and a windows command console right within web browser. File explorer and command console are always in sync i.e. if you execute a command on console same will be immediately reflated in file explorer too.

Kudu Command Console
Kudu Command Console

Step 3: Navigate to /sites/wwwroot

If you notice, azure separates data drive disk from operating disk drive, hence your web app contents are deployed to D drive by default and stored in D:\home\sites

All the web pages and files are stored in wwwroot folder of the web app, be default azure creates hostingstart.html file in azure web app and sets it as a default page.

Step 4: Upload files

Now it’s time to upload desired default page to the web app folder. Just drag files from windows explorer and drop it on the page (file explores), files will be automatically uploaded to web app.

For this article I have created a index.html file and used asia-map.jpg file in the page to display the region in which web app is hosted.

Upload files to Kudu Console
Upload files to Kudu Console

If you want to set a default page to the web app then make sure you follow the naming convention as shown in following screen snap. Default pages/documents are configured in the applications settings option in settings blade of web app.

Web App Default Page sequence
Web App Default Page sequence

Step 5: Verify if default page is changed

Now it’s time to test if new default page is considered for processing. Navigate to the web app URL https://mywebapp-asia.azurewebsites.net

Now default page is changed as per the uploaded files.

Default page of Web app changed
Default page of Web app changed

 


Check Articles From Categories      Health and Parenting      Inspiring Stories      Technology      Microsoft Azure      SharePoint O365

Leave a Reply

Your email address will not be published. Required fields are marked *