Vainolo's Blog

Azure Functions – Part 2: Serving HTML Pages with Azure Functions

leave a comment

Previous Tutorial: Azure Functions – Part 1: Getting Started

In the last tutorial we created a simple Azure Function that returned a value. I’m going to improve on that project and return an HTML page from the function. As this turned out to be a lot simpler that I though, I’m spicing this up by adding not only one way but three different ways to return a web page – first, a static hard-coded page; second, a page that is stored as part of the Azure Function code; and third, a page that is stored in an Azure storage blob.

We’ll start with a simple C# Azure Function with no authentication as we did last time. I’ll call it “HelloWorldHTML”. If you are following with me, this is what you should have on your screen:


Let’s start by returning a static hard-coded page. Just delete all the code in the function and replace it with the following code:

using System.Net;
using System.Net.Http.Headers;

public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
  log.Info("C# HTTP trigger function processed a request.");
  // Option 1, coded HTML
  var response = req.CreateResponse(HttpStatusCode.OK, "Hello ");
  response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
  return response;

As I said, very simple. There are two new things here. First, we need to declare that we are using the System.Net.Http.Headers namespace because we the MediaTypeHeaderValue class in that namespace. Second, we are adding the ContentType header to the request, which tells the browser that we are returning HTML and should renter it as such. Save the Function and click on the “Get function URL” link to get the direct URL to the function, open a new browser window and paste the function’s URL. You should see this nice HTML page in your browser window:


You can obviously return any HTML here, but as I’m lazy, this is what I did :-).

The second option is to create an HTML file in the function’s code and load it from there. To create a new file, click on the “View files” text on the right of the screen to open up the files that make up the function:


This opens a list as shown below:


You can add a new file or upload an existing one. I’ll click on “Add” and create a new file named “hello.html”. Your list should look like this:


Let’s add some simple HTML code to this file, like this:


Save the file, and return to the run.csx file where the function’s code resides. Comment the original code (everything below “Option 1”) and add the following code:

// Option 2, read from local file
var response = new HttpResponseMessage(HttpStatusCode.OK);
var stream = new FileStream(@"d:\home\site\wwwroot\HelloWorldHTML\hello.html", FileMode.Open);
response.Content = new StreamContent(stream);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
return response;

We are reading a file from the local storage using a Stream, and setting this file as the response to the request. We still need to tell the browser that the content is HTML otherwise it may decide to interpret it as something else (like in the previous tutorial). Save the file and navigate again to the function’s URL. You should now see this nice web page:


Looks different from the previous right, one? This means the code works :-).

Now the third and final option. I’m not going to go into the details of how to create an Azure Storage Blob and how to upload a file to that storage, so I’ll leave that to you to investigate (typical sentence of my university professors when they needed to explain something long and tedious in class but were too lazy to do so…). I’ll just assume that you have created it, that you have a blob container named “site” where you have a file named “hello.html”, and that you know how to fetch the connection string for the Storage Account. Many assumptions, but that is how you move forwards.

Going back to the code, change the first part of the file (the imports section) as follows:

#r "Microsoft.WindowsAzure.Storage"

using System.Net;
using System.Net.Http.Headers;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;

The first line tells the Azure Function runtime that this function is referencing an external assembly (a class library) that is not part of the standard runtime. Azure Storage is one of the special assemblies that can be referenced by name without more work, but in case you need to reference other assemblies, it is also possible as explained here. We then also declare that we are using the Microsoft.WindowsAzure.Storage and Microsoft.WindowsAzure.Storage.Blob namespaces, so our code looks nicer.

Now comment all the code below “Option 2” in your Function file and add the following code:

// Option 3, read from external blob
var storageAccount = CloudStorageAccount.Parse("<your azure storage connection string>");
var blobClient = storageAccount.CreateCloudBlobClient();
var container = blobClient.GetContainerReference("site");
var blob = container.GetBlockBlobReference("hello.html");
string text = "";
using (var memoryStream = new MemoryStream())
  text = System.Text.Encoding.UTF8.GetString(memoryStream.ToArray());
var response = req.CreateResponse(HttpStatusCode.OK);
response.Content = new StringContent(text);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
return response; 

This code connects to the Azure Storage Account using a CloudBlobClient, fetches the Blob container called “site”, and from the container fetches the file. We download the file into a MemoryStream and make the Stream the content of the Function’s response. Now save the file and navigate again to the Function’s URL endpoint. You should see something like this:


Awesome, right? WordPress beware, we are right behind you :-).

Hope you enjoyed this tutorial, and hope you learned as much as I did. I have some ideas on where to go next but I’m happy to explore more things, so leave your ideas in the comments and I’ll see what I can do.

Have a great what’s left of your day 🙂

Written by vainolo

March 17th, 2018 at 7:18 pm

Azure Functions – Part 1: Getting Started

leave a comment

I love to write software. And because I’m not a software developer anymore I don’t get much time to do it, and it has always bugged me the incredible amount of work that is needed to configure, maintain, and in general, manage the infrastructures on which the software runs, which is what I really want to work on. So It’s no surprise that I’m a HUGE fan of server-less programming, as it is provided by Azure Functions (and others like Amazon Lambda or Google Cloud Functions). Since I get some free credits from Microsoft, I had to give this a try… and I’m loving it :-).

I assume that you have an Azure subscription, but if not, just go to and get yours free. At the time of writing this, you even get a $200 credit valid for 30 days. Great to start playing.

The end goal of this tutorial is to have a full blown application for the analysis of financial data, all on top of a fully server-less infrastructure. Let’s see how far I can go. I’m very verbose in my tutorials because I’m a big consumer of them (both of other but also of mine :-)), and I hate it when they don’t show all the steps needed to perform something and you need to guess steps and many times end in an incorrect state that breaks the whole flow.

So let’s get started creating our first Azure Function! Navigate to, and after logging in you should be inside the Azure portal which looks something like this:


To keep things organized, I have created a resource group to keep all of the resource associated with the tutorials in one place, and this is the tile shown in the dashboard (which I also created for these tutorials). A resource group is a logical container of resources in Azure, and helps maintain your subscription organized.

So let’s click on the nice blue "Create Resources" button, and see where we go:


This screen is probably different for every person depending on what they have in their subscription, and I can’t see Azure Functions here, so I’ll do a search:


And yes, there it is, the first result in the search. Clicking on the "Function App" row will open a new "blade" (yes, that’s how those vertical panes are called) that gives a short description of what is a Function App:


This is what I came for, so I’ll click on the create button, which as expected opens a new "blade" (you can see that a new blade is created by looking at the horizontal scroll bar that keeps on growing on the bottom of the screen) where we can enter the details for the Function App we are creating:


Let’s fill in the details for the App. First, the App name, must be unique over all azure websites (on top of which Azure Functions run), so let’s call it "vainolo-azfun" (as expected, it’s not taken :-)). I’m going to use my existing subscription to pay for this App and add it to the resource group from where I started this whole process (you can come to this screen from a different place and there you will have to chose the Resource Group). The Hosting Plan is how you pay for the App. There are two options: Consumption or App Service. Consumption is a "pay-as-you-go" charge where you are billed by the number of requests to the App, and App Service let’s you reserve compute resources to service your App. For tutorials and testing purposes, I’m assuming that Consumption plan is cheaper that App Service (need to check this!), and regardless of this it is also more straightforward so I chose Consumption. I leave the location as it is because I don’t really care, but when you are developing a serious service you need to have your Apps close to your clients, so this is important. Lastly, we need to create a Storage account, the place where Azure stores the code that is deployed in the function. I’ll just name this "vainoloazfun" (no dashed allowed here! And this also needs to be unique over all Storage services in Azure). I’m not going to enable Application Insights because this is not a real production App, but I’ll investigate its capabilities in the future.

Ok, this is what I have now:


I’ll go ahead an click on Create, and see what happens… Ah, the creation blade closes and after some time a message pops out of the little bell on the top right corner of the screen. When I click on it I see that the deployment of my Function App was successful:


I’ll just go ahead and click on the "Go to Resource" button to navigate to my new, nice and shiny Function App, that looks like this:


Great. But talk about overhead – to create a simple function I need a resource group, a storage account, a function app, and then only can I create a function. Man, we could do this way better. But let’s go on.

Let’s create our first function.. Click on the "Functions" text from the drop-down list from "vainolo-azfun" and you will get the Functions screen where a new Function can be created:


I’ll go ahead and click on "+ New Function", getting the following screen:


There are many options here and I will surely investigate them in the future, but for our first example we’ll create a simple Function and responds "Hello World" to an HTTP request. This is done using the "HTTP trigger" template. I’ll click on that option and a new blade opens asking me the name of the Function and the language in which I want to write it:


I’ll select C# as I’m more familiar with it than JS (where is Java???), and I’ll call my function "HelloWorld". Once the language of the function is defined, a new option may suddenly appear in the blade (bad UX practice!) asking for the Authorization level. I’ll select Anonymous because it’s the simplest way to test the function:


I now click "Create", and after a short wait this is what I get:


Instead of getting a blank function (what I expected), Azure already fills my function with sample code that does much more than I wanted, by parsing the request and responding based on the query parameters. I think this is great because it gives you an idea of what you are doing :-). I’ll just delete everything except the first and last line of the function, change the return value to "Hello World":

using System.Net;

public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
    log.Info("C# HTTP trigger function processed a request.");
    return req.CreateResponse(HttpStatusCode.OK, "Hello World");


That’s it. My function is ready! But does it work? It’s easy to check that! Clicking on "Save and Run" button, the function is compiled and a simple test is executed:


And just as expected, my function returns "Hello World" as output.

But I’m a skeptic, and want to see this working outside of the Azure portal. To do this, I need to get the URL of the function, which is fetched by clicking on the "Get Function URL" link on the top of the editor, but it is also easy to create manually: (https://AppURL/api/FunctionName):


I’ll open a new browser window and navigate to this URL, and Voila!


Not exactly what I expected… What is returned by the server is an XML message that contains "Hello World", and the reason for this is because the client (Chrome in this case) requests HTML or XML as response first (and other things later) and the server automagically decides to translates the text response to XML so that it can make the browser happy. So let’s try another way. Using a tool I found called, I can test it again and here the response is once again as was shown in the Azure portal:


And there you have it, my first Azure Function ;-).

In summary, we created in this tutorial a Function App, which is a container for multiple Azure Functions, and a simple Azure Function that returns "Hello World" when called. It’s a good place to start!

And I hope to get some time to play with this some more very soon.

Written by vainolo

February 6th, 2018 at 11:39 pm

Book Review – The Journey

leave a comment

The JourneyAnother venture into the “I can cure myself” theme that I started with I Can See Clearly Now, Brandon Bayes tells her story managed to hear herself from cancer, with no drugs, no operations, just by herself, trying to understand what was causing her this damage and how she could let go rid of it.

What can I say… I understand that her story is true, and I believe that miracles happen. But this woman was doing Yoga every day, eating the best food possible, meditating, and still, cancer got to her! And then she went and revived a trauma that she had as a child, which cured her from everything. Simply awesome. She then decides to define the method and teach it all over the world.

Man. I just wish it was always that simple. I just wish 🙁

If you want to read the book, you can buy it from amazon.





Written by vainolo

December 24th, 2017 at 8:31 am

%d bloggers like this: