How to upload Web Site to Azure with FTP approach

Sunday, December 13, 2015

How to upload Web site to Microsoft Azure with FTP approach is topic of my blog post mini tutorial, for this tutorial we will use FileZilla Open-source (GNU GPL) FTP client for Windows. The main reason I am writing this tutorial is my Hello Cloud workshop for Microsoft Student Partner program. This approach is useful when we have old PC hardware with older Windows OS, or OS that cannot run Visual Studio...

For this tutorial I will use Microsoft Azure with DreamSpark (or in my case MSDN), Visual Studio Code (new Microsoft code editor) and FileZilla FTP client for Windows...

First we will create a new Web App on our Azure portal with these simple steps:

  • "+ New" -> 
  • Web + Mobile ->
  • Web App

Under App Service Name we type our unique name for Web App/Site, and it will use "" domain at the end, so that is the future URL for our site.

App Service Name which I will use is "Demo-Elektro-FTP", for Subscription we use our type of subscription on our Azure account (DreamSpark or MSDN), I use my Resource Group named "HelloWorldCloudRes" usually we use Resource group that we have created sometime in the past. If you don't have any Resource Group we can create it it like this, go to main of Azure portal and in left area go to Resource Group, than we click on "+ Add" sign... In front of use we will have following window that we will fill with our informations. (In case that you have created Resource Group sometime in the past, you can ignore and skip this step).

Now when we have created our new Resource Group, we can continue with creating Web App, when we are filled all the fields App Service Name, Subscription, Resource Group, App Service Plan ... we can create our new Web App.

When we confirm our input with Create button, our new Web App is creating and that process can last about minute or more... after that we can see our Web App on main Azure portal page, something like this:

When we have created our Web App on Azure, we can start to make our little site on local PC with Visual Studio Code (code editor)... Site will be very simple, only two paragraphs of text "Hello World" style, HTML is something like this:

Right now, we have our Web App up-and-running on Azure and our simple web site on our local PC. Our main goal is to learn how to publish web site to Azure without Visual Studio, so we use FileZilla FTP client for Windows, after we install FileZilla on our local PC, we need to configure some details on our Web App Settings... so we go in Azure portal and navigate to our Web App than we go to setting with these steps:

Web App -> All settings -> in Publishing find the Deployment credentials ... 
In front of us we have settings window Set deployment credentials, we need to configure FTP user name and password (twice)... You can use default user name from Azure, or you can use custom one if you want.

After successful last step, we can go with FileZilla part of tutorial. We open FileZilla -> File -> Site Manager -> New Site... (give it a name, in my case it was "BlogTutorijal")

Now we have this window on the screen:

Now if we try to Connect or click OK, we will have message that says that we don't have Hostname setup, that is OK because information about Hostname, User and Password we have on Azure in our Web App... on following image there are side-by-side two windows, on left side is Azure Web App Settings, and on right side is FileZilla Site Manager... With these colored arrows, I am connecting the parts from Azure that we need to copy in FileZilla Site Manager. My useful tip for you is to use Click to Copy function in Azure, so that username and hostname can be copied correctly... under Password we type our password that we setup in last step under the Set deployment credentials settings page.

If we are done everything correctly from Web App settings, with click on Connect after few seconds you will see this type of log message in FileZilla:

At this moment we have connection with FTP Server on Azure Cloud and our local PC... In right lower corner in FileZilla windows under the Remote site: we have main folder and two subfolders, for us the most interesting is folder names "site", and in that folder there is wwwroot folder.

Our goal is to open wwwroot folder and with Drag and Drop way copy our index.html file which we are created in past steps on our local PC. When we have copied index.html inside of wwwroot folder we have something like this on the screen:

If everything is completed successfully in this moment on URL of our Web App we should have same content as the copy on local PC index.html..

This window is proving that our tutorial is correctly done, and that our index.html which we are created is on Azure as index page and it is successful published on Web App on Azure cloud platform.

I hope this tutorial was helpful for you, and that now you know how to upload web site to Azure without Visual Studio, only using code editor and FTP client program. Thanks you for attention!

Best regards!

You Might Also Like