Products Technologies Demo Docs Blog Support Company

Deploying the MVC HTML5 Editor to Azure App Services

This article describes how to deploy the ASP.NET MVC HTML5 editor to Azure App Services.

Deploying the MVC HTML5 Editor to Azure App Services

While the backend service of the HTML5-based editor, that synchronizes the document, requires a full Azure VM, the front-end ASP.NET MVC application can be deployed to Azure App Services. This concept allows a central server (cluster) to host the backend which is used by several applications deployed to various App Service instances.

Microsoft Azure

The following best practice explains how to deploy applications using this architecture.

Azure VM for the TX Text Control Backend Service

In order to build such a setup, a full Azure VM is required.

  1. Create a new VM by choosing Compute from the Azure Marketplace and select Windows Server 2016 Datacenter as the template. Choose a size depending on your computing requirements. The number of CPUs is not really an important factor for this VM, but memory and a fast SSD helps.

  2. When this VM has been created, connect to the VM and deploy the TX Text Control service as described in the documentation:

    Redistribution and Deployment (scroll down to second part Deploying the TX Text Control Web Server).
  3. The ASP.NET MVC applications deployed to App Services will communicate with this VM directly using TCP on port 4275 (for version X16 - increments by 1 for each major release) and therefore, this port needs to be opened in the Network security group by adding an Inbound security rule. In the Azure portal, open the Inbound security rules for the Network security group of the created Azure VM.

    Microsoft Azure

    Click Add to create a new rule:

    Microsoft Azure

The ASP.NET MVC Application

In Visual Studio, create your ASP.NET MVC application using the HTML5-based editor according to the documentation.

  1. In the view, where TX Text Control is used, set the ServiceAddress property to the IP of your created Azure VM.

    @using TXTextControl.Web.MVC
    @using TXTextControl.Web
    
    @Html.TXTextControl().TextControl(settings =>
    {
        settings.Dock = DockStyle.Window;
        settings.ServiceAddress = IPAddress.Parse("192.168.0.1"); // change IP here
    }).Render()
  2. Select Publish from the Build main menu. In the opened dialog, select Microsoft Azure App Service, check Create New and confirm with Publish.

    Microsoft Azure

  3. In the opened dialog, login with your Microsoft account, add an App Name, select your Azure Subscription, your Resource Group and App Service Plan (or create new ones) and confirm with Create.

    Microsoft Azure

  4. In the Solution Explorer, open the Server Explorer and expand the Azure node. Find your published App Service and choose Open in Management Portal from the right-click context menu.

    Microsoft Azure

  5. In the Azure Portal, open the Application Settings, enable Web sockets and Save these changes.

    Microsoft Azure

Now, the ASP.NET MVC application is deployed to Azure App Services and ready to be accessed. The MVC application is synchronizing the document with the backend server hosted in the Azure VM.

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

ASP.NET

Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.

ASP.NET Core
Angular
Blazor
JavaScript
React
  • Angular
  • Blazor
  • React
  • JavaScript
  • ASP.NET MVC, ASP.NET Core, and WebForms

Learn more Trial token Download trial

Related Posts

ASP.NETJavaScriptDocument Editor

Detect Toggle Button Changes Using a MutationObserver

This article shows how to detect changes of toggle buttons in the ribbon of the web editor using a MutationObserver. The state of a toggle button in the ribbon visualizes the state of a certain…


ASP.NETDocument EditorHTML5

Implementing Conditional Table Cell Colors with MailMerge

This ASP.NET MVC sample shows how to implement conditional table cell colors using the online document editor and an ASP.NET backend.


AzureHTML5MVC

Using an Azure Load Balancer with Web.TextControl

LOB (line of business) applications are often deployed with a Load Balancer that distributes incoming traffic to healthy virtual machines or cloud services. When deploying an application, that…


ASP.NETGitHubHTML5

MVC: Loading Files from the Backstage Menu

Happy New Year, everybody! In the last blog entry, we showed how to replace the file menu with an MS Word-style backstage menu. This project shows how to load documents from a partial view in the…


ASP.NETGitHubHTML5

MVC: Replace the File Menu with a Backstage View Menu

Microsoft Word provides a very smart way to manage documents and related data such as metadata and personal information in a separate view: The backstage view. The ribbon bar contains commands for…