shows deploying to Azure using the Static web apps service.. Shows adding an API and things like fallback routes . Also security is covered

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

8. DEMO - deploy

9. Use Static web apps service, review the resource
@chris_noring

10. Workflow file
@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": "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 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