ci: introduce stage and preview deployments

.github/actions/build-and-deploy-api/action.yml

@@ -0,0 +1,32 @@
+name: 'build-and-deploy-api'
+description: 'Builds API Project for Production and Deploys it to a given WA Slot'
+
+inputs:
+  slot:
+    required: true
+    description: "Slot Identifier"
+  publishProfile:
+    required: true
+    description: "Azure Web App Publisher Profile"
+outputs:
+  url:
+    description: "Backend URL"
+    value: ${{ steps.wa-deployment.outputs.webapp-url }}
+
+runs:
+  using: "composite"
+  steps:
+    - run: |
+        npx nx build api --prod
+        cd dist/apps/api
+        npm i
+        npm prune --omit=dev
+      shell: bash
+    - name: Deploy Backend
+      id: wa-deployment
+      uses: azure/webapps-deploy@v2
+      with:
+        app-name: 'kordis-api'
+        slot: ${{ inputs.slot }}
+        publish-profile: ${{ inputs.publishProfile }}
+        package: dist/apps/api/

.github/actions/build-and-deploy-webapp/action.yml

@@ -0,0 +1,48 @@
+name: 'build-and-deploy-webapp'
+description: 'Builds Webapp Project for Production and Deploys it to a given SWA Environment'
+
+inputs:
+  apiUrl:
+    required: true
+    description: "Base URL of the API"
+  deploymentName:
+    required: true
+    description: "Unique identifier for the deployment"
+  deploymentEnv:
+    required: true
+    description: "Azure SWA Deployment Environment"
+  angularEnvironment:
+    required: true
+    description: "Angular environment to use from the project.json"
+  publishToken:
+    required: true
+    description: "Azure Static Web App Deployment Token"
+outputs:
+  url:
+    description: "Frontend URL"
+    value: ${{ steps.swa-deployment.outputs.static_web_app_url  }}
+
+runs:
+  using: "composite"
+  steps:
+    - run: |
+        envsubst < apps/client/src/environments/environment.template > apps/client/src/environments/environment.${{ inputs.angularEnvironment }}.ts
+        npx nx build client --prod --configuration=${{ inputs.angularEnvironment }}
+      shell: bash
+      env:
+        IS_PRODUCTION: true
+        DEPLOYMENT_NAME: ${{ inputs.deploymentName }}
+        API_URL: ${{ inputs.apiUrl }}
+    - name: Deploy Webapp
+      id: swa-deployment
+      uses: Azure/static-web-apps-deploy@v1
+      with:
+        azure_static_web_apps_api_token: ${{ inputs.publishToken }}
+        action: "upload"
+        app_location: "dist/apps/client/"
+        output_location: ''
+        skip_app_build: true
+        skip_api_build: true
+        deployment_environment: ${{ inputs.deploymentEnv }}
+
+

.github/workflows/ci.yml

@@ -17,8 +17,8 @@ jobs:
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
-      - uses: nrwl/nx-set-shas@v3
       - run: npm ci
+      - uses: nrwl/nx-set-shas@v3
       - run: npx nx workspace-lint
       - name: Check Formatting
         run: npx nx format:check
@@ -34,6 +34,8 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
       - name: Build
-        run: npx nx affected --target=build --parallel=3
+        run: |
+          touch apps/client/src/environments/environment.prod.ts
+          npx nx affected --target=build --parallel=3
       - name: Run e2es
         run: npx nx affected --target=e2e

.github/workflows/preview-deployment.yml

@@ -0,0 +1,213 @@
+name: Preview Deployment
+on:
+  pull_request:
+    types: [ closed, synchronize ]
+  issue_comment:
+    types: [ created ]
+
+jobs:
+  verify-admin:
+    if: github.event_name == 'issue_comment' && github.event.issue.pull_request == true && startsWith(github.event.comment.body, '/deploy-preview')
+    runs-on: ubuntu-latest
+    outputs:
+      is-admin: ${{ steps.is-admin-check.outputs.require-result }}
+    steps:
+      - uses: actions-cool/check-user-permission@v2
+        id: is-admin-check
+        with:
+          require: 'admin'
+
+  has-deployment:
+    if: github.event_name == 'pull_request'
+    outputs:
+      has-swa: ${{ steps.has-swa.outputs.has-swa }}
+      has-wa: ${{ steps.has-wa.outputs.has-wa }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install Azure CLI
+        run: curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
+      - name: Check if Webapp Environment exists
+        id: has-swa
+        uses: azure/CLI@v1
+        with:
+          inlineScript: >
+            namePresence=$(az staticwebapp environment list --name kordis-webapp | grep '"name": "pr-${{ github.event.pull_request.number }}"');
+            if [ -n "$namePresence" ]; then
+                echo "has-swa=true";
+            else
+                echo "has-swa=false";
+            fi
+            >> $GITHUB_OUTPUT
+      - name: Check if API Environment exists
+        id: has-wa
+        uses: azure/CLI@v1
+        with:
+          inlineScript: >
+            namePresence=$(az webapp deployment slot list -n kordis-api --resource-group KORDIS | grep '"name": "pr-${{ github.event.pull_request.number }}"');
+            if [ -n "$namePresence" ]; then
+              echo "has-wa=true";
+            else
+              echo "has-wa=false";
+            fi
+            >> $GITHUB_OUTPUT
+
+  deployment:
+    needs: verify-admin
+    runs-on: ubuntu-latest
+    if: |
+      (github.event_name == 'issue_comment' && github.event.issue.pull_request == true && startsWith(github.event.comment.body, '/deploy-preview')) &&
+      (needs.verify-admin.outputs.is-admin == true)
+    steps:
+      - name: Remove Comment
+        uses: izhangzhihao/delete-comment@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          issue_number: ${{ github.event.issue.number }}
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+      - run: npm ci
+      - name: Initial Deployment Preview Comment
+        uses: peter-evans/[email protected]
+        id: pr-preview-comment
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            ### 🚧 Building Deployment Preview..
+            A preview of this Pull Request is being created. Hold tight while it's building ⚒️
+            This comment will be automatically updated when the preview is ready.
+      - name: Azure Login
+        uses: Azure/[email protected]
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      - name: Create PR Deployment Slot
+        uses: Azure/cli@v1
+        with:
+          inlineScript: az webapp deployment slot create --name kordis-api --resource-group KORDIS --slot pr-${{ github.event.pull_request.number }}
+      - name: Build and Deploy API
+        id: api-deployment
+        uses: ./.github/actions/build-and-deploy-api
+        with:
+          slot: "pr-${{ github.event.pull_request.number }}"
+          publishProfile: ${{ secrets.AZURE_WEBAPP_API_PUBLISH_PROFILE }}
+      - name: Build and Deploy Webapp
+        id: webapp-deployment
+        uses: ./.github/actions/build-and-deploy-webapp
+        with:
+          apiUrl: ${{ steps.api-deployment.outputs.url }}
+          deploymentName: "pr-${{ github.event.pull_request.number }}"
+          deploymentEnv: "pr-${{ github.event.pull_request.number }}"
+          angularEnvironment: "stage"
+          publishToken: ${{ secrets.AZURE_STATIC_WEB_APP_TOKEN }}
+      - name: Update PR Preview Comment
+        uses: peter-evans/[email protected]
+        with:
+          comment-id: ${{ steps.pr-preview-comment.outputs.comment-id }}
+          edit-mode: replace
+          body: |
+            ### 🚀 Deployment Preview
+            Webapp: ${{ steps.webapp-deployment.outputs.url }}
+            Backend: ${{ steps.api-deployment.outputs.url }}
+            Commit SHA: ${{ github.sha }}
+          reactions: "rocket"
+
+  update-deployment:
+    needs: has-deployment
+    runs-on: ubuntu-latest
+    if: |
+      (github.event_name == 'pull_request' && github.event.action = 'synchronize') &&
+      (needs.has-deployment.outputs.has-swa == true || needs.has-deployment.outputs.has-wa == true)
+    steps:
+      - name: Find PR Preview Comment
+        uses: peter-evans/find-comment@v1
+        id: deploy-preview-comment
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: "github-actions[bot]"
+          body-includes: Deployment Preview
+      - name: Update PR Preview Comment
+        if: steps.deploy-preview-comment.outputs.comment-id != ''
+        uses: peter-evans/[email protected]
+        with:
+          comment-id: ${{ steps.deploy-preview-comment.outputs.comment-id }}
+          edit-mode: replace
+          body: |
+            ### 🚧 Building Deployment Preview..
+            The Pull Request preview is being updated. Hold tight while it's building ⚒️
+            This comment will be automatically updated when the new version is ready.
+      - name: Azure Login
+        uses: Azure/[email protected]
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      - name: Build and Deploy API
+        id: api-deployment
+        uses: ./.github/workflows/parts/api-build-deploy.yml
+        with:
+          slot: "pr-${{ github.event.pull_request.number }}"
+          publishProfile: ${{ secrets.AZURE_WEBAPP_API_PUBLISH_PROFILE }}
+      - name: Build and Deploy Webapp
+        id: webapp-deployment
+        uses: ./.github/workflows/parts/webapp-build.yml
+        with:
+          apiUrl: ${{ steps.api-deployment.outputs.url }}
+          deploymentName: "pr-${{ github.event.pull_request.number }}"
+          deploymentEnv: "pr-${{ github.event.pull_request.number }}"
+          angularEnvironment: "stage"
+          publishToken: ${{ secrets.AZURE_STATIC_WEB_APP_TOKEN }}
+      - name: Update PR Preview Comment
+        uses: peter-evans/[email protected]
+        with:
+          comment-id: ${{ steps.pr-preview-comment.outputs.comment-id }}
+          edit-mode: replace
+          body: |
+            ### 🚀 Deployment Preview
+            Webapp: ${{ steps.webapp-deployment.outputs.url }}
+            Backend: ${{ steps.api-deployment.outputs.url }}
+            Commit SHA: ${{ github.sha }}
+          reactions: "rocket"
+
+  delete-deployment:
+    needs: has-deployment
+    runs-on: ubuntu-latest
+    if: |
+      (github.event_name == 'pull_request' && github.event.action = 'closed') &&
+      (needs.has-deployment.outputs.has-swa == true || needs.has-deployment.outputs.has-wa == true)
+    steps:
+      - name: Azure Login
+        uses: Azure/[email protected]
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      - name: Delete PR Deployment Slot
+        uses: Azure/cli@v1
+        with:
+          inlineScript: |
+            az webapp deployment slot delete --name kordis-api --resource-group KORDIS --slot pr-${{ github.event.pull_request.number }} -y
+            az staticwebapp environment delete --name kordis-webapp --environment-name pr-${{ github.event.pull_request.number }} -y
+      - name: Find PR Preview Comment
+        uses: peter-evans/find-comment@v1
+        id: deploy-preview-comment
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: "github-actions[bot]"
+          body-includes: Deployment Preview
+      - name: Update PR Preview Comment
+        if: steps.deploy-preview-comment.outputs.comment-id != ''
+        uses: peter-evans/[email protected]
+        with:
+          comment-id: ${{ steps.deploy-preview-comment.outputs.comment-id }}
+          edit-mode: replace
+          body: |
+            ### Deployment Preview
+            🏁 This PR has been closed. No deployment preview is available.
+          reactions: "hooray"
+

.github/workflows/stage-deployment.yml

@@ -0,0 +1,46 @@
+name: Stage Deployment
+concurrency: staging_environment
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deployment:
+    runs-on: ubuntu-latest
+    outputs:
+      url: ${{ steps.webapp-deployment.outputs.url }}
+    environment:
+      name: Stage
+      url: ${{ steps.webapp-deployment.outputs.url }}
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+      - run: npm ci
+      - name: Azure Login
+        uses: Azure/[email protected]
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+      - name: Build and Deploy API
+        id: api-deployment
+        uses: ./.github/actions/build-and-deploy-api
+        with:
+          slot: "stage"
+          publishProfile: ${{ secrets.AZURE_WEBAPP_API_PUBLISH_PROFILE }}
+      - name: Build and Deploy Webapp
+        id: webapp-deployment
+        uses: ./.github/actions/build-and-deploy-webapp
+        with:
+          apiUrl: ${{ steps.api-deployment.outputs.url }}
+          deploymentName: "commit-${{ github.sha }}"
+          angularEnvironment: "stage"
+          deploymentEnv: "stage"
+          publishToken: ${{ secrets.AZURE_STATIC_WEB_APP_TOKEN }}

.nvmrc

@@ -1 +1 @@
-16
+18

.prettierignore

@@ -3,3 +3,4 @@
 /dist
 /coverage
 package-lock.json
+.github

apps/api-e2e/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+	"extends": ["../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.ts", "*.tsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.js", "*.jsx"],
+			"rules": {}
+		}
+	]
+}