Azure App Service Static Web Apps

Static Web Apps (Preview)

Thursday 21st May - Some day ago I received a tweet notification on twitter about “Introducing App Service Static Web Apps”. but after a quick reading I felt very confused.

Modern web apps are increasingly adopting static front-end design patterns with client-side processing powered by JavaScript. This paradigm requires us to think differently about how we deploy and host web apps that don’t rely on web servers and consequently require a new structure of supporting cloud resources. This week at Build, our annual celebration of all things developer, we are happy to announce that Azure App Service has been expanded with a new hosting offer tailored specifically for static web apps, empowering developers to focus on the business logic that differentiates their apps rather than the infrastructure that hosts them.

What was my first thought after reading this?

At the beginning of may I migrated my blog on GoHugo platform, and I moved it on Azure Cloud using Blob Storage. Why don’t test this news?

That’s how publish your first static website using “Static Web Apps” from Azure portal

You only need::

• Account GitHub with static site to publish
• Account Azure

New Resource - Static Web Apps

Creating a “Static Web Apps” is very easy and no technical operation is needed.

• Create a resource
• Static Web App (Preview)
• Choose Subscription e Resource Group
• Insert Name of Static Web Apps (It will not be url)
• Choose the Region (for now available only in Central US, East US2, East Asia, West Europe, West US2)
• Login to GitHub
• Choose Organization, Repository & Branch
• In tab Build you can “Provide initial build variables. These can later be modified in the workflow file.” tra cui App location, Api location e App artifact location
• Then, you can do the Review and create a new resource.

CName & Custom URL

Once you create the resource, you will be assigned of an URL adress on this line:

https://polite-XYZ-0QWERTY903.azurestaticapps.net/

In the resource, on left column you’ll find Custom Domains : enter domain setup and set CNAME

• Configure records with your DNS provider: To add a custom domain, first configure a CNAME record with your DNS provider.

• Validate custom domain: Enter the desired custom domain you wish to add below.

Staging Area

In my next post I’ll talk about the opportunity to have a staging area if you wish not to validate modifications live. Read more on PULL REQUEST.

This is because the pipeline yml generated when you create

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
    - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
    - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
    - uses: actions/checkout@v2
    - name: Build And Deploy
      id: builddeploy
      uses: Azure/static-web-apps-deploy@v0.0.1-preview
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_XXX }}
        repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
        action: 'upload'
        ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
        # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig 
        app_location: '/' # App source code path
        api_location: 'api' # Api source code path - optional
        app_artifact_location: '' # Built app content directory - optional
        ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
    - name: Close Pull Request
      id: closepullrequest
      uses: Azure/static-web-apps-deploy@v0.0.1-preview
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_XXX }}
        action: 'close'

First Impression

I tested this and I must admit I like this new Microsoft product.

• SKU is FREE
• You don’t need a CDN for Custom Domain (in contrast to blob storage)
• Unfortunatelu 404 page isn’t customizable
• GitHub: for now it’s a constraint of repository choice. Will it be succesful, or other source controls will be integrated in the future?
• Not editable configuration. This is a limit, because you can do the change through ambient recreation (CNAME modification, and delay time too)

I must admit I had my mind the idea to migrate my blog on App Service Static Web App, and for a while I did it, as I wrote on Linkedin.

I couldn’t resist migrating my blog from #blobstorage to #azurestaticapps after reading the news this afternoon, even if this service is still on preview. I immediately changed the beloved #endpoint of #cdn . Yes, I confess, I love so much #azure #cloud, and I must thank Microsoft for this “gift”.

In a few moments, I recognized some details that persuaded me to restore the build pipeline through blob storage and CDN usage. Why?

• I had some trouble with GoHugo pipeline despite instructions on Microsofr website
• I couldn’t change configuration unless deleting and recreating the whole website

So, that’s why I prefer to restore the previous stack and test it on the week end. Once I find the way to publish automatically, I’ll swithc the CDN off and change the CNAME on my domain.

Link Utili

• AndreaCarratta@Linkedin
• BugsInCloud@YouTube
• BugsInCloud@TikTok
• DevAndreaCarratta@Instagram
• DevAndreaCarratta@Facebook