In this article I’ll show how easy is to host and deploy a static web application (that doesn’t require server-side processing) to Azure’s infraestructure making use of Azure Storage and delivering it with Visual Studio Code
In this introductory article I’ll show how to deploy a simple tictactoe static website to Azure’s infraestructure using Azure Storage and Visual Studio Code. Let’s get to it.
Creating a Azure Storage
Azure Storage is Microsoft’s cloud solution to store objects (structured or non-structured). It encompasses several services, for different purposes:
- Azure Blobs: A massive object store used to retain any kind of text or binary data. It also supports analytics big data through Data Lake Storage Gen2
- Azure Files: A completely managed file share for cloud or on-premises environment
- Azure Queues: A reliable area to store data exchange messages between applications and components
- Azure Disks: A storage to retain volumes for Azure Virtual Machines (Azure VMs)
In this article we’ll use Azure Blobs service, that will store all our static website files.
First of all, let’s create a resource group to separate this guide’s resources from all your possible other resources. Access Microsoft Azure Portal, log in and click
Resource Groups in favorites menu (left side of the screen), or use the search bar. Next click
Creating a Resource Group in Azure’s Portal
Choose the Resource Group name and the datacenter location and click
Filling Resource Group information
Ensure that you are navigating inside the recently created Resource Group and click
Create > Marketplace to add a resource:
Adding a resource
Search for “storage” and hit enter, then select “Storage Account” from Microsoft and click
Search for Azure Storage
Fill all the required fields as the following image and click
Review + create:
Filling storage information
Storage name must be globally unique (accross all storages registered in Azure), it must be 3 to 24 characters long and can contain only lowercase letters and numbers
Leave all informations with default values and click
Adding the storage
Azure will begin the creation of the storage and when it’s ready, the following screen will be presented. Click the button
Go to resource:
Storage successfully created
If everything is ok, your storage dashboard will look like this:
Installing Azure Storage extension
With the required infraestructure to store our static website ready, it’s time to ensure that your Visual Studio Code have the required extensions to publish your project files to the recently created Azure Storage. So, open your vscode, look for
Extensions in the left side menu or simply press
ctrl+shift+X and search for
Searching for azure storage extension
Or, you can click this link then click
This extension will automatically install
Azure Account extension, which will create Azure menu in screen’s left side. Click it and log in using your Azure email and password, follow the steps the extension show you and make sure your account is logged in and your subscriptions are showing, like this:
Azure Account logged in
Cloning and deploying the app
Now let’s get our tictactoe static website ready to deploy to Azure. In Visual Studio Code open the terminal (
superior menu > terminal > new terminal or
cmd+shift+` in mac) navigate to a directory of your preference to store the project. Then clone the project and navigate to it with:
1 2 git clone https://github.com/danielpadua/js-tic-tac-toe.git my-static-website cd my-static-website
Now open the created directory in Visual Studio Code via
File > Open Folder > ...:
To deploy the project to the recently created Azure Storage, you simply have to right-click in the directory you wish to deploy and choose the
Deploy to static Website via Azure Storage option. In this project, we’ll want to deliver all the opened files, so, let’s right-click over the empty space in the root of the files tree as following:
Click the highlighted option to deploy all files
Then some options will pop-up for you to tell the extension in which Azure Storage you want to deliver the files, if you have more than one subscription, you must select the same one that you created the Storage earlier:
Select the same Storage you created earlier
After selecting, the extension might warn you that the static website hosting is not enabled in the selected Storage and will ask you if you wish to enable. We do want that, so choose
Enable website hosting option.
You will then be asked what will be the name of the html file that must be considered when your user hit the root URL of your website, leave it written
index.html and hit enter. Next, you will be asked the name of the file to present when your user try to access a nonexistent document. In this project there is no page to present in this scenario so we can keep the suggested
index.html, but if your project have one, fill the name correctly.
Press enter again and the deploy will begin. After it successfully ends, the following message will appear in your screen’s inferior right side:
Navigate to the link written in the message and see your website running!
In just a few minutes it’s possible to deploy a static website to Azure using Visual Studio Code. Not only easy, but also cheap. Actually I believe that the price is what’s more attractive in this hosting model.
At this moment I maintain 2 static websites in Azure with little access and I pay around $2,57/mo. But the better cost calculation is done considering bandwidth and storage size used. The best way to estimate is using Azure calculator: https://azure.microsoft.com/en-us/pricing/calculator/?service=storage.
I hope this guide was useful to you, thanks and see you guys soon!