diff --git a/.github/workflows/azure-static-web-apps-delightful-sea-0f630a410.yml b/.github/workflows/azure-static-web-apps-delightful-sea-0f630a410.yml deleted file mode 100644 index 3887255..0000000 --- a/.github/workflows/azure-static-web-apps-delightful-sea-0f630a410.yml +++ /dev/null @@ -1,46 +0,0 @@ -name: Azure Static Web Apps CI/CD - -on: - push: - branches: - - main - pull_request: - types: [opened, synchronize, reopened, closed] - branches: - - main - -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_DELIGHTFUL_SEA_0F630A410 }} - 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" # App source code path - api_location: "" # Api source code path - optional - output_location: "." # Built app content directory - optional - ###### 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_DELIGHTFUL_SEA_0F630A410 }} - action: "close" diff --git a/.github/workflows/azure-static-web-apps-salmon-field-0525b1010.yml b/.github/workflows/azure-static-web-apps-salmon-field-0525b1010.yml index 657bafd..2aa1206 100644 --- 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 index 208b46d..5fbfb69 100644 --- 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 new file mode 100644 index 0000000..181e6f7 --- /dev/null +++ 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 \ No newline at end of file diff --git a/projects/azure-static-web-apps-simple/src/assets/app1.png b/projects/azure-static-web-apps-simple/src/assets/app1.png new file mode 100644 index 0000000..e9d0638 Binary files /dev/null and b/projects/azure-static-web-apps-simple/src/assets/app1.png differ diff --git a/projects/azure-static-web-apps-simple/src/assets/app2.png b/projects/azure-static-web-apps-simple/src/assets/app2.png new file mode 100644 index 0000000..6c5abbc Binary files /dev/null and b/projects/azure-static-web-apps-simple/src/assets/app2.png differ diff --git a/projects/azure-static-web-apps-simple/src/index.html b/projects/azure-static-web-apps-simple/src/index.html new file mode 100644 index 0000000..f91e389 --- /dev/null +++ b/projects/azure-static-web-apps-simple/src/index.html @@ -0,0 +1,18 @@ + + + + + + Azure Static Web Apps — Simple + + + +
+

🚀 Azure Static Web Apps

+

This site is deployed from projects/azure-static-web-apps-simple/src.

+ + 

+    

+    
+  
+
diff --git a/projects/azure-static-web-apps-simple/src/main.js b/projects/azure-static-web-apps-simple/src/main.js
new file mode 100644
index 0000000..775e741
--- /dev/null
+++ 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()}`;
+  });
\ No newline at end of file
diff --git a/projects/azure-static-web-apps-simple/src/styles.css b/projects/azure-static-web-apps-simple/src/styles.css
new file mode 100644
index 0000000..0ec782c
--- /dev/null
+++ 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; }
+