- Various Docker Build Improvements:

- tag and push latest first to allow pull earlier if testing locally - fly port number changed to 5001 - Removed webdriver-manager as this is not required - log CHROME_VERSION and CHROMEDRIVER_VERSION - Switch to using npx @puppeteer/browsers install - App port changed from 5000 to 5001 to avoid conflicts on new Mac - NPM run serenity-bdd-update done within Dockerfile not in step before serenity is run - Removed derivation of CHROMEDRIVER_PATH env - is injected now - standardised CHROME and CHROMEDRIVER variable names - reflected required changes in protractor.conf.js - Removed heroku build and config files - App bug fixes - Changes to config components to avoid runtime error if mail config not yet populated
nbarrett · Sep 23, 2024 · a768666 · a768666
1 parent cb27cae
commit a768666
Show file tree

Hide file tree

Showing 27 changed files with 157 additions and 197 deletions.
diff --git a/.github/workflows/build-push-and-deploy-ngx-ramblers-docker-image-via-heroku.yml b/.github/workflows/build-push-and-deploy-ngx-ramblers-docker-image-via-heroku.yml
@@ -18,20 +18,20 @@ jobs:
         run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
 
       - name: Build the Docker image
-        run: docker build . --build-arg CHROME_VERSION=${{ secrets.CHROME_VERSION }} --build-arg CHROMEDRIVER_VERSION=${{ secrets.CHROMEDRIVER_VERSION }} --file Dockerfile --tag ngx-ramblers:${{ github.run_number }}
-
-      - name: Tag the Docker image (github run number ${{ github.run_number }})
-        run: docker tag ngx-ramblers:${{ github.run_number }} ${{ secrets.DOCKER_USERNAME }}/ngx-ramblers:${{ github.run_number }}
-
-      - name: Push the Docker image to Docker Hub (github run number ${{ github.run_number }})
-        run: docker push ${{ secrets.DOCKER_USERNAME }}/ngx-ramblers:${{ github.run_number }}
+        run: docker build . --build-arg CHROME_VERSION=${{ secrets.CHROME_VERSION }} --file Dockerfile --tag ngx-ramblers:${{ github.run_number }}
 
       - name: Tag the Docker image (latest)
         run: docker tag ngx-ramblers:${{ github.run_number }} ${{ secrets.DOCKER_USERNAME }}/ngx-ramblers:latest
 
       - name: Push the Docker image to Docker Hub (latest)
         run: docker push ${{ secrets.DOCKER_USERNAME }}/ngx-ramblers:latest
 
+      - name: Tag the Docker image (github run number ${{ github.run_number }})
+        run: docker tag ngx-ramblers:${{ github.run_number }} ${{ secrets.DOCKER_USERNAME }}/ngx-ramblers:${{ github.run_number }}
+
+      - name: Push the Docker image to Docker Hub (github run number ${{ github.run_number }})
+        run: docker push ${{ secrets.DOCKER_USERNAME }}/ngx-ramblers:${{ github.run_number }}
+
       - name: Install Heroku CLI
         run: curl https://cli-assets.heroku.com/install.sh | sh
 

diff --git a/.gitignore b/.gitignore
@@ -46,3 +46,5 @@ Thumbs.db
 /.angular/cache/
 /.angular/
 /data/mongo-scripts/
+/server/chrome/
+/server/chromedriver/
diff --git a/Dockerfile b/Dockerfile
@@ -3,29 +3,10 @@ FROM node:20.11.0
 
 # Define build arguments
 ARG CHROME_VERSION
-ARG CHROMEDRIVER_VERSION
 
 # Install dependencies for Chrome installation
 RUN apt-get update && apt-get install -y wget curl unzip gnupg2 ca-certificates
 
-# Add Google Chrome repository
-RUN wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | apt-key add -
-RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
-RUN apt-get update && apt-get install -y google-chrome-stable
-
-# Download the specified version of Chrome for Testing and its Chromedriver
-RUN curl -Lo /tmp/chrome.zip "https://storage.googleapis.com/chrome-for-testing-public/${CHROME_VERSION}/linux64/chrome-linux64.zip" && \
-    curl -Lo /tmp/chromedriver.zip "https://storage.googleapis.com/chrome-for-testing-public/${CHROMEDRIVER_VERSION}/linux64/chromedriver-linux64.zip" && \
-    unzip /tmp/chrome.zip -d /usr/local/ && \
-    unzip /tmp/chromedriver.zip -d /usr/local/bin/ && \
-    rm /tmp/chrome.zip /tmp/chromedriver.zip
-
-# Add Chrome to PATH
-ENV CHROME_BIN=/usr/local/chrome-linux64/chrome
-
-# Set CHROMEDRIVER_PATH environment variable
-ENV CHROMEDRIVER_PATH=/usr/local/bin/chromedriver
-
 # Set the working directory inside the container
 WORKDIR /usr/src/app
 
@@ -48,6 +29,7 @@ RUN npx ng build --project ngx-ramblers --build-optimizer --progress --configura
 
 # Copy the server application code to the working directory
 WORKDIR /usr/src/app/server
+
 COPY server/package*.json ./
 COPY server/ts*.json ./
 COPY server/lib* ./
@@ -59,9 +41,23 @@ COPY server /usr/src/app/server
 # Install server dependencies (postinstall will run automatically)
 RUN npm install
 
+# Update the Serenity BDD dependencies so it doesn't have to run in the step before serenity is run
+RUN npm run serenity-bdd-update
+
+# Set environment variables for Chrome and Chromedriver
+ENV CHROME_BIN=/usr/src/app/server/chrome/linux-${CHROME_VERSION}/chrome-linux64/chrome
+ENV CHROMEDRIVER_PATH=/usr/src/app/server/chromedriver/linux-${CHROME_VERSION}/chromedriver-linux64/chromedriver
+
+# Install Chrome and Chromedriver
+RUN npx @puppeteer/browsers install chrome@${CHROME_VERSION} --install-deps
+RUN chmod +x /usr/src/app/server/chrome
+RUN npx @puppeteer/browsers install chromedriver@${CHROME_VERSION} --install-deps
+RUN chmod +x /usr/src/app/server/chromedriver
+
 # Expose the port the application will run on
-EXPOSE 5000
+EXPOSE 5001
 
 WORKDIR /usr/src/app
+
 # Define the command to run the server application
 CMD ["npm", "run", "server", "--prefix", "server"]
diff --git a/Dockerfile.heroku b/Dockerfile.heroku
diff --git a/docker-compose.heroku.yml b/docker-compose.heroku.yml
diff --git a/fly.toml b/fly.toml
@@ -6,7 +6,7 @@ primary_region = "lhr"
 image = "${DOCKER_IMAGE}"
 
 [http_service]
-internal_port = 5000
+internal_port = 5001
 force_https = true
 auto_stop_machines = "stop"
 auto_start_machines = true

diff --git a/heroku-build-and-deploy.yml b/heroku-build-and-deploy.yml
diff --git a/heroku.yml b/heroku.yml
diff --git a/projects/ngx-ramblers/proxy.config.json b/projects/ngx-ramblers/proxy.config.json
@@ -1,6 +1,6 @@
 {
   "/api": {
-    "target": "http://localhost:5000",
+    "target": "http://localhost:5001",
     "secure": false,
     "logLevel": "debug"
   }

diff --git a/projects/ngx-ramblers/src/app/pages/admin/member-admin-modal/member-admin-modal.component.ts b/projects/ngx-ramblers/src/app/pages/admin/member-admin-modal/member-admin-modal.component.ts
@@ -91,7 +91,7 @@ export class MemberAdminModalComponent implements OnInit, OnDestroy {
     this.subscriptions.push(this.mailMessagingService.events()
       .subscribe((mailMessagingConfig: MailMessagingConfig) => {
         this.mailMessagingConfig = mailMessagingConfig;
-        this.logger.info("retrieved MailMessagingConfig event:", mailMessagingConfig.mailConfig);
+        this.logger.info("retrieved MailMessagingConfig event:", mailMessagingConfig?.mailConfig);
       }));
     this.subscriptions.push(
       this.broadcastService.on(NamedEventType.MAIL_SUBSCRIPTION_CHANGED, (namedEvent: NamedEvent<MailListAudit>) => {

diff --git a/projects/ngx-ramblers/src/app/pages/admin/member-admin/member-admin.component.ts b/projects/ngx-ramblers/src/app/pages/admin/member-admin/member-admin.component.ts
@@ -132,7 +132,7 @@ export class MemberAdminComponent implements OnInit, OnDestroy {
     this.subscriptions.push(this.mailMessagingService.events()
       .subscribe((mailMessagingConfig: MailMessagingConfig) => {
         this.mailMessagingConfig = mailMessagingConfig;
-        this.logger.info("retrieved MailMessagingConfig event:", mailMessagingConfig.mailConfig);
+        this.logger.info("retrieved MailMessagingConfig event:", mailMessagingConfig?.mailConfig);
         this.generateFilters();
         this.refreshMembers();
       }));

diff --git a/projects/ngx-ramblers/src/app/pages/admin/profile/change-password.component.html b/projects/ngx-ramblers/src/app/pages/admin/profile/change-password.component.html
@@ -49,16 +49,16 @@ <h6>And optionally change login user name</h6>
         </div>
       </form>
     </div>
-    <div class="row">
-      <div class="col col-sm-12">
-        <div class="alert {{notifyTarget.alertClass}} mt-3" *ngIf="notifyTarget.showAlert">
-          <fa-icon [icon]="notifyTarget.alert.icon"></fa-icon>
-          <strong *ngIf="notifyTarget.alertTitle">
-            {{notifyTarget.alertTitle}}: </strong> {{notifyTarget.alertMessage}}
-          <span *ngIf="notifyTarget.showContactUs"> contact our <app-contact-us class="alert-link" roles="membership"
-                                                                                text="Membership Administrator"></app-contact-us>
-              </span>
-        </div>
+  </div>
+  <div class="row">
+    <div class="col col-sm-12">
+      <div class="alert {{notifyTarget.alertClass}} mt-3" *ngIf="notifyTarget.showAlert">
+        <fa-icon [icon]="notifyTarget.alert.icon"></fa-icon>
+        <strong *ngIf="notifyTarget.alertTitle">
+          {{ notifyTarget.alertTitle }}: </strong> {{ notifyTarget.alertMessage }}
+        <span *ngIf="notifyTarget.showContactUs"> contact our <app-contact-us class="alert-link" roles="membership"
+                                                                              text="Membership Administrator"></app-contact-us>
+                  </span>
       </div>
     </div>
   </div>

diff --git a/projects/ngx-ramblers/src/app/pages/admin/profile/contact-details.component.html b/projects/ngx-ramblers/src/app/pages/admin/profile/contact-details.component.html
@@ -2,12 +2,12 @@
   <div class="row">
     <div class="col-sm-3">
       <div class="item-panel-heading">
-        <fa-icon [icon]="faIdCard" class="fa-5x ramblers"></fa-icon>
+        <fa-icon [icon]="faIdCard" class="fa-5x ramblers"/>
       </div>
     </div>
-    <div class="col col-sm-9">
+    <div class="col-sm-9">
       <div class="row" *ngIf="member">
-        <div class="col col-sm-6">
+        <div class="col-sm-6">
           <div class="form-group">
             <label for="membershipNumber">Ramblers Membership Number</label>
             <input disabled [ngModel]="member.membershipNumber" type="text"
@@ -17,7 +17,7 @@
                    placeholder="No Membership Number held">
           </div>
         </div>
-        <div class="col col-sm-6">
+        <div class="col-sm-6">
           <div class="form-group">
             <label for="membershipExpiryDate">Ramblers Membership Expiry Date</label>
             <input disabled [ngModel]="member.membershipExpiryDate | displayDate" type="text"
@@ -27,7 +27,7 @@
                    placeholder="No Membership Expiry Date held">
           </div>
         </div>
-        <div class="col col-sm-12">
+        <div class="col-sm-12">
           <div class="form-group">
             <label for="prof-first-name">First Name</label>
             <input [(ngModel)]="member.firstName" type="text" class="form-control input-sm"
@@ -36,7 +36,7 @@
                    placeholder="Enter First Name here">
           </div>
         </div>
-        <div class="col col-sm-12">
+        <div class="col-sm-12">
           <div class="form-group">
             <label for="prof-last-name">Last Name</label>
             <input [(ngModel)]="member.lastName" type="text" required class="form-control input-sm"
@@ -45,7 +45,7 @@
                    placeholder="Enter Last Name here">
           </div>
         </div>
-        <div class="col col-sm-12">
+        <div class="col-sm-12">
           <div class="form-group">
             <label for="prof-mobile-number">Mobile Number</label>
             <input [(ngModel)]="member.mobileNumber" type="text" required class="form-control input-sm"
@@ -54,7 +54,7 @@
                    placeholder="Enter mobile number here">
           </div>
         </div>
-        <div class="col col-sm-12">
+        <div class="col-sm-12">
           <div class="form-group">
             <label for="prof-contact-email">Contact Email</label>
             <input [(ngModel)]="member.email" type="text" required class="form-control input-sm"
@@ -63,7 +63,7 @@
                    placeholder="Enter contact email here">
           </div>
         </div>
-        <div class="col col-sm-12">
+        <div class="col-sm-12">
           <div class="form-group">
             <label for="prof-postcode">Home postcode</label>
             <input [(ngModel)]="member.postcode" type="text" required class="form-control input-sm"
@@ -72,26 +72,27 @@
           </div>
         </div>
       </div>
-      <div class="row">
-        <div class="col col-sm-12">
-          <input type="submit" [disabled]="false" value="Back to admin" (click)="profileService.backToAdmin()"
-                 class="button-form button-form-left">
-          <input type="submit" [disabled]="false" value="Save Changes" (click)="savePersonalDetails()"
-                 [ngClass]="member && !notifyTarget.busy? 'button-form button-form-left': 'disabled-button-form button-form-left'">
-          <input type="submit" value="Undo Changes" (click)="undoPersonalDetails()"
-                 [ngClass]="member && !notifyTarget.busy? 'button-form button-form-left': 'disabled-button-form button-form-left'">
-        </div>
-      </div>
     </div>
-    <div class="row">
-      <div class="col col-sm-12">
-        <div class="alert {{notifyTarget.alertClass}} mt-3" *ngIf="notifyTarget.showAlert">
-          <fa-icon [icon]="notifyTarget.alert.icon"></fa-icon><strong *ngIf="notifyTarget.alertTitle">
-          {{notifyTarget.alertTitle}}: </strong> {{notifyTarget.alertMessage}}
-          <div *ngIf="notifyTarget.showContactUs"> contact our
-            <app-contact-us class="alert-link" roles="membership"
-                            text="Membership Administrator"></app-contact-us>
-          </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12">
+      <input type="submit" [disabled]="false" value="Back to admin" (click)="profileService.backToAdmin()"
+             class="button-form button-form-left">
+      <input type="submit" [disabled]="false" value="Save Changes" (click)="savePersonalDetails()"
+             [ngClass]="member && !notifyTarget.busy? 'button-form button-form-left': 'disabled-button-form button-form-left'">
+      <input type="submit" value="Undo Changes" (click)="undoPersonalDetails()"
+             [ngClass]="member && !notifyTarget.busy? 'button-form button-form-left': 'disabled-button-form button-form-left'">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12">
+      <div class="alert {{notifyTarget.alertClass}} mt-3" *ngIf="notifyTarget.showAlert">
+        <fa-icon [icon]="notifyTarget.alert.icon"></fa-icon>
+        <strong *ngIf="notifyTarget.alertTitle">
+          {{ notifyTarget.alertTitle }}: </strong> {{ notifyTarget.alertMessage }}
+        <div *ngIf="notifyTarget.showContactUs"> contact our
+          <app-contact-us class="alert-link" roles="membership"
+                          text="Membership Administrator"></app-contact-us>
         </div>
       </div>
     </div>

diff --git a/projects/ngx-ramblers/src/app/pages/admin/profile/email-subscriptions.component.ts b/projects/ngx-ramblers/src/app/pages/admin/profile/email-subscriptions.component.ts
@@ -27,9 +27,9 @@ import { MailMessagingService } from "../../../services/mail/mail-messaging.serv
             <fa-icon [icon]="faEnvelopeOpenText" class="fa-5x ramblers"></fa-icon>
           </div>
         </div>
-        <div class="col col-sm-9">
+        <div class="col-sm-9">
           <div class="row">
-            <div class="col col-sm-12 mt-2">
+            <div class="col-sm-12 mt-2">
               <p>You can change your emailing preferences at any time using the subscription checkboxes
                 below:</p>
               <app-email-subscriptions-mailchimp [member]="member"
@@ -46,30 +46,30 @@ import { MailMessagingService } from "../../../services/mail/mail-messaging.serv
               </p>
             </div>
           </div>
-          <div class="row">
-            <div class="col col-sm-12">
-              <input type="submit" [disabled]="false" value="Back to admin" (click)="profileService.backToAdmin()"
-                     class="button-form button-form-left">
-              <input type="submit" [disabled]="!member || notifyTarget.busy" value="Save Changes"
-                     (click)="saveContactPreferences()"
-                     [ngClass]="member && !notifyTarget.busy? 'button-form button-form-left': 'disabled-button-form button-form-left'">
-              <input type="submit" [disabled]="!member || notifyTarget.busy" value="Undo Changes"
-                     (click)="undoContactPreferences()"
-                     [ngClass]="member && !notifyTarget.busy? 'button-form button-form-left': 'disabled-button-form button-form-left'">
-            </div>
-          </div>
         </div>
-        <div class="row">
-          <div class="col col-sm-12">
-            <div class="alert {{notifyTarget.alertClass}} mt-3" *ngIf="notifyTarget.showAlert">
-              <fa-icon [icon]="notifyTarget.alert.icon"></fa-icon>
-              <strong *ngIf="notifyTarget.alertTitle">
-                {{ notifyTarget.alertTitle }}: </strong> {{ notifyTarget.alertMessage }}
-              <div *ngIf="notifyTarget.showContactUs"> contact our
-                <app-contact-us class="alert-link" roles="membership"
-                                text="Membership Administrator"></app-contact-us>
-                .
-              </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-12">
+          <input type="submit" [disabled]="false" value="Back to admin" (click)="profileService.backToAdmin()"
+                 class="button-form button-form-left">
+          <input type="submit" [disabled]="!member || notifyTarget.busy" value="Save Changes"
+                 (click)="saveContactPreferences()"
+                 [ngClass]="member && !notifyTarget.busy? 'button-form button-form-left': 'disabled-button-form button-form-left'">
+          <input type="submit" [disabled]="!member || notifyTarget.busy" value="Undo Changes"
+                 (click)="undoContactPreferences()"
+                 [ngClass]="member && !notifyTarget.busy? 'button-form button-form-left': 'disabled-button-form button-form-left'">
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-12">
+          <div class="alert {{notifyTarget.alertClass}} mt-3" *ngIf="notifyTarget.showAlert">
+            <fa-icon [icon]="notifyTarget.alert.icon"></fa-icon>
+            <strong *ngIf="notifyTarget.alertTitle">
+              {{ notifyTarget.alertTitle }}: </strong> {{ notifyTarget.alertMessage }}
+            <div *ngIf="notifyTarget.showContactUs"> contact our
+              <app-contact-us class="alert-link" roles="membership"
+                              text="Membership Administrator"></app-contact-us>
+              .
             </div>
           </div>
         </div>
@@ -87,7 +87,7 @@ export class EmailSubscriptionsComponent implements OnInit, OnDestroy {
               protected mailMessagingService: MailMessagingService,
               public profileService: ProfileService,
               loggerFactory: LoggerFactory) {
-    this.logger = loggerFactory.createLogger(EmailSubscriptionsComponent, NgxLoggerLevel.OFF);
+    this.logger = loggerFactory.createLogger(EmailSubscriptionsComponent, NgxLoggerLevel.ERROR);
   }
 
   public pendingMailListAudits: MailListAudit[] = [];