SlideShare una empresa de Scribd logo
1 de 19
Descargar para leer sin conexión
Deploying
your static
web app
Chris Noring, Senior Cloud
Developer Advocate
@Chris_Noring
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
How do we create ?
• SPA frameworks like
• React
• Angular
• Vue
• Svelte
@chris_noring
Web app
• Static site generators like
• VuePress
• Gatsby
• Scully
Static app
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
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
Deploying a Jamstack
• The parts
• The static app
• The API ?
• Things to consider
• Fallback routes
• Auth?
• Prep to deploy (build step/s)
@chris_noring
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
DEMO - deploy
Use Static web apps service, review the resource
@chris_noring
Workflow file
@chris_noring
DEMO – add API
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
Deploying your static web app to the Cloud
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
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" ]
}
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)
}
};
};
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"
}]
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
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

Más contenido relacionado

La actualidad más candente

Introduction to the SharePoint Client Object Model and REST API
Introduction to the SharePoint Client Object Model and REST APIIntroduction to the SharePoint Client Object Model and REST API
Introduction to the SharePoint Client Object Model and REST APIRob Windsor
 
SharePoint and Office Development Workshop
SharePoint and Office Development WorkshopSharePoint and Office Development Workshop
SharePoint and Office Development WorkshopEric Shupps
 
SPUnite17 Who Are You and What Do You Want
SPUnite17 Who Are You and What Do You WantSPUnite17 Who Are You and What Do You Want
SPUnite17 Who Are You and What Do You WantNCCOMMS
 
Rest Security with JAX-RS
Rest Security with JAX-RSRest Security with JAX-RS
Rest Security with JAX-RSFrank Kim
 
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST API
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST APISPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST API
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST APIEric Shupps
 
Building API in the cloud using Azure Functions
Building API in the cloud using Azure FunctionsBuilding API in the cloud using Azure Functions
Building API in the cloud using Azure FunctionsAleksandar Bozinovski
 
Building SharePoint Single Page Applications Using AngularJS
Building SharePoint Single Page Applications Using AngularJSBuilding SharePoint Single Page Applications Using AngularJS
Building SharePoint Single Page Applications Using AngularJSSharePointInstitute
 
SPTECHCON - Rev Your Engines - SharePoint 2013 Performance Enhancements
SPTECHCON - Rev Your Engines - SharePoint 2013 Performance EnhancementsSPTECHCON - Rev Your Engines - SharePoint 2013 Performance Enhancements
SPTECHCON - Rev Your Engines - SharePoint 2013 Performance EnhancementsEric Shupps
 
Share point 2010 performance and capacity planning best practices
Share point 2010 performance and capacity planning best practicesShare point 2010 performance and capacity planning best practices
Share point 2010 performance and capacity planning best practicesEric Shupps
 
Spsdc 2014 o365_power_shell_csom_amitv
Spsdc 2014 o365_power_shell_csom_amitvSpsdc 2014 o365_power_shell_csom_amitv
Spsdc 2014 o365_power_shell_csom_amitvamitvasu
 
O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azur...
O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azur...O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azur...
O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azur...NCCOMMS
 
SharePoint 2013 Javascript Object Model
SharePoint 2013 Javascript Object ModelSharePoint 2013 Javascript Object Model
SharePoint 2013 Javascript Object ModelInnoTech
 
Web API 2 Token Based Authentication
Web API 2 Token Based AuthenticationWeb API 2 Token Based Authentication
Web API 2 Token Based Authenticationjeremysbrown
 
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...Chris O'Brien
 
Share point hosted add ins munich
Share point hosted add ins munichShare point hosted add ins munich
Share point hosted add ins munichSonja Madsen
 
Cloud Dev with Azure Functions - DogFoodCon 2018 - Brian T Jackett
Cloud Dev with Azure Functions - DogFoodCon 2018 - Brian T JackettCloud Dev with Azure Functions - DogFoodCon 2018 - Brian T Jackett
Cloud Dev with Azure Functions - DogFoodCon 2018 - Brian T JackettBrian T. Jackett
 
Spsct15 power shell_csom - amit vasu
Spsct15 power shell_csom - amit vasuSpsct15 power shell_csom - amit vasu
Spsct15 power shell_csom - amit vasuamitvasu
 
Office 365 Directory Synchronization
Office 365 Directory SynchronizationOffice 365 Directory Synchronization
Office 365 Directory Synchronizationamitvasu
 

La actualidad más candente (20)

Introduction to the SharePoint Client Object Model and REST API
Introduction to the SharePoint Client Object Model and REST APIIntroduction to the SharePoint Client Object Model and REST API
Introduction to the SharePoint Client Object Model and REST API
 
SharePoint and Office Development Workshop
SharePoint and Office Development WorkshopSharePoint and Office Development Workshop
SharePoint and Office Development Workshop
 
SPUnite17 Who Are You and What Do You Want
SPUnite17 Who Are You and What Do You WantSPUnite17 Who Are You and What Do You Want
SPUnite17 Who Are You and What Do You Want
 
Rest Security with JAX-RS
Rest Security with JAX-RSRest Security with JAX-RS
Rest Security with JAX-RS
 
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST API
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST APISPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST API
SPTECHCON - Get Some REST - Taking Advantage of the SharePoint 2013 REST API
 
Building API in the cloud using Azure Functions
Building API in the cloud using Azure FunctionsBuilding API in the cloud using Azure Functions
Building API in the cloud using Azure Functions
 
Building SharePoint Single Page Applications Using AngularJS
Building SharePoint Single Page Applications Using AngularJSBuilding SharePoint Single Page Applications Using AngularJS
Building SharePoint Single Page Applications Using AngularJS
 
[Roine] Serverless: Don't Take It Literally
[Roine] Serverless: Don't Take It Literally[Roine] Serverless: Don't Take It Literally
[Roine] Serverless: Don't Take It Literally
 
SPTECHCON - Rev Your Engines - SharePoint 2013 Performance Enhancements
SPTECHCON - Rev Your Engines - SharePoint 2013 Performance EnhancementsSPTECHCON - Rev Your Engines - SharePoint 2013 Performance Enhancements
SPTECHCON - Rev Your Engines - SharePoint 2013 Performance Enhancements
 
Share point 2010 performance and capacity planning best practices
Share point 2010 performance and capacity planning best practicesShare point 2010 performance and capacity planning best practices
Share point 2010 performance and capacity planning best practices
 
Spsdc 2014 o365_power_shell_csom_amitv
Spsdc 2014 o365_power_shell_csom_amitvSpsdc 2014 o365_power_shell_csom_amitv
Spsdc 2014 o365_power_shell_csom_amitv
 
O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azur...
O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azur...O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azur...
O365Con18 - Connect SharePoint Framework Solutions to API's secured with Azur...
 
SharePoint 2013 Javascript Object Model
SharePoint 2013 Javascript Object ModelSharePoint 2013 Javascript Object Model
SharePoint 2013 Javascript Object Model
 
Web API 2 Token Based Authentication
Web API 2 Token Based AuthenticationWeb API 2 Token Based Authentication
Web API 2 Token Based Authentication
 
Firebase hosting
Firebase hostingFirebase hosting
Firebase hosting
 
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...
Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...
 
Share point hosted add ins munich
Share point hosted add ins munichShare point hosted add ins munich
Share point hosted add ins munich
 
Cloud Dev with Azure Functions - DogFoodCon 2018 - Brian T Jackett
Cloud Dev with Azure Functions - DogFoodCon 2018 - Brian T JackettCloud Dev with Azure Functions - DogFoodCon 2018 - Brian T Jackett
Cloud Dev with Azure Functions - DogFoodCon 2018 - Brian T Jackett
 
Spsct15 power shell_csom - amit vasu
Spsct15 power shell_csom - amit vasuSpsct15 power shell_csom - amit vasu
Spsct15 power shell_csom - amit vasu
 
Office 365 Directory Synchronization
Office 365 Directory SynchronizationOffice 365 Directory Synchronization
Office 365 Directory Synchronization
 

Similar a Deploying your static web app to the Cloud

MongoDB.local Dallas 2019: Pissing Off IT and Delivery: A Tale of 2 ODS's
MongoDB.local Dallas 2019: Pissing Off IT and Delivery: A Tale of 2 ODS'sMongoDB.local Dallas 2019: Pissing Off IT and Delivery: A Tale of 2 ODS's
MongoDB.local Dallas 2019: Pissing Off IT and Delivery: A Tale of 2 ODS'sMongoDB
 
MongoDB World 2019: Securing Application Data from Day One
MongoDB World 2019: Securing Application Data from Day OneMongoDB World 2019: Securing Application Data from Day One
MongoDB World 2019: Securing Application Data from Day OneMongoDB
 
Serverless identity management, authentication, and authorization - SDD405-R ...
Serverless identity management, authentication, and authorization - SDD405-R ...Serverless identity management, authentication, and authorization - SDD405-R ...
Serverless identity management, authentication, and authorization - SDD405-R ...Amazon Web Services
 
AWS as platform for scalable applications
AWS as platform for scalable applicationsAWS as platform for scalable applications
AWS as platform for scalable applicationsRoman Gomolko
 
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...Naoki (Neo) SATO
 
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013Kiril Iliev
 
Going Serverless with Azure Functions
Going Serverless with Azure FunctionsGoing Serverless with Azure Functions
Going Serverless with Azure FunctionsShahed Chowdhuri
 
Building APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformBuilding APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformAntonio Peric-Mazar
 
윈도 닷넷 개발자를 위한 솔루션 클라우드 데브옵스 솔루션
윈도 닷넷 개발자를 위한 솔루션 클라우드 데브옵스 솔루션윈도 닷넷 개발자를 위한 솔루션 클라우드 데브옵스 솔루션
윈도 닷넷 개발자를 위한 솔루션 클라우드 데브옵스 솔루션Amazon Web Services Korea
 
Analytics, Authentication and Data with AWS Amplify - MBL403 - re:Invent 2017
Analytics, Authentication and Data with  AWS Amplify - MBL403 - re:Invent 2017Analytics, Authentication and Data with  AWS Amplify - MBL403 - re:Invent 2017
Analytics, Authentication and Data with AWS Amplify - MBL403 - re:Invent 2017Amazon Web Services
 
Behavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using CucumberBehavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using CucumberKMS Technology
 
SRV418 Deep Dive on Accelerating Content, APIs, and Applications with Amazon ...
SRV418 Deep Dive on Accelerating Content, APIs, and Applications with Amazon ...SRV418 Deep Dive on Accelerating Content, APIs, and Applications with Amazon ...
SRV418 Deep Dive on Accelerating Content, APIs, and Applications with Amazon ...Amazon Web Services
 
Build an AI/ML-driven image archive processing workflow: Image archive, analy...
Build an AI/ML-driven image archive processing workflow: Image archive, analy...Build an AI/ML-driven image archive processing workflow: Image archive, analy...
Build an AI/ML-driven image archive processing workflow: Image archive, analy...wesley chun
 
SFDC Inbound Integrations
SFDC Inbound IntegrationsSFDC Inbound Integrations
SFDC Inbound IntegrationsSujit Kumar
 
Integrating Jira Software Cloud With the AWS Code Suite
Integrating Jira Software Cloud With the AWS Code SuiteIntegrating Jira Software Cloud With the AWS Code Suite
Integrating Jira Software Cloud With the AWS Code SuiteAtlassian
 
MongoDB.local Sydney: Evolving your Data Access with MongoDB Stitch
MongoDB.local Sydney: Evolving your Data Access with MongoDB StitchMongoDB.local Sydney: Evolving your Data Access with MongoDB Stitch
MongoDB.local Sydney: Evolving your Data Access with MongoDB StitchMongoDB
 
Chris O'Brien - Best bits of Azure for Office 365/SharePoint developers
Chris O'Brien - Best bits of Azure for Office 365/SharePoint developersChris O'Brien - Best bits of Azure for Office 365/SharePoint developers
Chris O'Brien - Best bits of Azure for Office 365/SharePoint developersChris O'Brien
 

Similar a Deploying your static web app to the Cloud (20)

MongoDB.local Dallas 2019: Pissing Off IT and Delivery: A Tale of 2 ODS's
MongoDB.local Dallas 2019: Pissing Off IT and Delivery: A Tale of 2 ODS'sMongoDB.local Dallas 2019: Pissing Off IT and Delivery: A Tale of 2 ODS's
MongoDB.local Dallas 2019: Pissing Off IT and Delivery: A Tale of 2 ODS's
 
MongoDB World 2019: Securing Application Data from Day One
MongoDB World 2019: Securing Application Data from Day OneMongoDB World 2019: Securing Application Data from Day One
MongoDB World 2019: Securing Application Data from Day One
 
Serverless identity management, authentication, and authorization - SDD405-R ...
Serverless identity management, authentication, and authorization - SDD405-R ...Serverless identity management, authentication, and authorization - SDD405-R ...
Serverless identity management, authentication, and authorization - SDD405-R ...
 
AWS as platform for scalable applications
AWS as platform for scalable applicationsAWS as platform for scalable applications
AWS as platform for scalable applications
 
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...
[Serverless Meetup Tokyo #3] Serverless in Azure (Azure Functionsのアップデート、事例、デ...
 
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
 
Workshop: We love APIs
Workshop: We love APIsWorkshop: We love APIs
Workshop: We love APIs
 
Going Serverless with Azure Functions
Going Serverless with Azure FunctionsGoing Serverless with Azure Functions
Going Serverless with Azure Functions
 
Building APIs in an easy way using API Platform
Building APIs in an easy way using API PlatformBuilding APIs in an easy way using API Platform
Building APIs in an easy way using API Platform
 
윈도 닷넷 개발자를 위한 솔루션 클라우드 데브옵스 솔루션
윈도 닷넷 개발자를 위한 솔루션 클라우드 데브옵스 솔루션윈도 닷넷 개발자를 위한 솔루션 클라우드 데브옵스 솔루션
윈도 닷넷 개발자를 위한 솔루션 클라우드 데브옵스 솔루션
 
Analytics, Authentication and Data with AWS Amplify - MBL403 - re:Invent 2017
Analytics, Authentication and Data with  AWS Amplify - MBL403 - re:Invent 2017Analytics, Authentication and Data with  AWS Amplify - MBL403 - re:Invent 2017
Analytics, Authentication and Data with AWS Amplify - MBL403 - re:Invent 2017
 
Behavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using CucumberBehavior Driven Development and Automation Testing Using Cucumber
Behavior Driven Development and Automation Testing Using Cucumber
 
SRV418 Deep Dive on Accelerating Content, APIs, and Applications with Amazon ...
SRV418 Deep Dive on Accelerating Content, APIs, and Applications with Amazon ...SRV418 Deep Dive on Accelerating Content, APIs, and Applications with Amazon ...
SRV418 Deep Dive on Accelerating Content, APIs, and Applications with Amazon ...
 
Build an AI/ML-driven image archive processing workflow: Image archive, analy...
Build an AI/ML-driven image archive processing workflow: Image archive, analy...Build an AI/ML-driven image archive processing workflow: Image archive, analy...
Build an AI/ML-driven image archive processing workflow: Image archive, analy...
 
SFDC Inbound Integrations
SFDC Inbound IntegrationsSFDC Inbound Integrations
SFDC Inbound Integrations
 
Integrating Jira Software Cloud With the AWS Code Suite
Integrating Jira Software Cloud With the AWS Code SuiteIntegrating Jira Software Cloud With the AWS Code Suite
Integrating Jira Software Cloud With the AWS Code Suite
 
MongoDB.local Sydney: Evolving your Data Access with MongoDB Stitch
MongoDB.local Sydney: Evolving your Data Access with MongoDB StitchMongoDB.local Sydney: Evolving your Data Access with MongoDB Stitch
MongoDB.local Sydney: Evolving your Data Access with MongoDB Stitch
 
Chris O'Brien - Best bits of Azure for Office 365/SharePoint developers
Chris O'Brien - Best bits of Azure for Office 365/SharePoint developersChris O'Brien - Best bits of Azure for Office 365/SharePoint developers
Chris O'Brien - Best bits of Azure for Office 365/SharePoint developers
 
06 web api
06 web api06 web api
06 web api
 
Fire up your mobile app!
Fire up your mobile app!Fire up your mobile app!
Fire up your mobile app!
 

Más de Christoffer Noring (20)

Azure signalR
Azure signalRAzure signalR
Azure signalR
 
Game dev 101 part 3
Game dev 101 part 3Game dev 101 part 3
Game dev 101 part 3
 
Game dev 101 part 2
Game dev 101   part 2Game dev 101   part 2
Game dev 101 part 2
 
Game dev workshop
Game dev workshopGame dev workshop
Game dev workshop
 
IaaS with ARM templates for Azure
IaaS with ARM templates for AzureIaaS with ARM templates for Azure
IaaS with ARM templates for Azure
 
Learning Svelte
Learning SvelteLearning Svelte
Learning Svelte
 
Ng spain
Ng spainNg spain
Ng spain
 
Angular Schematics
Angular SchematicsAngular Schematics
Angular Schematics
 
Design thinking
Design thinkingDesign thinking
Design thinking
 
Keynote ijs
Keynote ijsKeynote ijs
Keynote ijs
 
Vue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and VuexVue fundamentasl with Testing and Vuex
Vue fundamentasl with Testing and Vuex
 
Ngrx slides
Ngrx slidesNgrx slides
Ngrx slides
 
Kendoui
KendouiKendoui
Kendoui
 
Angular mix chrisnoring
Angular mix chrisnoringAngular mix chrisnoring
Angular mix chrisnoring
 
Nativescript angular
Nativescript angularNativescript angular
Nativescript angular
 
Graphql, REST and Apollo
Graphql, REST and ApolloGraphql, REST and Apollo
Graphql, REST and Apollo
 
Angular 2 introduction
Angular 2 introductionAngular 2 introduction
Angular 2 introduction
 
Rxjs vienna
Rxjs viennaRxjs vienna
Rxjs vienna
 
Rxjs marble-testing
Rxjs marble-testingRxjs marble-testing
Rxjs marble-testing
 
React lecture
React lectureReact lecture
React lecture
 

Último

Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houstonjennysmithusa549
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckNaval Singh
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...Maxim Salnikov
 
MinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young EntrepreneurMinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young EntrepreneurPriyadarshini T
 
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfFlutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfMind IT Systems
 
Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridMathew Thomas
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevpmgdscunsri
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsconfluent
 
renewable energy renewable energy renewable energy renewable energy
renewable energy renewable energy renewable energy  renewable energyrenewable energy renewable energy renewable energy  renewable energy
renewable energy renewable energy renewable energy renewable energyjeyasrig
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easymichealwillson701
 
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Inc
 
MUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsMUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsUniversity of Antwerp
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdfOffsiteNOC
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleShane Coughlan
 
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...telebusocialmarketin
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...jackiepotts6
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern
 
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...MyFAA
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptxAGATSoftware
 

Último (20)

Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houston
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deck
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
 
20140812 - OBD2 Solution
20140812 - OBD2 Solution20140812 - OBD2 Solution
20140812 - OBD2 Solution
 
MinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young EntrepreneurMinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
 
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfFlutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
 
Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM Grid
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insights
 
renewable energy renewable energy renewable energy renewable energy
renewable energy renewable energy renewable energy  renewable energyrenewable energy renewable energy renewable energy  renewable energy
renewable energy renewable energy renewable energy renewable energy
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easy
 
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
 
MUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsMUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow Models
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scale
 
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data Mesh
 
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
Take Advantage of Mx Tracking Flight Scheduling Solutions to Streamline Your ...
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
 

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
  • 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

Notas del editor

  1. We have static pages in both cases but Web App is a more complicated thing with A resolve process A backend
  2. 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
  3. 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
  4. 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.
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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.
  10. 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
  11. Settings > Role Management > Invite
  12. 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
  13. 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
  14. If you are in the API and wants to know who the user is, what authorization they have
  15. 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