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

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

Azure Static Web App

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,

b.png

Create Repository in GitHub

  1. Make sure you are logged in to GitHub and, navigate to the following location to create a new repository
  2. Name your repository "YourAzureStaticWebApp"
  3. 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,

1.PNG

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

3.PNG

  • Review and Create and Create
    4.PNG

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

6.PNG

It will open our App. Wooallaa!!! 7.PNG

  • 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

C.PNG

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

9.PNG

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.

10.PNG

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