App Service Editor Step By Step: online editing

  • Article

Introduction

App Service Editor, formerly known as Visual Studio Online (Monaco), is a web-based editor for App Service.

It is a helpful tool for quick editing the App Service. This is a very useful tool for editing HTML, CSS, Javascript, jQuery, Angular JS or any client-side scripting effectively. On editing the files are auto save and changes are reflected on the fly to the App service URL.

Quick steps to use App Service Editor

Step I: Select App Services from your Microsoft Azure Subscription

Go to your subscription to Microsoft Azure >> App Services as depicted in below #1 diagram

Step II: Select an App Service

App Services as depicted in above #2 diagram

Step III: Select App Service Editor from Development Tools section

As highlighted in below diagram, please select App Service Editor from Development Tools section.

Step IV: Click Go to open the editor

As highlighted below, click Go to open the editor,

Step V: Remove the hostingstart.html file

As depicted in below diagram delete the hostingstart.html,

Step VI: Create new index.html file

As shown below create an index.html file

Step VII: Add the HTML code as below

Add below source code to index.html file, update the content as per your need.

<!DOCTYPE html>
<html>
<head>
    <title>Amjad Web App Home</title>
</head>
<body>
    <h1 style="color:Green;">
        Amjad has added heading here..
    </h1>
</body>
</html>

The content of index.html automatically saved.

Step VIII: Verify the changes reflect on your App Service URL

Go to your App Service URL to verify the changes as below.