Quickstart

.github/workflows/ci.yml

@@ -9,6 +9,12 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+env:
+  AWS_CFN_TEMPLATE: template.yml
+  AWS_REGION: ${{ vars.AWS_REGION }}
+  AWS_ROLE_ARN: ${{ vars.AWS_ROLE_ARN_DEV }}
+  ENV_FILE: ${{ secrets.ENV_CI }}
+
 jobs:
   build:
     name: 'Build'
@@ -29,6 +35,10 @@ jobs:
       - name: Install Dependencies
         run: npm ci
 
+      - name: 'Create .env File'
+        run: |
+          echo "${{ env.ENV_FILE }}" > .env
+
       - name: Build
         run: npm run build
 
@@ -51,8 +61,12 @@ jobs:
       - name: Install Dependencies
         run: npm ci
 
+      - name: 'Create .env File'
+        run: |
+          echo "${{ env.ENV_FILE }}" > .env
+
       - name: Run Unit Tests
-        run: npm run test.unit
+        run: npm run test:ci
 
   scan:
     name: 'Scan'
@@ -73,5 +87,34 @@ jobs:
       - name: Install Dependencies
         run: npm ci
 
+      - name: 'Create .env File'
+        run: |
+          echo "${{ env.ENV_FILE }}" > .env
+
       - name: Run Linter
         run: npm run lint
+
+  validate-template:
+    name: 'Validate CloudFormation Template'
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 3
+
+    permissions:
+      id-token: write
+      contents: read
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ env.AWS_ROLE_ARN }}
+          aws-region: ${{ env.AWS_REGION }}
+
+      - name: Validate AWS CloudFormation Template
+        run: |-
+          aws cloudformation validate-template \
+          --template-body file://${{ env.AWS_CFN_TEMPLATE }}

.github/workflows/deploy-dev.yml

@@ -0,0 +1,87 @@
+name: Deploy to Development
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - dev
+
+concurrency:
+  group: ${{ github.workflow }}
+
+env:
+  APP_NAME: ionic8-playground.leanstacks.net
+  AWS_CFN_STACK_NAME: ls-ui-ionic8playground-resources-dev
+  AWS_CFN_TEMPLATE: template.yml
+  AWS_ENV_CODE: dev
+  AWS_REGION: ${{ vars.AWS_REGION }}
+  AWS_ROLE_ARN: ${{ vars.AWS_ROLE_ARN_DEV }}
+  ENV_FILE: ${{ secrets.ENV_DEV }}
+
+jobs:
+  deploy:
+    name: Deploy
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    permissions:
+      id-token: write
+      contents: read
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js Environment
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: npm
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Create Environment Configuration
+        run: |
+          echo "${{ env.ENV_FILE }}" > .env
+          echo "VITE_BUILD_DATE=$(date +'%Y-%m-%d')" >> .env
+          echo "VITE_BUILD_TIME=$(date +'%H:%M:%S%z')" >> .env
+          echo "VITE_BUILD_TS=$(date +'%Y-%m-%dT%H:%M:%S%z')" >> .env
+          echo "VITE_BUILD_COMMIT_SHA=${{ github.sha }}" >> .env
+          echo "VITE_BUILD_ENV_CODE=${{ env.AWS_ENV_CODE }}" >> .env
+          echo "VITE_BUILD_WORKFLOW_NAME=${{ github.workflow }}" >> .env
+          echo "VITE_BUILD_WORKFLOW_RUN_NUMBER=${{ github.run_number }}" >> .env
+          echo "VITE_BUILD_WORKFLOW_RUN_ATTEMPT=${{ github.run_attempt }}" >> .env
+
+      - name: Build
+        run: npm run build
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ env.AWS_ROLE_ARN }}
+          aws-region: ${{ env.AWS_REGION }}
+
+      - name: Deploy AWS CloudFormation Stack
+        run: |-
+          aws cloudformation deploy \
+          --stack-name ${{ env.AWS_CFN_STACK_NAME }} \
+          --template-file ${{ env.AWS_CFN_TEMPLATE }} \
+          --parameter-overrides EnvironmentCode=${{ env.AWS_ENV_CODE }} \
+          --tags App=${{ env.APP_NAME }} Env=${{ env.AWS_ENV_CODE }} OU=leanstacks Owner='Matthew Warman'
+
+      - name: Get CloudFormation Stack Outputs
+        id: cloudformation
+        run: |-
+          APP_BUCKET_NAME=$(
+            aws cloudformation describe-stacks \
+            --stack-name ${{ env.AWS_CFN_STACK_NAME }} \
+            --query "Stacks[0].Outputs[?OutputKey=='AppBucketName'].OutputValue | [0]"
+          )
+          echo "APP_BUCKET_NAME=$APP_BUCKET_NAME" >> "$GITHUB_OUTPUT"
+
+      - name: Deploy to AWS S3
+        run: |
+          aws s3 sync dist s3://${{ steps.cloudformation.outputs.APP_BUCKET_NAME }} --delete

.github/workflows/deploy-prod.yml

@@ -0,0 +1,88 @@
+name: Deploy to Production
+
+on:
+  release:
+    types:
+      - published
+  push:
+    tags:
+      - prod
+
+concurrency:
+  group: ${{ github.workflow }}
+
+env:
+  APP_NAME: ionic8-playground.leanstacks.net
+  AWS_CFN_STACK_NAME: ls-ui-ionic8playground-resources-prod
+  AWS_CFN_TEMPLATE: template.yml
+  AWS_ENV_CODE: prod
+  AWS_REGION: ${{ vars.AWS_REGION }}
+  AWS_ROLE_ARN: ${{ vars.AWS_ROLE_ARN_PROD }}
+  ENV_FILE: ${{ secrets.ENV_PROD }}
+
+jobs:
+  deploy:
+    name: Deploy
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    permissions:
+      id-token: write
+      contents: read
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js Environment
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: npm
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Create Environment Configuration
+        run: |
+          echo "${{ env.ENV_FILE }}" > .env
+          echo "VITE_BUILD_DATE=$(date +'%Y-%m-%d')" >> .env
+          echo "VITE_BUILD_TIME=$(date +'%H:%M:%S%z')" >> .env
+          echo "VITE_BUILD_TS=$(date +'%Y-%m-%dT%H:%M:%S%z')" >> .env
+          echo "VITE_BUILD_COMMIT_SHA=${{ github.sha }}" >> .env
+          echo "VITE_BUILD_ENV_CODE=${{ env.AWS_ENV_CODE }}" >> .env
+          echo "VITE_BUILD_WORKFLOW_NAME=${{ github.workflow }}" >> .env
+          echo "VITE_BUILD_WORKFLOW_RUN_NUMBER=${{ github.run_number }}" >> .env
+          echo "VITE_BUILD_WORKFLOW_RUN_ATTEMPT=${{ github.run_attempt }}" >> .env
+
+      - name: Build
+        run: npm run build
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ env.AWS_ROLE_ARN }}
+          aws-region: ${{ env.AWS_REGION }}
+
+      - name: Deploy AWS CloudFormation Stack
+        run: |-
+          aws cloudformation deploy \
+          --stack-name ${{ env.AWS_CFN_STACK_NAME }} \
+          --template-file ${{ env.AWS_CFN_TEMPLATE }} \
+          --parameter-overrides EnvironmentCode=${{ env.AWS_ENV_CODE }} \
+          --tags App=${{ env.APP_NAME }} Env=${{ env.AWS_ENV_CODE }} OU=leanstacks Owner='Matthew Warman'
+
+      - name: Get CloudFormation Stack Outputs
+        id: cloudformation
+        run: |-
+          APP_BUCKET_NAME=$(
+            aws cloudformation describe-stacks \
+            --stack-name ${{ env.AWS_CFN_STACK_NAME }} \
+            --query "Stacks[0].Outputs[?OutputKey=='AppBucketName'].OutputValue | [0]"
+          )
+          echo "APP_BUCKET_NAME=$APP_BUCKET_NAME" >> "$GITHUB_OUTPUT"
+
+      - name: Deploy to AWS S3
+        run: |
+          aws s3 sync dist s3://${{ steps.cloudformation.outputs.APP_BUCKET_NAME }} --delete

.github/workflows/deploy-qa.yml

@@ -0,0 +1,87 @@
+name: Deploy to QA
+
+on:
+  push:
+    branches:
+      - release/*
+    tags:
+      - qa
+
+concurrency:
+  group: ${{ github.workflow }}
+
+env:
+  APP_NAME: ionic8-playground.leanstacks.net
+  AWS_CFN_STACK_NAME: ls-ui-ionic8playground-resources-qa
+  AWS_CFN_TEMPLATE: template.yml
+  AWS_ENV_CODE: qa
+  AWS_REGION: ${{ vars.AWS_REGION }}
+  AWS_ROLE_ARN: ${{ vars.AWS_ROLE_ARN_QA }}
+  ENV_FILE: ${{ secrets.ENV_QA }}
+
+jobs:
+  deploy:
+    name: Deploy
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    permissions:
+      id-token: write
+      contents: read
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js Environment
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: npm
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Create Environment Configuration
+        run: |
+          echo "${{ env.ENV_FILE }}" > .env
+          echo "VITE_BUILD_DATE=$(date +'%Y-%m-%d')" >> .env
+          echo "VITE_BUILD_TIME=$(date +'%H:%M:%S%z')" >> .env
+          echo "VITE_BUILD_TS=$(date +'%Y-%m-%dT%H:%M:%S%z')" >> .env
+          echo "VITE_BUILD_COMMIT_SHA=${{ github.sha }}" >> .env
+          echo "VITE_BUILD_ENV_CODE=${{ env.AWS_ENV_CODE }}" >> .env
+          echo "VITE_BUILD_WORKFLOW_NAME=${{ github.workflow }}" >> .env
+          echo "VITE_BUILD_WORKFLOW_RUN_NUMBER=${{ github.run_number }}" >> .env
+          echo "VITE_BUILD_WORKFLOW_RUN_ATTEMPT=${{ github.run_attempt }}" >> .env
+
+      - name: Build
+        run: npm run build
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ env.AWS_ROLE_ARN }}
+          aws-region: ${{ env.AWS_REGION }}
+
+      - name: Deploy AWS CloudFormation Stack
+        run: |-
+          aws cloudformation deploy \
+          --stack-name ${{ env.AWS_CFN_STACK_NAME }} \
+          --template-file ${{ env.AWS_CFN_TEMPLATE }} \
+          --parameter-overrides EnvironmentCode=${{ env.AWS_ENV_CODE }} \
+          --tags App=${{ env.APP_NAME }} Env=${{ env.AWS_ENV_CODE }} OU=leanstacks Owner='Matthew Warman'
+
+      - name: Get CloudFormation Stack Outputs
+        id: cloudformation
+        run: |-
+          APP_BUCKET_NAME=$(
+            aws cloudformation describe-stacks \
+            --stack-name ${{ env.AWS_CFN_STACK_NAME }} \
+            --query "Stacks[0].Outputs[?OutputKey=='AppBucketName'].OutputValue | [0]"
+          )
+          echo "APP_BUCKET_NAME=$APP_BUCKET_NAME" >> "$GITHUB_OUTPUT"
+
+      - name: Deploy to AWS S3
+        run: |
+          aws s3 sync dist s3://${{ steps.cloudformation.outputs.APP_BUCKET_NAME }} --delete

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "plugins": ["prettier-plugin-tailwindcss"],
+  "plugins": [],
   "printWidth": 100,
   "semi": true,
   "singleQuote": true,