Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-end web applications with Azure Static Web Apps

July 28, 2020

Front-end web applications with Azure Static Web Apps

Session materials for Virtual Azure Community Day 2020


July 28, 2020

More Decks by miyake

Other Decks in Technology


  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. Serverless APIs integration by Azure Functions Integrate APIs as BFF

    (Backends For Frontends) Api route available without CORS 9
  8. 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
  9. 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
  10. 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
  11. 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
  12. SSG - Static Site Generator Pre-Rendering Dynamic contents and generate

    static files Jekyll, Gatsby, HUGO, Next.js, Nuxt.js etc. 14
  13. SSG (Git-based SSG) Content is managed in a Git repos

    Update the contents via Markdown etc Not required database or CMS server 15
  14. 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
  15. Demo: SSG Nuxt.js write an article with Nuxt/Content Create static

    files by reflecting changes on GitHub Actions Workflow 17
  16. SSG(Git-based) + Azure Static Web Apps Customize generated GitHub Actions

    YAML app_build_command : call framework-specified generate command 18
  17. 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
  18. 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
  19. 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
  20. BFF on Azure Static Web Apps BFF (APIs) can exist

    in SWA repository Implement with Azure Functions (Node.js) 23
  21. SSR(Server-Side Rendering) on Azure Azure Static Web Apps has not

    supported yet Use App Service Web Apps (Linux) : Reference 24
  22. 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