Azure Static Web Apps

1. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Brought to you by:
Global Azure 2022
BY THE COMMUNITY | FOR THE COMMUNITY

2. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Azure Static Web Apps
Kalpesh Satasiya

3. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
@satasiyakalpesh
https://www.facebook.com/satasiyakalpesh
https://bit.ly/3MZK1hr
Satasiya.kalpesh2006@gmail.com
Kalpesh Satasiya

4. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Agenda
• Intro to Azure Static Web Apps
• Azure Static Web Apps – Extension for VS Code
• DEMO - Create a Azure Static Web App in Angular and
Deployed on Azure

5. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Web

6. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Web

7. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Web

8. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Web

9. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Web

10. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Web – Static Web Apps

11. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group

12. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
What is Azure Static Web Apps?
• Azure Static Web Apps is a service that automatically builds and
deploys full stack web apps to Azure from a code repository.

13. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Key features
• Web hosting - for static content like HTML, CSS, JavaScript, and images.
• Integrated API - support provided by Azure Functions with the option to
link an existing Azure Functions app using a standard account.
• First-class GitHub and Azure DevOps integration - where repository
changes trigger builds and deployments.

14. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Key features
• 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.

15. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Key features
• Authentication provider integrations with Azure Active Directory,
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.

16. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
What you can do with Static Web Apps
• Build modern web applications with JavaScript frameworks and libraries
like Angular, React, Svelte, Vue, or using Blazor to create WebAssembly
applications, with an Azure Functions back-end.
• Publish static sites with frameworks like Gatsby, Hugo, VuePress.
• Deploy web applications with frameworks like Next.js and Nuxt.js.

17. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
DEMO
• VS Code Extension and DEMO

18. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
Reference
• https://azure.microsoft.com/en-us/services/app-service/static/#overview
• https://docs.microsoft.com/en-us/azure/static-web-apps/overview

19. @M365Ahmedabad @AhmedabadUsrGrp #GlobalAzure M365 Ahmedabad User Group | Ahmedabad User Group
THANK YOU !