Azure Static Web App

Azure Static Web Apps is a service that automatically builds and deploys full-stack web apps to Azure from a GitHub repository and provides CI/CD Workflow all build in with few simple steps.

Accelerate development of modern web apps with a static front-end and dynamic back-end powered by serverless APIs. Local development experience, GitHub native workflows to build and deploy your app, and unified hosting and management in the cloud.

And all of it is free(For hobbies/personal projects) . Web App Deployment was never these easy.

Prerequisites

Azure account
Visual Studio Code : To create Application Code OR Application Code ready in any Coding language framework and libraries
Github Repository with Application code files added
Azure Static Web Apps extension for Visual Studio Code

Basic Infrastructure looks similar to this,

Create Repository in GitHub

Make sure you are logged in to GitHub and, navigate to the following location to create a new repository
Name your repository "YourAzureStaticWebApp"
Add your Code Files in our GitHub repository.

I took an AWESOME APP created by "Web Dev Simplified"
I appreciate the Developer. It's a very interesting app using Artificial Intelligence and Face recognition to detect your Facial Expression: Happy / Sad / Angry.

Learn how to Code this App on Youtube

Check out his Code on Github

Note : You can Create , Copy / Clone any open-source Static Web Application Code to learn its deployment on Azure Static Web App.

Now that your Code is ready on your Github Account Repository,

Let's get started on Azure Portal

Sign in > Search Azure Static Web App > Fill Resource Group , Web App Name , Region, Plan type : Free , Sign in into Github Account and Authorize As per,

Github Account Name , Github Repository, Branch (Main / Master) as per your Github Configuration for Web App Repository

Review and Create and Create
Your App is ready and Deployed. Azure given public URL is shown on its overview page , click to Open as per,

It will open our App. Wooallaa!!!

It deployed our app on Azure static Web App environment from Github Repository AND also Created "Github Action Workflow " for our CI/CD Needs,
Check out your Github Repository again,
Every time you push commit or pull requests into your code, Github Action automatically builds and deploys your app to Azure.
Its a .YML file created by Azure under .github/workflow location

Your Azure app is ready. If you want to Add a Custom Domain to your App, (If you have Custom Domain hosted somewhere.) You need to add a CName provided by Azure while adding a Custom domain to your app.

My FaceDetection (Facial expression) app is ready and deployed using Azure Static Web App and having CI/CD build in and Custom Domain is added.

All these by just few clicks.

Check out my App on : FaceApp by Jineshkumar
Be asure that it does NOT follow cookies nor track data. You can "Allow"/Enable the Camera to test the App if you like.

Resource to learn more : Microsoft Learn Building your first static site with Azure Static Web Apps

Feel free to try and Let me know if you have any questions or improvements I can provide.

I hope you like the Blog: Azure Static Web Apps

Thanks for the read. Follow for more Awesome Azure and AWS Content.

Regards,
Jineshkumar Patel

Azure Static Web Apps (FaceAPP Deployed on Azure for free)

Comments

More from this blog

Agent Plugins for AWS

Understanding AWS Storage Gateway: A Practical Guide to Hybrid Cloud Storage

AZ-104: Manage Azure Identities and Governance — Complete Study Guide for Microsoft Azure Administrators

Mastering Target Tracking Scaling Policies for Amazon EC2 Auto Scaling

Attach an EBS volume to multiple EC2 instances using Multi-Attach

Azure Static Web App

Let's get started on Azure Portal

Command Palette

Comments

More from this blog

Azure Static Web App

Let's get started on Azure Portal