Front-end web applications with Azure Static Web Apps Virtual Azure Community Day 2020 Kazuyuki Miyake 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Demo: JAM Stack Nuxt.js Contentful 21

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

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

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

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

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

fin. Thank you for listening︕ 27