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