Using the Azure Static Web apps you can deploy you static website and integrate an API using Azure Functions easily.
It provides a free SSL certificate, custom DNS domain and 100GB bandwidth for free so it can be a great solution for a personal website. It does not provide URL rewriting, so you might need an Azure CDN setup if you need that, which isn’t free.
By integrating with Github it provides automatic deployment using Github Actions for common UI framework such as Angular, Vue, React, ….
As an example, we can integrate the Mailing Azure function we created in my previous post.
Create a new folder at the root of our repository called “api”. We can then copy the code for our existing function to this location.
We can now update the URL’s in our application to the Azure Function to use a relative path of “api/…”. This is great since we don’t need to point to an external domain when calling the API.
Next we can setup our website in Azure and link it to our Github repository hosting our code. In my example I am using a VueJS application. Linking the application wil automatically generate a Github action YAML (.yml) file in the .github folder of you repository. Set the API location to “api” so Azure knows to look in the “api” folder for any functions.
In the case of our Azure Mailing Function, you will also need to add the “SendGridKey” to the configuration settings in Azure.
The newly generated Github action will be automatically triggered and build/deploy our website UI code, and the Function (in case of a C# function).
Source: Medium - Maarten De Wilde
The Tech Platform