Azure Static Web Apps CLI is now GA 🚀

Wassim Chegham — Wed, 25 May 2022 19:28:10 +0000

What is Azure Static Web Apps?

Azure Static Web Apps is a service that's perfect for your full stack as well as static application projects. Yes, you heard that correctly. Regardless if you are dealing with:

A static resume site with vanilla HTML, CSS and JavaScript
SPA application with Angular, React, Vue, etc.
Static site generator like Gatsby, etc.

Azure Static Web Apps is there for you and enables you to deploy your files to Azure. In order words, Azure Static Web Apps if perfect choice if you are looking for:

FREE 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.
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, 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.

What is Azure Static Web Apps CLI?

It's a CLI you run from your local dev machine. With it, you can do a lot of things like the below:

Work on your JAMstack app locally
Built-in framework detection
Serverless support
Authentication & Authorization
Login to Azure
Deploy & Ship from the CLI

Check it the documentation website 👍

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.

10 Things To Know About Azure Static Web Apps 🎉

Wassim Chegham — Mon, 05 Jul 2021 13:35:13 +0000

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?

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

What contents can be deployed to Azure Static Web Apps?

Wassim Chegham

@manekinekko

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

Does Azure Static Web Apps support serverless APIs?

Wassim Chegham

@manekinekko

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

How does Azure Static Web Apps work?

Wassim Chegham

@manekinekko

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

What devtools does Azure Static Web Apps support?

Wassim Chegham

@manekinekko

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

How about custom domain names?

Wassim Chegham

@manekinekko

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

How to configure an Azure Static Web Apps app?

Wassim Chegham

@manekinekko

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

What about local dev?

Wassim Chegham

@manekinekko

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

Does Azure Static Web Apps support PR changes preview?

Wassim Chegham

@manekinekko

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

How to secure apps with Azure Static Web Apps?

Wassim Chegham

@manekinekko

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

Resources!

Deploy your favorite framework

Have fun!