Tldr; This post introduces Azure Blob Storage and the Javascript fetch api and provides a code sample below for integrating public blobs quickly into your own applications.
The Azure Blob Service, provides scalable, cost-effective cloud storage for all your applications unstructured data.
Click here to learn more about blob storage.
With blob storage, developers pay only for what they use, and save money compared with on-premises storage options.
In web applications we can use blobs for anything from storing images and video content to actually hosting our client side application logic and style sheets for dynamic loading. In this way you only pay for hosting of the parts of the your site that users are actually using and you don’t need.
Introduction to Blob storage - Object storage in Azure
Azure Blob storage stores massive amounts of unstructured object data, such as text or binary data. Choose from among four storage tiers, depending on how often you’ll access the data. Store performance-sensitive data in Premium, frequently accessed data in Hot, infrequently accessed data in Cool, and rarely accessed data in Archive. If you want to get started with Azure click here for a free account.
Blob Service REST API
The Blob service REST API stores text and binary data as blobs in the cloud.
Fetch API
The Fetch API provides an interface for fetching resources (including across the network). While fetch natively supports JSON responses, it can be extended with the window.DOMParser to support XML data such the data returned from the Blob Storage REST API as in the sample below.
fetch("https://{namespace}.blob.core.windows.net/{containerName}/?restype=container&comp=list")
.then(response => response.text())
.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
.then(xml => {
let blobList = Array.from(xml.querySelectorAll("Url")); //.getAttribute("Url");
blobList.forEach(async blobUrl => {
console.log(blobUrl);
});
There you have it you have the code you need to get started with client side consumption of Azure Blob Storage hope this helps you with your azure journey.
About the Author
Aaron (Ari) Bornstein is an avid AI enthusiast with a passion for history, engaging with new technologies and computational medicine. As an Open Source Engineer at Microsoft’s Cloud Developer Advocacy team, he collaborates with Israeli Hi-Tech Community, to solve real world problems with game changing technologies that are then documented, open sourced, and shared with the rest of the world.
Oldest comments (2)
Always great to learn how to access and use these services. Thanks for the write up. Do you find any issues with cold start up or latency? I'm guessing the storage is on a shared instance on Microsoft's end somewhere. Just out of curiosity.
Hey glad you enjoyed the article there are different storage tiers depending on the use case for I use azure storage for statically hosted apps with the hot tier and haven't had any start up latency issues storage can also be linked to cdns for an even faster start up time.