Serving an HTML Page from Azure Functions
Sunday, April 10, 2016
I was playing around with building an API using Azure Functions this weekend. I wanted to see if I can host the HTML frontend for interacting with it on Azure Functions as well. Because Functions with an HTTP trigger automatically comes with an HTTP endpoint with optional built-in API key authentication (no API gateway required!), this is really easy.
Update - March 10, 2017: Check out this post on how to serve multiple files from a directory.
Create an HttpTrigger Function
If there isn't a Function App already, the first step is to go into the Azure Portal and create one. Then create an HttpTrigger C# function. This example is in .NET, but we should be able to do this with Node.js and other technologies as well.
The function is pretty simple, and it returns the HttpResponseMessage
class that we're used to in ASP.NET Web API 2. We can create an HttpResponseMessage
that has a content type of text/html
and a FileStream
of an HTML file that we'll create later. I couldn't find an elegant way of figuring out the full path to the function directory so I just hardcoded it. :) Here's the updated run.csx:
I was playing around with building an API using Azure Functions this weekend. I wanted to see if I can host the HTML frontend for interacting with it on Azure Functions as well. Because Functions with an HTTP trigger automatically comes with an HTTP endpoint with optional built-in API key authentication (no API gateway required!), this is really easy.
Update - March 10, 2017: Check out this post on how to serve multiple files from a directory.
Create an HttpTrigger Function
If there isn't a Function App already, the first step is to go into the Azure Portal and create one. Then create an HttpTrigger C# function. This example is in .NET, but we should be able to do this with Node.js and other technologies as well.
The function is pretty simple, and it returns the HttpResponseMessage
class that we're used to in ASP.NET Web API 2. We can create an HttpResponseMessage
that has a content type of text/html
and a FileStream
of an HTML file that we'll create later. I couldn't find an elegant way of figuring out the full path to the function directory so I just hardcoded it. :) Here's the updated run.csx: