The Ops Community

Wassim Chegham
Wassim Chegham

Posted on • Originally published at dev.to on

10 Things To Know About Azure Static Web Apps ๐ŸŽ‰

Azure Static Web Apps allows any developer to build modern web

applications that are automatically published from changes made in the git repository, and much more...

Here are 10 things to know to get started with Azure Static Web Apps!

What's Azure Static Web Apps?

unknown tweet media content

Wassim Chegham profile image
Wassim Chegham

@manekinekko

twitter logo

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

Twitter reply actionTwitter retweet actionTwitter like action

What contents can be deployed to Azure Static Web Apps?

unknown tweet media content

Wassim Chegham profile image
Wassim Chegham

@manekinekko

twitter logo

02โ€“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

Twitter reply actionTwitter retweet actionTwitter like action

Does Azure Static Web Apps support serverless APIs?

unknown tweet media content

Wassim Chegham profile image
Wassim Chegham

@manekinekko

twitter logo

03โ€“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

Twitter reply actionTwitter retweet actionTwitter like action

How does Azure Static Web Apps work?

unknown tweet media content

Wassim Chegham profile image
Wassim Chegham

@manekinekko

twitter logo

04โ€“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

Twitter reply actionTwitter retweet actionTwitter like action

What devtools does Azure Static Web Apps support?

unknown tweet media content

Wassim Chegham profile image
Wassim Chegham

@manekinekko

twitter logo

05โ€“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

Twitter reply actionTwitter retweet actionTwitter like action

How about custom domain names?

unknown tweet media content

Wassim Chegham profile image
Wassim Chegham

@manekinekko

twitter logo

06โ€“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

Twitter reply actionTwitter retweet actionTwitter like action

How to configure an Azure Static Web Apps app?

unknown tweet media content

Wassim Chegham profile image
Wassim Chegham

@manekinekko

twitter logo

07โ€“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

Twitter reply actionTwitter retweet actionTwitter like action

What about local dev?

unknown tweet media content

Wassim Chegham profile image
Wassim Chegham

@manekinekko

twitter logo

08โ€“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

Twitter reply actionTwitter retweet actionTwitter like action

Does Azure Static Web Apps support PR changes preview?

unknown tweet media content

Wassim Chegham profile image
Wassim Chegham

@manekinekko

twitter logo

09โ€“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

Twitter reply actionTwitter retweet actionTwitter like action

How to secure apps with Azure Static Web Apps?

unknown tweet media content

Wassim Chegham profile image
Wassim Chegham

@manekinekko

twitter logo

10โ€“How to secure apps with SWA?

@AzureStaticApps streamlines the authentication experience by managing authentication with the following providers:

โœ…Azure Active Directory

โœ…GitHub

โœ…Facebook

โœ…Google

โœ…Twitter

๐Ÿ“Ž aka.ms/twitter-learn-โ€ฆ

11:05 AM - 02 Apr 2021

Twitter reply actionTwitter retweet actionTwitter like action

Resources!

Deploy your favorite framework

Have fun!

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.

Discussion (0)