14
10 Things To Know About Azure Static Web Apps 🎉
Here are 10 things to know to get started with Azure Static Web Apps!
Wassim Chegham@manekinekko
01–What's Azure Static Web Apps?
@AzureStaticApps is a service that automatically builds and deploys full-stack web apps to Azure (with a serverless Azure Functions API) from GitHub and DevOps repositories.
✅ Build
✅ Deploy
✅ Publish
📎 aka.ms/twitter-learn-…11:05 AM - 02 Apr 2021
Wassim Chegham@manekinekko02–What contents can be deployed to Azure SWA?
@AzureStaticApps offers web hosting for static content like HTML, CSS, JavaScript, and images. Content that's generated by tools like Scully, Gatsby, Jekyll, or NuxtJS can also be published to Azure SWA.
📎 aka.ms/twitter-learn-…11:05 AM - 02 Apr 2021
Wassim Chegham@manekinekko03–Does Azure SWA support serverless APIs?
Serverless APIs can be used with @AzureStaticApps via integration with Azure Functions. If Azure SWA detects an /api folder, it will automatically build and deploy the API.
📎 aka.ms/twitter-learn-…11:05 AM - 02 Apr 2021
Wassim Chegham@manekinekko04–How does Azure SWA work?
@AzureStaticApps comes with GitHub and Azure Pipelines integration and automatically generates a workflow config in the repository, watching changes to trigger builds and deployments, to prod and pre-prod environments.
📎aka.ms/twitter-learn-…11:05 AM - 02 Apr 2021
Wassim Chegham@manekinekko05–What dev tools does Azure SWA support?
@AzureStaticApps publishes content to a prod environment by building apps from a repository. It can deploy a web app using:
✅ Visual Studio Code extension
✅ Azure portal
✅ Azure CLI
✅ SWA CLI
📎 aka.ms/twitter-learn-…11:05 AM - 02 Apr 2021
Wassim Chegham@manekinekko06–How about custom domain names?
@AzureStaticApps provides by default an auto-generated domain name. Adding a custom domain is supported and comes with free SSL certificates, which are automatically renewed.
📎 aka.ms/twitter-learn-…11:05 AM - 02 Apr 2021
Wassim Chegham@manekinekko07–How to configure an SWA app?
Config is defined in the staticwebapp.config.json file to control:
✅ Routing
✅ Authentication
✅ Authorization
✅ Fallback rules
✅ HTTP response overrides
✅ Global HTTP headers
✅ Custom MIME types
📎 aka.ms/twitter-learn-…11:05 AM - 02 Apr 2021
Wassim Chegham@manekinekko08–What about local dev?
@AzureStaticApps comes with a CLI that serves as a local dev tool. It can:
✅ Emulate authentication and authorization
✅ Serve API requests
✅ Serve static app
✅ Build the local static app and API backend
📎 aka.ms/twitter-learn-…11:05 AM - 02 Apr 2021
Wassim Chegham@manekinekko09–Does @AzureStaticApps support PR changes preview?
Each time you create a pull request against the watched branch, a staged version with your changes is deployed to a distinct pre-production environment.
📎 aka.ms/twitter-learn-…11:05 AM - 02 Apr 2021
Wassim Chegham@manekinekko10–How to secure apps with SWA?
@AzureStaticApps streamlines the authentication experience by managing authentication with the following providers:
✅Azure Active Directory
✅GitHub
📎 aka.ms/twitter-learn-…11:05 AM - 02 Apr 2021
- Deploy static-rendered Next.js websites on Azure Static Web Apps
- Deploy server-rendered Nuxt.js websites on Azure Static Web Apps
- Publish an Angular, React, Svelte, or Vue JavaScript app with Azure Static Web Apps
- Create and publish a static web app with Gatsby and Azure Static Web Apps
- Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps
Feel free to reach out on Twitter at @manekinekko if you want to get started with Azure Static Web Apps. You can also follow my work at wassim.dev.
14