In this modern web world, almost all minor part of software ecosystem are being evolved from the time we choose programming language until we deploy the developed application. Efficiency & agility is made easier for organization to release changes rapidly. If we looked back 20 years ago, hosting a website required a server and needed maintenance overtime in improving server specifications when traffic increases.

Today, creating servers to maintaining them, all have evolved under the term of serverless and can be done within a few clicks. Today, let's look and review at two growing platforms for deploying static websites. Before we drill down on the pros & cons of each technologies, let's see the steps to have Blazor WebAssembly app deployed to Azure Static Web Apps & Netlify.

Github CI/CD build & deploy pipelines overview

We would want to ensure that the blog is easily built & deployed to hosting environments. Most importantly, to easily deploy in minutes with as small as 1 line of code change. Below shows on how you can achieve with Github, Azure Static Web Apps, and Netlify.

Azure Static Web Apps

Microsoft released Azure Static Web Apps(Preview) on Build 2020.The best explanation about this is that " I got my website up running in 5 minutes". In my opinion, probably the fastest to get your application to the internet today. I would say Azure Static Web Apps provides service to accelerate the CI/CD process from local development to deploying to the cloud.

Pre-requisites

• Azure subscription
• GitHub
• Add routes.json file to wwwroot folder (More information right here)
  
  Warning:
  Consequences of not doing so will end 404 Not Found when application is refreshed/navigate directly to locations.
  
  
  JSON
  {    "routes": [       {          "route": "/*",          "serve": "/index.html",          "statusCode": 200       }    ] }

Steps to setup & deploy

1. Go to Azure Portal
2. Search for Static Web Apps (Preview) & click Add
3. Configure as below & click Review + create:
   
   Note:
   App location is where your wwwroot resides & Api location is optional and only configure it if you have a directory which contains only Azure Functions JavaScript, C#, or Python Azure Functions app.
4. During the provisioning, it will create .yml file & commit to GitHub application repository under .github\workflows directory
5. Navigate to GitHub > Application Repository(e.g. BaskaranBlog) > Actions and you will notice the below:
   
6. Congratulations, with easy 6 steps, you have successfully provisioned & deployed under https://*.azurestaticapps.net

Netlify

I heard about Netlify first time on my Twitter feeds where it was advertised as I can deploy my static website with few clicks FREE. I'm eager to know what can Netlify bring and I must say I was stunned by the level of features they have and it offers so many capabilities even on a FREE tier(e.g. Draft deployment, Continous Deployment, etc). The best part of this is that it's all-in-one solution and offers great encouragement to start personal projects, hobby or experiments.

Pre-requisites

• Netlify account
• GitHub
• Add _redirects file to wwwroot folder (More information right here and you can also test redirect file right here)
  
  Warning:
  Consequences of not doing so will end 404 Not Found when application is refreshed/navigate directly to locations. After some investigation, even if we set /* to redirect to index.html, it will only work if it's being navigated at locations where index.html exist. Therefore, in order to get non-root paths work, at this point, it's required to add each non-root path page to index.html.
  
  
  Blank File
  /* /index.html 200! /posts/* /index.html 200!

Steps to setup & deploy

1. Login to Netlify Portal
2. Click New Site From Git
   
3. Choose your Git Provider to be linked
   
4. Pick a repository that you would want to deploy
   
5. Configure as below and by leaving Build command & Publish directory empty.
   
6. Once configured, click Deploy Site. On success, you will be redirected to the page below:
   
7. From the navigation, go to Deploys and click Deploy settings
   
8. Click Edit settings
   Warning:
   Netlify does not support .NET core build within their infrastructure and therefore, we will require to do via GitHub CI/CD pipeline.
   
   
9. Under Builds, select Stop builds and click Save.
   
10. Now, go to User Settings > Applications and you will require to create a Personal access token which named NETLIFY_AUTH_TOKEN
    
11. Go to Site Settings an you will require to copy API ID to be added into secrets which named NETLIFY_SITE_ID
    
12. Go to GitHub source code Settings > Secrets and configure as below:
    
13. Go to GitHub source code Actions > New Workflow and choose .NET Core
    
14. Under Edit new file, copy the .yml code and configure as below:
    
    YML
    name: Netlify CI/CD # Name of the workflow.   on:    push:       branches:        - main    pull_request:       types: [opened, synchronize, reopened, closed]       branches:        - main   jobs:    build_and_deploy_job:       runs-on: ubuntu-latest       Build and Deploy Job       steps:       - uses: actions/checkout@v2       - name: Setup .NET Core         uses: actions/setup-dotnet@v1 # Setup .NET Core         with:            dotnet-version: 5.0.100 #Change to your version of .NET Core       - name: Build         working-directory: src #Source directory where wwwroot exist         run: dotnet build --configuration Release       - name: Publish         working-directory: src #Source directory where wwwroot exist         run: dotnet publish -c Release --no-build -o publishoutput       - name: Deploy Preview         if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')         uses: netlify/actions/cli@master #uses Netlify Cli actions         env: #These are the environment variables added in GitHub Secrets for this repo            NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}            NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}         with:            args: deploy --dir=src/publishoutput/wwwroot #Push this folder to Netlify Preview            secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'       - name: Deploy Production         if: github.event_name != 'pull_request'         uses: netlify/actions/cli@master #uses Netlify Cli actions         env: #These are the environment variables added in GitHub Secrets for this repo            NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}            NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}         with:            args: deploy --dir=src/publishoutput/wwwroot --prod #Push this folder to Netlify Production            secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'
15. Click Start commit & now, it will start to build & deploy automatically.
16. Go to GitHub source code Actions > Netlify CI/CD, you will notice the below if the build is successful!
    
17. Congratulations, you have successfully provisioned & deployed under https://*.netlify.app

Opinion on the technology stacks

Both technology stacks offers great potential to deploy your first application. It's best to view the below as individual preferences due to the fact that technology requirements can change every now & then. This opinion is never to influence the decisioning & follow what best suits your requirements.

Azure Static Web Apps

Pros

• Free tier(for preview)
• Fast - able to get it up & running under 5 minutes
• Auto Github CI/CD process configured during provisioning - speeds up go-live without having need to manually create scripts
• Staging environment - able to test via Pull Request before merging the changes
• Build & Deploy email/pull request notification are sent via GitHub CI/CD pipelines.

Cons

• Limited to GitHub for now
• For someone new exploring Azure infrastructure, it requires to add billing information which many steps to get your first app up and running which may prevent users to signup to avoid accidental charges.
• Hopefully when it gets launched to GA, it will remain free tier option where it will benefit new startups, professionals as encouragement to get their site up in few minutes.
• Azure Static Web Hosting technology stack does not support SSL for certain URLs. For example, if foo.com were the domain using Static Web Hosting, traffic destined for https://www.foo.com and https://foo.com could not use SSL, so we will require CloudFlare as reverse proxy.

Netlify

Pros

• Easy signup and does not require billing information - just a valid GitHub account will do
• Free tier by default which offers great boost new startups & professionals
• Fast - able to get it up & running under 5 minutes
• Netlify draft - able to test via Pull Request before merging the changes
• All in one solution - which can done within Netlify portal
• Netlify support in-house domain configuration without needing CloudFlare as reverse-proxy

Cons

• For NET Core, the CI/CD ecosystem is not supported yet/no clear documentations to achieve it
• CI/CD process needs to have more flexibility to get auto-integrated to GitHub/other Git providers.
• Redirects setup documentations is not very clear - requires testing but hope this article will help out.

In closing

In my opinion, it's best to appreciate this technologies given that it solves problems we had 10 years ago where to get a single site available on the internet, we had to look in all aspects from development to maintenance of the sites. Both this technologies offers great functionality to get a site up and running in 5 minutes. All of this depends on your use cases & nature of business. For my personal use, I tend to lean towards services that can bring my site up and running quickly and I must say this technologies provides great platform for individuals to start their first app on the internet!