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.
Navigate to properties of the web app and under development tools section select advanced tools option.
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:
mywebapp-asia is the name of your web app, following screen snap shows 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.
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.
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.
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.
Products from Amazon.com
- Price: Check on Amazon