project: Create simple Azure Static Web Apps #120 (#123)

Co-authored-by: Mohanalavala <[email protected]>

Author: mohankrishnaalavala

.github/workflows/azure-static-web-apps-salmon-field-0525b1010.yml

@@ -0,0 +1,53 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches: 
+     - main
+    paths:
+     - "projects/azure-static-web-apps-simple/**"
+     - ".github/workflows/azure-static-web-apps-salmon-field-0525b1010.yml"
+
+  pull_request:
+    branches: 
+     - main
+    paths:
+     - "projects/azure-static-web-apps-simple/**"
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+          lfs: false
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SALMON_FIELD_0525B1010 }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          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
+          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:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_SALMON_FIELD_0525B1010 }}
+          action: "close"

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) ⏩
 

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

projects/azure-static-web-apps-simple/src/assets/app1.png

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

projects/azure-static-web-apps-simple/src/assets/app2.png

@@ -0,0 +1,4 @@
+document.getElementById("ping").addEventListener("click", () => {
+    const out = document.getElementById("out");
+    out.textContent = `SWA is up! ${new Date().toLocaleString()}`;
+  });

projects/azure-static-web-apps-simple/src/index.html

@@ -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; }
+