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

# **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)](https://azure.microsoft.com/en-us/pricing/details/app-service/static/#pricing) .
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](https://cdn.hashnode.com/res/hashnode/image/upload/v1629516099654/vVv7FRf61.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]( https://www.youtube.com/watch?v=CVClHLwv-4I&t=0s)   

 [Check out his Code on Github](https://github.com/WebDevSimplified/Face-Recognition-JavaScript) 

> 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1629517285954/FCoYw4Vmb.png)

-  Github Account Name , Github Repository, Branch (Main / Master) as per your Github Configuration for Web App Repository 
![2.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1629517302528/e0SojSHFq.png)

![3.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1629517408628/rUDIrsGKV.png)

- Review and Create and Create   
![4.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1629517585400/XIuNp_ERf.png)  

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

![6.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1629517741353/VhexGRdHX.png)  

It will open our App. Wooallaa!!! 
![7.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1629517811538/yVXTpc9LD.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1629517991462/E7xix8Eza.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1629518066034/z-tLjPtP7.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](https://faceapp.jineshkumar.ml)  
**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](https://cdn.hashnode.com/res/hashnode/image/upload/v1629518122884/lVp0dLlBW.png)   

Resource to learn more : [Microsoft Learn Building your first static site with Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=vanilla-javascript)  

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