Intro

So I was looking for the best way to send an email notification from a static website. In paticular I was looking to send an email notification to my personal mailbox when a visitor to this site submitted a request through the contact me page. In order to follow this article you will need to have the following.

• Azure Subscription - I am currently using my free MPN subscription which I get €130 credits free per month
• Visual Studio Code - Free IDE which you can download from here
• Azure Static Website - At the time of making this article Azure Static Websites are currently in preview and are also free. A good starter template for a static website can be found here
• Sendgrid API Key - SendGrid is free with your Azure subscription, 10k free emails per month

To get started open Visual Studio Code and navigate to your static website. First you need to install the Azure Functions extension, to do this click the extensions icon in Visual Studio Code, enter Azure Functions in to the search box and install the extension

Once the Azure Function has been installed an Azure icon now appears in Visual Studio Code, select it and click the folder icon to create a new Azure Function project. Azure Functions allow you to create methods in the language of your choice C#, Javascript, TypeScript, Python, Java and Powershell. For the purpose of this article I am going to use C#. Create a folder called api in the root of your website. Give the function a name, in this case I have named it SendNotification. Once created the folder structure should look as below.

Next we need to add the code to send the actual email, first open the SendNotification.cs and the code below to it. Notice the code that sets the SendGrid Api key, it is stored in the AppSettings of my deployed static website in Azure. Next add a reference to SendGrid and SendGrid.Helpers.Mail, if you receive compilation errors you will need to add these packages. Luckily Visual Studio Code makes this easy. Find the csproj file of your Azure Function project and add the code below. Save your files and a popup will be displayed alerting you of missing dependancies, click add and they will get added automatically for you.

Next you need to add the javascript code in your static html file to call the Azure Function. There are a number of different ways that you could do this, I am going to do a standard ajax call to post the data to the Azure function. Also you can see the structure of the page below where I will read the input from the user when the submit button is clicked. Also you will need to add a reference to jquery

Thats it we are now ready to deploy our static website to Azure. I am using github as my source code repository. Within Github I have CI/CD using github actions that deploys my static site directly to Azure when I check in the latest code. If you would like to see a full article on setting up github actions to deploy directly to Azure let me know in the comments below.

Conclusion

So in this article I demonstrated how to send an email from a static website using Azure Functions. Hopefully it gives you a good idea about what you can acheive using Azure Functions in your own website. As mentioned at the start of this article everything used here is currently free and when Azure static websites are out of preview they will cost very little to run per month. If something is not clear or you would like me to explain something a bit better feel free to leave a comment and I will get back to you as soon as I can.