Deploying your static web app to the Cloud
Download as PPTX, PDF0 likes297 views
The document discusses the differences between static and dynamic web applications, emphasizing the advantages of static apps, such as improved performance, security, and cost-efficiency due to their deployment on a CDN. It highlights the Azure Static Web Apps service, which provides thorough support for hosting, API integration, and authentication with various providers, enabling developers to create and deploy secure applications. Additionally, the document outlines how to implement authentication and create routes based on user roles within static web apps.
![Auth, how to implement
<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](https://image.slidesharecdn.com/deployingyourstaticwebapp-novideo-200805181959/85/Deploying-your-static-web-app-to-the-Cloud-14-320.jpg)
![Auth, get logged-in info
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" ]
}](https://image.slidesharecdn.com/deployingyourstaticwebapp-novideo-200805181959/85/Deploying-your-static-web-app-to-the-Cloud-15-320.jpg)
![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)
}
};
};](https://image.slidesharecdn.com/deployingyourstaticwebapp-novideo-200805181959/85/Deploying-your-static-web-app-to-the-Cloud-16-320.jpg)
![Restict access based on 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"
}]](https://image.slidesharecdn.com/deployingyourstaticwebapp-novideo-200805181959/85/Deploying-your-static-web-app-to-the-Cloud-17-320.jpg)
Deploying your static web app to the Cloud
- 1. Deploying your static web app Chris Noring, Senior Cloud Developer Advocate @Chris_Noring
- 2. Static app vs Web 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 we create ? • 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 not about 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 vs JamStack 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 Web Apps 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
- 9. Use Static web apps service, review the resource @chris_noring
- 11. DEMO – add API
- 12. Auth, inivitation • Generate • Select provider • 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 to implement <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-in info 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": "[email protected]", "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 based on 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
Editor's Notes
- #3: We have static pages in both cases but Web App is a more complicated thing with A resolve process A backend
- #4: Static app, can also use a Backend, like an API, but at build time, not resolved Just in Time The idea is to talk to APIs and via static content, render HTML pages that don’t change
- #5: Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers. WHAT YOU GET better performance, - pre rendered higher security, - there’s no backend lower cost of scaling, - using CDN 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
- #6: What does this look like in practice? The traditional Web App serves pages by Talking to a backend Fetch data Render a finished page The JamStack, creates everything at build time It also scales by placing copies of the static pages on various Servers, part of a CDN, Content delivery network to ensure scaling.
- #7: The static app Deploying JamStack is easy, it’s just static files, you an deploy them anywhere like: GitHub A Web hotel Cloud storage like Blob storage The API If the API is a separate thing then you don’t need to worry, but IF the API is something that goes with the site then you need to consider how: Serverless, App Service Routing SPA apps needs to think about fallback routes, because of how the routing work Auth Auth, we might all kinds of solutions here like Identity Server or some kind of OAuth like JWT based
- #8: Azure static web app service enables us to easy deploy our web apps and static apps to the Cloud in minutes. 1. Deploy static sites like Gatsby Hugo, VuePress 2. Deploy web apps built with Next, Nuxt, 3. Build and deploy Modern JavaScript Apps built with Angular, React, Vue, Svelte
- #9: The idea here is to show how we can take a React application and easily deploy it Go to portal, enter static web apps Project details, fill in Subscription Resource group Static Web App details Name Region SKU Sign in with GitHub Enter source control details Organization Repository Branch Click Next > Build Build App location, where’s the app root or subfolder API location, usually API App artifact location, what directory does it build to <app location>/build for example Review & Create, select Create Go to resource
- #10: Remember that Azure portal page? URL is where we find our app Workflow file, this is the YAML file that contains instructions for how to build and deploy your app Let’s take a closer look on the Workflow file
- #11: This workflow file was added to our repo, with it we can When it’s triggered, Change when it’s triggered Change our selections, Change things like app_location, api_location, app_artifact_location We can do all sorts of adjustment it’s our YAML build file. E.g make it work for Blazor for example.
- #12: Build an API Create a function app Configure local.dev.settings + Cors React App Configure proxy Call API locally Deploy Just add changes to Git Push code Go to GitHub View page
- #13: Settings > Role Management > Invite
- #15: Here’s how you can set things up in your app Login link Add entry in routes.json so we know what provider is being used Logout link Redirect param on login link, to ensure they end where you want
- #16: How do we know if user is logged in? We check, via this API call, /.auth/me We can also check user roles that way
- #17: If you are in the API and wants to know who the user is, what authorization they have
- #18: Specify the route and the role/s it should allow for On the right, a more real example of how an app should be configured authenticated, built-in administrator 404 login, logout routes