App Service Editor

Sahil Malik: Another new very exciting capability of the development tools for Azure Functions is the App Service Editor. Basically it’s an in-browser editing experience for your entire Azure Functions application. Let’s look at it.

So again I’m on my function app and under Platform Features under Development Tools, there is something called as App Service Editor. Go ahead and click on it. It’ll ask you to log in first and if you’ve already logged in, you should see something like this. Does this look familiar? It looks a little bit like VSCode, doesn’t it? Yeah, because it’s built on the Monaco code editor that VSCode uses and right through here, have a full debugging development experience with which I can start writing Azure Functions. Look at this. So I can say context.log, right. I even get like nice intellisense. Notice what happened when I type context. Let’s do it again. Context, all this intellisense starts showing up over here. Imagine if you were on a tablet like an iPad and you access this tool with a keyboard attached, you can start writing Azure Functions right from your iPad.

And then you can run them straight from here. You can see the output, you can open console or you can go to an individual file if you want. You even have source control integration. You can search through files and your entire file system here. This is the App Service Editor, currently in preview but it’s fairly powerful. Now there are so many tools out there and if this Azure Function was integrated with source control like Azure DevOps, you will also see a tuned-down version of Monaco built right inside of DevOps. So technically speaking, you could edit code right there, deploy it using source control and get a similar experience. But this is a little bit closer to Azure Functions, specific to Azure Functions and from here, you can open the Kudu console, open the Azure Dashboard, browser website, it’s really, really close to Azure Functions. It’s like IDE specific for Azure Functions that runs right inside of the browser. That is the App Service Editor.