Understanding the Azure App Service Editor
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.
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.
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.
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.
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.
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.
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.