mohankrishnaalavala · mohankrishnaalavala · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025
diff --git a/.github/workflows/azure-static-web-apps-delightful-sea-0f630a410.yml b/.github/workflows/azure-static-web-apps-delightful-sea-0f630a410.yml
diff --git a/.github/workflows/azure-static-web-apps-salmon-field-0525b1010.yml b/.github/workflows/azure-static-web-apps-salmon-field-0525b1010.yml
@@ -2,12 +2,17 @@ name: Azure Static Web Apps CI/CD
 
 on:
   push:
-    branches:
-      - main
+    branches: 
+     - main
+    paths:
+     - "projects/azure-static-web-apps-simple/**"
+     - ".github/workflows/azure-static-web-apps-salmon-field-0525b1010.yml"
+
   pull_request:
-    types: [opened, synchronize, reopened, closed]
-    branches:
-      - main
+    branches: 
+     - main
+    paths:
+     - "projects/azure-static-web-apps-simple/**"
 
 jobs:
   build_and_deploy_job:
@@ -28,9 +33,11 @@ jobs:
           action: "upload"
           ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
           # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
-          app_location: "projects/azure-static-web-apps-simple/src" # App source code path
+          app_location: "./projects/azure-static-web-apps-simple/src" # App source code path
           api_location: "" # Api source code path - optional
           output_location: "/" # Built app content directory - optional
+          skip_app_build: true   
+          skip_api_build: true
           ###### End of Repository/Build Configurations ######
 
   close_pull_request_job:

diff --git a/README.md b/README.md
@@ -31,6 +31,7 @@ This is the **third** repo of my DevOps trio repositories: [**tungbq/devops-basi
 | 10  | Deploy application on AKS with Istio           | [aks-istio-application](./projects/aks-istio-application/)                           | ✔️ Done |
 | 11  | Nginx ingress with Istio service mesh on AKS   | [aks-nginx-with-istio](./projects/aks-nginx-with-istio/)                             | ✔️ Done |
 | 12  | Deploy and Setup Jenkins on Kubernetes cluster | [jenkins-on-k8s](https://github.com/tungbq/K8sHub/tree/main/hands-on/jenkins-on-k8s) | ✔️ Done |
+| 13  | Azure Static Web Apps (Simple)                 | [azure-static-web-apps-simple](./projects/azure-static-web-apps-simple)              | ✔️ Done |
 
 ### Explore our upcoming projects by visiting [this link](https://github.com/tungbq/devops-project/issues?q=is%3Aissue+is%3Aopen+label%3Aproject) ⏩
 

diff --git a/projects/azure-static-web-apps-simple/README.md b/projects/azure-static-web-apps-simple/README.md
@@ -0,0 +1,46 @@
+# Project — Azure Static Web Apps (Simple)
+
+This mini-project shows how to host a static website on **Azure Static Web Apps (SWA)** and deploy it automatically from GitHub using **GitHub Actions**.
+
+---
+
+## What you’ll build
+- A tiny static site (`index.html`, `styles.css`, `main.js`).
+- A GitHub Actions workflow that deploys only when files in this project change.
+
+---
+
+## Prerequisites
+- Azure subscription (Free tier is fine).
+- Fork of this repository with this project folder present.
+
+---
+
+## Create the Static Web App (Portal)
+
+When creating the SWA in the Azure Portal:
+
+- **Build preset:** `HTML`
+- **App location:** `projects/azure-static-web-apps-simple/src`
+- **API location:** *(leave blank)*
+- **Output location:** *(leave blank)*
+
+- Static app creation Azure
+  ![](./src/assets/app1.png)
+  ![](./src/assets/app2.png)
+
+If you connect GitHub in the portal creation wizard, Azure will generate a workflow in `.github/workflows/` for you. You can keep that, or use the generic workflow in this repo — just don’t keep **both** enabled at the same time.
+
+---
+
+## Local run
+Open `src/index.html` directly in your browser, or use any static server:
+
+cd projects/azure-static-web-apps-simple/src
+python -m http.server 8000 
+
+
+
+## Reference documents
+
+- Azure: https://learn.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript&pivots=github
diff --git a/projects/azure-static-web-apps-simple/src/assets/app1.png b/projects/azure-static-web-apps-simple/src/assets/app1.png
diff --git a/projects/azure-static-web-apps-simple/src/assets/app2.png b/projects/azure-static-web-apps-simple/src/assets/app2.png
diff --git a/projects/azure-static-web-apps-simple/src/index.html b/projects/azure-static-web-apps-simple/src/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Azure Static Web Apps — Simple</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <h1>🚀 Azure Static Web Apps</h1>
+      <p>This site is deployed from <code>projects/azure-static-web-apps-simple/src</code>.</p>
+      <button id="ping">Ping</button>
+      <pre id="out"></pre>
+    </main>
+    <script src="./main.js"></script>
+  </body>
+</html>
diff --git a/projects/azure-static-web-apps-simple/src/main.js b/projects/azure-static-web-apps-simple/src/main.js
@@ -0,0 +1,4 @@
+document.getElementById("ping").addEventListener("click", () => {
+    const out = document.getElementById("out");
+    out.textContent = `SWA is up! ${new Date().toLocaleString()}`;
+  });
diff --git a/projects/azure-static-web-apps-simple/src/styles.css b/projects/azure-static-web-apps-simple/src/styles.css
@@ -0,0 +1,7 @@
+:root { font-family: system-ui, Arial, sans-serif; }
+body { margin: 0; background: #0f172a; color: #e2e8f0; }
+main { max-width: 720px; margin: 6rem auto; padding: 2rem; background: #111827; border-radius: 16px; }
+h1 { margin-top: 0; }
+button { padding: 0.6rem 1rem; border-radius: 8px; border: none; cursor: pointer; }
+pre { background: #0b1220; padding: 1rem; border-radius: 8px; overflow: auto; }
+