Deploy static HTML web application to Azure App Service using FTP or FTPS

Azure App Service

Usually a beginner as an IT professional used to start encountering and expanding their cloud skills by means of using the Azure App Service, the heart of Microsoft’s Platform-as-a-Service (PaaS). 

If we talk about the traditional way to deploy any app, we need a new web server, set up a virtual machine, log on and configure some essential stuffs like Linux/Windows Server, IIS etc. But the story doesn’t end here, deploying such applications come with diverse accountabilities of managing as well monitoring components and software’s bits and pieces, like – 

• Virtual Machine
• High Availability
• Updating OS
• Patching up to date
• Backup task
• Security aspects and many more.

The motto behind of PaaS is that focus should turn from the Capital Expenses (CapEX) to Operation Expense (OpeX), spending time to manage the application rather than caring the infrastructure. 

Azure App Service is a fully managed Platform as a Service (PaaS) that presents an integration of diverse app services into a single facility. Integration include the following important known services as well more capabilities that enable the integration with on-premises or cloud ecosystem – 

• Web Apps
• Web Jobs
• Mobile Apps
• API Apps
• Logic Apps
• Functions

In brief the Azure App Service is a PaaS model that runs above said applications and manages the resources required by those apps.

Static HTML web app

Under Azure App Service, the Web App is a fully managed platform that enables you to build, deploy, and scale enterprise-grade Web Apps through different frameworks like .NET, Java, PHP, Node.js, Python and many more.

But sometimes we need to deploy simple static HTML based web app to Azure cloud, we can accomplish the same using Azure App Service and FTP feature. Whenever you build a static website, it means the website is a collection of HTML, CSS, JavaScript and other static files etc.

Here we can see how to deploy a basic HTML + CSS site to Azure Web Apps with the help of the FTP client tool.

Pre-requisites

Before moving ahead, we need some pre-requisites to accomplish this task on top of Azure Cloud using an FTP client.

1. Azure subscription, if you don't have an account then sign up for a free Azure account - https://azure.microsoft.com/en-gb/free/
2. Built HTML website.
3. FTP client.

STEP – 1: Create static HTML web app

You can create a basic static HTML website using any framework or editor, but here for the demo purpose I am going to use an HTML theme, which I have been downloaded from the following link – 

https://www.free-css.com/free-css-templates/page234/mu-material

I made some changes and prepared the website, looks like something as below attached the snapshot of running application at locally.

STEP – 2: Login to Azure Portal

Login to the Azure portal https://portal.azure.com/

Click ‘+ Create a resource’ or click ‘All services’ from the left hand menu, enter App Service in the appeared search section and hit enter.

Also from the main Azure menu, either you can select the App Service, which comes under Favorites as well Popular section or just choose Create a resource > Web > Web App.

STEP – 3: Provide property details 

Under the Create section, provide property details about your Web App as shown here – 

• App name – The name of your Web App, something like app_name.azurewebsites.net to identify uniquely.
• Subscription – The name of your Azure subscription, it would be either free, paid or specific subscription etc. 
• Resource Group – The name of the resource group used to organize related resources, you can either create a new resource or choose an existing one.
• OS – It would be either Windows or Linux.
• Publish – Identify the source as Code or Docker Image.
• App Service plan/Location – The specification of hardware and location details where your app runs on.
• Application Insight – To detect and diagnose quality issues in your web app and web services etc. 

STEP – 4: Configure the App Service Plan 

An App Service plan is the container for your app, it will determine the location, features, cost and compute resources associated with your app. Henceforth I will select an appropriate plan for this demo accordingly.

Click the by default selected section of App Service Plan/Location under Create blade, you will get a new blade of App Service Plan.

Next, click the Create new link under the App Service Plan blade which will open a new blade of New App Service Plan subsequently, fill and select property details as shown below.

• App Service Plan – The name of your App Service Plan.
• Location – The region where to store your App Service information.
• Pricing tier – The features, cost and compute resources details.

Post submission of name and location you can select the recommended configuration for the website, click the Pricing tier to load the dashboard.

Click Apply once you select the recommended tiers, it will look something like as shown below and click the OK button respectively – 

STEP – 5: Create the App Service Plan 

Azure will start the validation and deployment of this newly selected resource as soon as you click the ‘Create’ button.

Sooner, you will get deployment completion acknowledgement.

STEP – 6: Setup FTP account 

Next, select the newly created App Service, you can notice few specific details under overview blade like as – 

• URL of Web App.
• FTP hostname
• FTPS hostname
• FTP/deployment user – which is not set currently. 

Since yet the FTP credentials has not been set up so the first thing need to create user and assign a password to access the FTP location.

Click the Deployment Center link under the Deployment section, Azure will load the Deployment blade.

Scroll down the section unless you get the FTP part, select the same and click the Dashboard button to load the FTP dashboard.

FTP dashboard will launch the blade, here either you can go to App Credentials which is auto populated or can create a new User Credentials. I am moving ahead with App Credentials, select the App Credentials tab and copy the credentials or click the Reset Credentials button to reset the credentials again.

STEP – 7: Connect the FTP account 

Next, time to connect the FTP account, you can use any client tool such as FileZilla, WinSCP, CoffeeCup and Core FTP etc.

I am going with FileZilla, which is a free software, cross-platform FTP application, herewith configured the site details with FileZilla client.

Once you will try to connect the FTP the FileZilla will throw an unknown certificate alert, just accept and trust it.

Sooner, you will get connected the FTP and will see the folders which is endpoint of your created Azure Web App.

Congratulations, the FTP get connected!! 😊 , time to upload HTML web app.

STEP – 8: Upload the static HTML web app to the FTP account 

Post successful connection with FTP, time to upload the static HTML web app to end point folder under the FTP location. First point to source folder under Local site section and point to wwwroot folder in the Remote site section in the FileZilla tool.

Next, delete any existing file under the wwwroot folder, and upload all HTML web app files and folders to wwwroot folder. The sooner the uploading will be started and at the end of upload you can see the detail status in tab wise.

Congratulations, the HTML web app get uploaded!! 😊 , time to execute the Web App.

STEP – 9: Execute Azure Web App via URL 

Finally, the static HTML website has been moved to Azure Cloud through the Azure App Service, time to do verify the application.

Go to App Service overview blade and copy the URL of Web App, for example in my case – 

https://clouddemoweb.azurewebsites.net

Execute the URL on any browser, it will load the static HTML web app.

Congratulations, the HTML web app deployed successfully!! 😊