Pro Yearly is on sale from $80 to $50! »

Front-end web applications with Azure Static Web Apps

Ff7f1f76468f46a1c5c84b9238a4b162?s=47 miyake
July 28, 2020

Front-end web applications with Azure Static Web Apps

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

Ff7f1f76468f46a1c5c84b9238a4b162?s=128

miyake

July 28, 2020
Tweet

Transcript

  1. Front-end web applications with Azure Static Web Apps Virtual Azure

    Community Day 2020 Kazuyuki Miyake 1
  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
  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
  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
  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
  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
  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
  8. Pre-production environments Can review Pull Requests in deployed environment Triggered

    by PR, a staged version is automatically deployed 8
  9. Serverless APIs integration by Azure Functions Integrate APIs as BFF

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

    static files Jekyll, Gatsby, HUGO, Next.js, Nuxt.js etc. 14
  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
  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
  17. Demo: SSG Nuxt.js write an article with Nuxt/Content Create static

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

    YAML app_build_command : call framework-specified generate command 18
  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
  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
  21. Demo: JAM Stack Nuxt.js Contentful 21

  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
  23. BFF on Azure Static Web Apps BFF (APIs) can exist

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

    supported yet Use App Service Web Apps (Linux) : Reference 24
  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
  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
  27. fin. Thank you for listening︕ 27