Understanding the Azure App Service Editor

This article is also available on the Microsoft TechNet Wiki.

Azure App Service Editor is a new tool in Microsoft Azure. It is now available in preview in the Azure Portal.

The App Service Editor was formerly known as Visual Studio Online (Monaco). The tool provides a web-based editor for Azure Web Apps (previously Azure Web Sites). This allows you to make quick edits to your sites without having to open an IDE.

This article looks back on how to edit a web app with older technology (Kudu) and how to use the preview version of App Service Editor to make edits to your sites.

Kudu

Prior to the App Service Editor, the main way to view and edit deployed files was to use Kudu. Kudu is a set of tools for Azure App Service. It is also  the engine behind Git deployments in App Service. You can do other things with Kudu including viewing environment variables or the Kudu diagnostic dump, running processes, accessing a cmd console. It also provides a method for creating extensions.

There are two ways to view the Kudu service:

1. Every site has an associated ‘scm’ (Service Control Manager) service to run Kudu and the Site Extensions.

If your website has the URL http://mysite.azurewebsites.net/, then the root URL of the Kudu service is https://mysite.scm.azurewebsites.net/. Note the added scm token. This pattern also works with custom host names.

2. Within the Azure Portal, navigate to your web app. Scroll down to the Development Tools section on the left-hand navigation properties and click Advanced Tools. Within the Advanced Tools blade, click Go. A new browser tab appears with the Kudu Services dashboard displaying some basic app information.

AppServiceEditor01

Once you are in the Kudu Services dashboard, you can view, add, edit and delete web app files. To view the current files of your web app, click Debug console > CMD.

AppServiceEditor02

You will see the folder structure of your web app. To see your files, click site > wwwroot. This folder shows the deployed web app files. You can also see your current path in the page’s console window.

Use the icons to the left of the file to download, edit, or remove it. To add a file, drag it from your system onto the Kudu Services dashboard.

AppServiceEditor03

App Service Editor

An easier way to edit files now exists with the App Service Editor (Preview). As stated above, this is a web-based editor for modifying files already deployed to Azure Web Apps. You can see all the files on your site quickly through the file explorer.

Just as with Kudu, there are two ways to launch the App Service Editor. From the browser, if the Kudu URL is   https://mysite.scm.azurewebsites.net, you can add a /dev token. The root URL comes https://mysite.scm.azurewebsites.net/dev.

To launch the App Service Editor from the portal, scroll down to the Development Tools section on the left-hand navigation properties and click App Service Editor (Preview). Within the App Service Editor (Preview) blade, click Go.

AppServiceEditor04

A new browser tab appears with a web-based IDE opened to the WWWROOT folder of your app. At first glance, it looks like Visual Studio Code running in the browser, but it is the Monaco editor.

AppServiceEditor05

Editing a file is as simple as opening it and making the edits. App Service Editor (for better or worse) auto-saves your changes as you work and publishes them automatically. Everything you do is happening live on the site.This model is good for simple edits, but if you need to make changes to multiple files at once then publishing via Visual Studio or Git-based deployment is a better solution.

AppServiceEditor06

AppServiceEditor07

Video

The video below shows both Kudu and Azure App Service Editor in action:

To see the same video in larger format, view it on YouTube.

Conclusion

This article has shown you how the editing of files on Azure App Service has evolved from using Kudu exclusively to now having a choice between two tools. Give App Service Editor a try with your sites to see how easy it is to edit files.

See Also

References

More zombie process destroying scripts

Kill Your Zombie Process I wrote an article a few months back entitled Killing zombie Google Chrome processes. In the post, I talk about the fact Google Chrome can spin off multiple processes during a browsing session. When you close the browser window sometimes Chrome can leave behind several zombie processes in the Windows Task Manager.

Within the article, I presented two ways to solve this problem. I showed a PowerShell command and I also mentioned a fix through a batch script I created. I uploaded a copy of the Stop Google Chrome Processes batch script file to the TechNet Gallery.

Since then, I have created a similar batch file for other web browsers including Firefox, Explorer, Edge and Opera. All can be downloaded from the TechNet Gallery via the links below.

Learn ASP.NET Core with these videos

ASP.NET CoreMicrosoft Channel 9 icon is a hot topic now amongst Microsoft developers. ASP.NET Core is a “lean and composable framework for building web and cloud applications”. The entire code base is open source and can be used to build cross-platform apps on both .NET Core and the full .NET Framework.

Microsoft knows developers want to learn this new way of building apps. They have always been excellent at delivering online learning tools and the same is true for ASP.NET Core. Microsoft Ignite was held in Atlanta in late September and they have published 749 of their session videos onto both the Microsoft Ignite On-Demand site and Channel 9.

Microsoft Ignite

For developers looking for the latest info on ASP.NET Core, check out these Ignite videos:

  • Explore web development with Microsoft ASP.NET Core 1.0 (Video | Slides)
  • Explore the new, cross-platform .NET Core 1.0 (Video | Slides)
  • Dive deep into ASP.NET Core 1.0 (Video | Slides)

For those looking for an updated overview of the Microsoft developer ecosystem, there is this video also from Ignite by Scott Hanselman:

  • Review the Microsoft application platform for developers (Video)

Microsoft Virtual Academy

Finally, the Microsoft Virtual Academy has posted two new ASP.NET Core videos:

I hope these video tutorials help you learn what .NET Core and ASP.NET Core has to offer.

Killing zombie Google Chrome processes

This article is also available on the Microsoft TechNet Wiki.

When using the Google Chrome browser with of mix of normal and incognito windows, long-running sessions with multiple tabs can sometimes chew up a lot of memory. It certainly does not help either that Google Chrome spawns 10+ processes for any given browsing session. So when it comes time to close these browsing sessions it is not uncommon for Chrome to leave behind several zombie processes in the Windows Task Manager.

ChromeProcesses01

To terminate these remaining processes you can right-click them in the Task Manager and select End task. However, there is a faster way using either a PowerShell command or Windows Batch (.bat) file. Let’s examine both ways.

PowerShell

Within PowerShell, there is the Stop-Process Cmdlet. This will allow you to terminate all processes in one command. You can kill the process either by process name (minus the file extension) or by process ID. Since we want to end all Chrome processes, we would use the -processname parameter combined with the process name:

Stop-Process -processname Chrome

You can enter this command into the PowerShell window or save it to a PowerShell script (.ps1) file that you can run from the Windows PowerShell ISE.

Batch File

Another, simpler, way is to create a Batch (.bat) file. A batch file is a script used in Windows. It lists commands that can be run using the command line interpreter when the file is either called from the Command Prompt or double-clicked.

To stop processes, we can execute the taskkill command:

taskkill /F /IM chrome.exe /T

This command will use these parameters:

  • /F: Identifies that process(es) be forcefully killed.
  • /IM: Identifies the image name of the process to be killed
  • /T: Kills all child processes along with the parent process, commonly known as a tree kill
    If we combine this with a For Loop we can see the number of processes being terminated:

ChromeProcesses02

When run, the script will pause to display all terminated processes including the associated process ID (PID). As well, the total number of Google Chrome processes removed is also listed.

Conclusion

In this article, we saw how we can use both a PowerShell command and a Batch file to terminate hanging or zombie Google Chrome processes. Try either method if you have problems with Chrome processes remaining on your machine after all sessions are closed.

Script

Download a copy of this Batch script file from the TechNet Gallery:

References

Microsoft MVP renewal 2016

MVPrenewal2016

Today I was renewed as a Microsoft MVP in Visual Studio and Development Technologies for another year. I feel truly honoured to be recognised by Microsoft with this award. And since my renewal date is July 1st, this makes Canada Day extra special for me.

This will be my second year as an MVP and I am looking forward to continuing my work with the development community. Thanks to Microsoft for the award and to the Canadian MVP team (Sim & Jo) for their support.

Microsoft MVP Logo