$30 off During Our Annual Pro Sale. View Details »

Front-end web applications with Azure Static Web Apps

miyake
July 28, 2020

Front-end web applications with Azure Static Web Apps

Session materials for Virtual Azure Community Day 2020
https://azureday.community/

miyake

July 28, 2020
Tweet

More Decks by miyake

Other Decks in Technology

Transcript

  1. Front-end web applications with
    Azure Static Web Apps
    Virtual Azure Community Day 2020
    Kazuyuki Miyake
    1

    View Slide

  2. About Me
    Miyake Kazuyuki @kazuyukimiyake
    ZEN Arhchitects Co.,Ltd. CTO
    Microsoft MVP ( for Microsoft Azure )
    Vue.js-jp, Typescript-jp core staff
    Blog: https://k-miyake.github.io/blog/
    2

    View Slide

  3. Agenda
    Features and Benefits of Azure Static Web Apps
    Hosting
    CI/CD
    APIs
    Front-end patterns in Azure Static Web Apps
    Git-based SSG
    JAM Stack
    3

    View Slide

  4. Problems so far (on Azure) Resolved!
    Azure hadn't had a hosting environment optimized for Static Site Azure
    Been trying to figure out where to deploy SPA & SSG
    4

    View Slide

  5. Azure Static Web Apps Public Preview
    Hosting environment optimized for a static website
    CI/CD integrated with GitHub Actions
    Serverless APIs integration by Azure Functions
    5

    View Slide

  6. Web hosting for static content
    Free Hosting
    Free Tier is available in Public Preview
    Globally distributed static content
    Custom domain
    Custom domains to provide branded customizations to your app
    Free SSL certificates, which are automatically renewed
    6

    View Slide

  7. Build & Deploy
    Push the code to GitHub and it's running in minutes
    Azure Pipelines and other CI/CD services are not yet supported
    7

    View Slide

  8. Pre-production environments
    Can review Pull Requests in deployed environment
    Triggered by PR, a staged version is automatically deployed
    8

    View Slide

  9. Serverless APIs integration by Azure Functions
    Integrate APIs as BFF (Backends For Frontends)
    Api route available without CORS
    9

    View Slide

  10. Integrated Auth
    Built-in Authentication and Authorization
    Auth rules defined in routes.json file
    Available Authentication Providers
    Azure Active Directory
    GitHub
    Facebook
    Google
    Twitter
    10

    View Slide

  11. Quotas and Limitation
    Major quotas and limitation in Public Preview(Based on July 24, 2020)
    Due to Public Preview status, SLA is not provided
    Only 1 PR preview environment will be provided
    In case there are more than 2 PR environments, workflow will fail
    APEX Domain is not supported during this preview (Alternative way with
    CloudFlare)
    More information
    https://docs.microsoft.com/en-us/azure/static-web-apps/quotas
    11

    View Slide

  12. Front-end Web Application Developmemt
    SPA: Single Page Application
    Run in the browser (no server runtime required)
    SSG: Static Site Generator (included JAM Stack)
    Pre-rendered static content-based web apps
    Related patterns
    BFF(Backends For Frontends)- Using Integrated APIs
    SSR(Server-Side Rendering)- SWA does not support
    12

    View Slide

  13. SPA with Azure Static Web Apps
    Deployment of SPA does not require customize YAML
    Some cases require fallback setting( routes.json )
    Fallback routes with Azure Static Web Apps
    13

    View Slide

  14. SSG - Static Site Generator
    Pre-Rendering Dynamic contents and generate static files
    Jekyll, Gatsby, HUGO, Next.js, Nuxt.js etc.
    14

    View Slide

  15. SSG (Git-based SSG)
    Content is managed in a Git repos
    Update the contents via Markdown etc
    Not required database or CMS server
    15

    View Slide

  16. SSG by nuxt/content
    Git-based Headless CMS modules by Nuxt.js -> Official site
    Store article files in the content/ directory
    Vue components available in markdown(︕)
    16

    View Slide

  17. Demo: SSG
    Nuxt.js
    write an article with Nuxt/Content
    Create static files by reflecting changes
    on GitHub Actions Workflow
    17

    View Slide

  18. SSG(Git-based) + Azure Static Web Apps
    Customize generated GitHub Actions YAML
    app_build_command : call framework-specified generate command
    18

    View Slide

  19. JAM Stack(API-based SSG)
    Update content in Headless CMS provided admin panel
    Getting content from the CMS APIs in build workflow
    Non-developers can easily update content
    19

    View Slide

  20. Contentful
    One of leading Headless CMS service -> Official site
    Content management UI is provided and content is retrieved via API
    More sites are migrating CMS from WordPress to Contentful
    20

    View Slide

  21. Demo: JAM Stack
    Nuxt.js
    Contentful
    21

    View Slide

  22. JAM Stack + Azure Static Web Apps
    A bug that existed in the initial preview has been fixed!
    The Issue that existed early in the preview has been resolved!
    Configure YAML to run GitHub Actions with a webhook trigger
    22

    View Slide

  23. BFF on Azure Static Web Apps
    BFF (APIs) can exist in SWA repository
    Implement with Azure Functions (Node.js)
    23

    View Slide

  24. SSR(Server-Side Rendering) on Azure
    Azure Static Web Apps has not supported yet
    Use App Service Web Apps (Linux) : Reference
    24

    View Slide

  25. Wrap Up
    Azure Static Web Apps simplify the Front-end Web implementation
    Hosting environment optimized for a static website
    CI/CD integrated with GitHub Actions
    Serverless APIs integration by Azure Functions
    Azure Static Web Apps Supports for Front-end Web patterns
    Build modern JavaScript applications with SPA frameworks and libraries
    like Angular, React, Svelte, Vue.
    Publish static sites with frameworks like Gatsby, Hugo, Nuxt.js.
    25

    View Slide

  26. References
    Docs
    https://docs.microsoft.com/en-us/azure/static-web-apps/
    Learn
    https://docs.microsoft.com/en-us/learn/modules/publish-app-service-
    static-web-app-api/
    https://docs.microsoft.com/ja-jp/learn/modules/create-deploy-static-
    webapp-gatsby-app-service/
    de:code 2020
    https://www.youtube.com/watch?v=hUL44iVIiks 26

    View Slide

  27. fin.
    Thank you for listening︕
    27

    View Slide