Deploying your static web app to the Cloud

Deploying your static web app to the Cloud

• 1.
  Deploying your static web app ChrisNoring, Senior Cloud Developer Advocate @Chris_Noring
• 2.
  Static app vsWeb App • No resolve process, just • HTML • CSS • JavaScript @chris_noring • Dynamic pages • Resolve with call to backend • Produces: • HTML • CSS • JavaScript • Static pages Web AppStatic App
• 3.
  How do wecreate ? • SPA frameworks like • React • Angular • Vue • Svelte @chris_noring Web app • Static site generators like • VuePress • Gatsby • Scully Static app
• 4.
  The jamstack It’s notabout technologies but - Prerendering files, serve from CDN WHY & WHAT YOU GET - better performance, - higher security, - lower cost of scaling, - better developer experience YOU CAN ENHANCE THEM - Pre-rendered sites can be enhanced with JavaScript and the growing capabilities of browsers and services available via APIs https://jamstack.org/ @chris_noring
• 5.
  Traditional apps vsJamStack Frontend Backend DB Page load when: 1. Page talks to backend 2. Backend talks to DB 3. Rendering Static app API API Frontend Pre rendering DB YAML JSON Markup JAMSTACK 1. 2. @chris_noring Static app Static appCDN
• 6.
  Deploying a Jamstack •The parts • The static app • The API ? • Things to consider • Fallback routes • Auth? • Prep to deploy (build step/s) @chris_noring
• 7.
  Azure Static WebApps service • Web hosting for static content like HTML, CSS, JavaScript, and images. • Integrated API support provided by Azure Functions. • First-party GitHub integration where repository changes trigger builds and deployments. • Globally distributed static content, putting content closer to your users. • Free SSL certificates, which are automatically renewed. • Custom domains* to provide branded customizations to your app. • Seamless security model with a reverse-proxy when calling APIs, which requires no CORS configuration. • Authentication provider integrations with Azure Active Directory, Facebook, Google, GitHub, and Twitter. • Customizable authorization role definition and assignments. • Back-end routing rules enabling full control over the content and routes you serve. • Generated staging versions powered by pull requests enabling preview versions of your site before publishing. @chris_noring
• 8.
  DEMO - deploy
• 9.
  Use Static webapps service, review the resource @chris_noring
• 10.
  Workflow file @chris_noring
• 11.
  DEMO – addAPI
• 12.
  Auth, inivitation • Generate • Selectprovider • Add username or email address • Select domain (the custom domain) • Add roles, admin, user etc (comma separated) • Enter invitation validity in hours • Generate a link • Invite • Send generated link • Login • Recipient is prompted to login with their login of chosen provider type @chris_noring
• 14.
  Auth, how toimplement <a href="/.auth/login/github">Login</a> “routes”: [{ "route": "/login", "serve": "/.auth/login/github" }] routes.json Send user to login page <a href="/.auth/logout">Log out</a> Have user logout with a link like this post_login_redirect_uri= <send user here> Set this query parameter if you want to send user To a specific route after login
• 15.
  Auth, get logged-ininfo async function getUserInfo() { const response = await fetch("/.auth/me"); const payload = await response.json(); const { clientPrincipal } = payload; return clientPrincipal; } console.log(getUserInfo()); { "identityProvider": "facebook", "userId": "d75b260a64504067bfc5b2905e3b8182", "userDetails": "user@example.com", "userRoles": [ "anonymous", "authenticated" ] }
• 16.
  Auth, logged-in info,from API module.exports = async function (context, req) { const header = req.headers["x-ms-client-principal"]; const encoded = Buffer.from(header, "base64"); const decoded = encoded.toString("ascii"); context.res = { body: { clientPrincipal: JSON.parse(decoded) } }; };
• 17.
  Restict access basedon role and route { "route": "/profile", "allowedRoles": ["authenticated"] } { "routes": [ { "route": "/profile", "allowedRoles": ["authenticated"] }, { "route": "/admin/*", "allowedRoles": ["administrator"] }, { "route": "/api/admin", "allowedRoles": ["administrator"] }, { "route": "/customers/contoso", "allowedRoles": ["administrator", "customers_contoso"] }, { "route": "/login", "serve": "/.auth/login/github" }, { "route": "/.auth/login/twitter", "statusCode": "404" }, { "route": "/logout", "serve": "/.auth/logout" }, { "route": "/calendar/*", "serve": "/calendar.html" }]
• 18.
  Summary • Static apps,just HTML, CSS, JS, secure, small and fast to load • Web Apps, has backend, resolves when it’s requested, can never be as fast as above • Static Web Apps, • can help you deploy both types of app • Supports Azure Function as API • Supports Auth with AAD, Azure Active Directory and social logins like Twitter, Facebook, GitHub et al @chris_noring
• 19.
  Learn more • Aka.ms/swadocs, Overview page • Getting blazor to work on Static Web Apps https://timheuer.com/blog/category/blazor • LEARN module, Gatsby + SWA, https://docs.microsoft.com/en- us/learn/modules/create-deploy-static-webapp-gatsby-app-service/ • LEARN module, SPA deploy (Angular, React, Vue, Svelte), https://docs.microsoft.com/en-us/learn/modules/publish-app-service-static- web-app-api • Securing your app, https://docs.microsoft.com/en-gb/azure/static-web- apps/authentication-authorization AAD + Social login @chris_noring