How to Run Free Static Web Apps to Azure

Here I explain how to setup low cost static website to Azure.

DNS Architecture for Free Static Web App Site

How to get domain name and use free Azure TLS certificate

First you need domain name. You can go and buy one for example from godaddy.com.

Many domain name providers offers DNS services and you can route traffic from your domain or subdomain to you static web site. Problem is that many of those do not allow to ALIAS record for apex(root) domain. This means that you can easily get dns names working for example https://www.yoursite.com but not https://yoursite.com.

Solution is to edit your domain name provider DNS servers and changes those to Azure DNS name servers. You can first create Azure DNS zone for your domain and then you get those. Now all DNS requests from clients are forwarded to Azure DNS.

In Azure Static Web Site you need to add custom domain for your site and create TXT record in Azure DNS and verify it. And last step is to create @ ALIAS A record pointing to static web app resource.

Now you should be able to use https://yoursite.com and it gets valid TLS certificate in your browser by free of charge!

Azure DevOps Pipeline Deployment

When using Azure Web App, you can easily deploy your code to cloud and many ways. When creating service it ask you by default if you have already code repository in GitHub, Azure DevOps or some other repository. In case you use Azure DevOps you need to create new CI/CD pipeline and copy/paste "deployment token" from the web app.

Here is example of the azure-pipelines.yml

trigger:
- main
pool:
  vmImage: ubuntu-latest
steps:
- task: AzureStaticWebApp@0
  inputs:
    app_location: '/src'
    api_location: ''
    output_location: 'wwwroot'
    azure_static_web_apps_api_token: $(my_static_app_token)
              

Now you only need to commit and push changes to your git repository and CI/CD pipeline will trigger and deploy.

Conclusion

You can setup very low cost static web sites with Azure - almost free. Deployments can be automatized easily and then you just need to write new code and commit.

I do not recommend to do this in production sites for many reasons. But this might be the cheapest way. You can try with your personal project or for development purposes.

In real world it is very important to secure more your sites and services. Think about the continuity for example automated TLS certificate services, web application firewalls etc. Those will not be free and you can't get those working without paid Azure App Service Plans.