This is an interesting question, and the answer is that you can certainly build a website using Azure functions. You can create a http trigger that returns a static html file that you include in your function. If you want, you can add Javascript or jQuery logic to that file. For even more functionality, you can create more functions that will serve as an API, which you can query from your html file. The API could e.g. utilize Azure storage, where you can cheaply store data in tables or blobs.
Using this pattern, you could in theory build complex web apps on a serverless architecture. I would guess, however, that you would probably find it a bit cumbersome to work with, as the tooling is not really great yet. On the other hand, you would never need to think about hosting/scaling, so that is a big plus.
Just to prove my theory, I implemented a small function app with two c# http trigger functions: One that serves an html file, another one for the api that returns a number. It is just thrown together quickly to prove the point, so I apologize if the code is messy.
HttpTriggerCSharp1:
using System.Net;
using System.Net.Http.Headers;
using System.Threading.Tasks;
using System.IO;
public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
{
log.Info("C# HTTP trigger function processed a request.");
var response = new HttpResponseMessage(HttpStatusCode.OK);
var stream = new FileStream(@"d:\home\site\wwwroot\HttpTriggerCSharp1\index.html", FileMode.Open);
response.Content = new StreamContent(stream);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
return response;
}
HttpTriggerCSharp2:
using System.Net;
public static async Task<int> Run(HttpRequestMessage req, TraceWriter log)
{
return 42;
}
index.html:
(Note that you will have to add the index.html file to your function files collection)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var original = $("#testDiv").text();
$("#testDiv").text(original + " - jQuery added this!");
$("#testButton").click(ButtonClick);
});
var i = 0;
function ButtonClick() {
i++;
var result = i + i;
$.ajax("https://testfunctionwebsite.azurewebsites.net/api/HttpTriggerCSharp2").done(function(a,b) {
var queryResult = a;
$("#ajaxResult").text("Result from api:" + queryResult);
});
$("#ajaxResult").text(result);
}
</script>
<div id="testDiv">
Hello functional world!
</div>
<div>
<button id="testButton">Get some values</button><br>
<div id="ajaxResult"></div>
</div>
</body>
</html>
You can try it out at: https://testfunctionwebsite.azurewebsites.net/api/HttpTriggerCSharp1
