Azure functions for single page websites

Some applications are applications that are not used so often, maybe just once a month to update or add a value to a database that a calculation service is using. I’m building a service like that for a customer right now.

While the websites are just used once a month it feels unnecessary to have a website running all the time. Instead for creating a website in Azure App Services I created an Azure function. Azure functions are what is called serverless, which means you don’t have to manage a server at all. You just deploy snippets of code that will be executed when it’s triggered to run, instead of a service that running all the time just waiting for “something to do”.

Many examples about returning HTML from a function that I have read is embedding HTML in the C# code. I don’t like that approach at all, it maybe works if you will create a “Hello World” website. But in my case, I wanted to have a website with a form and validation with JavaScript etc. And when I posting my form I do it to another function that saves the values to the database.

What I did was to add an HTML page in my Visual Studio project and changed Build action from None to Embedded Resource. While it is an HTML page I can edit HTML, CSS and JavaScript will the full power of Visual Studio. The static resources I used for my webpage, like (images, JavaScript- and CSS frameworks), I uploaded to Azure blob storage. While I have them in Azure blob storage I also could add them to a CDN network.

Below is the code that I’m using in the function to read the HTML page and return the result to the browser as an HTML page.

var assembly = Assembly.GetExecutingAssembly();
var resourceName = "MyWebPage.form.html";
 
using (Stream stream = assembly.GetManifestResourceStream(resourceName))
{
    using (StreamReader reader = new StreamReader(stream))
    {
        string result = reader.ReadToEnd();
 
        var response = new HttpResponseMessage(HttpStatusCode.OK);
        response.Content = new StringContent(result);
        response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("text/html");
 
        return response;
    }
}