PRMDR-464 Remove hardcoded port numbers

.github/workflows/full-ui-dispatch-deploy.yml

@@ -77,7 +77,8 @@ jobs:
 
       - uses: dkershner6/aws-ssm-getparameters-action@v1
         with:
-          parameterPairs: '/ndr/${{ github.event.client_payload.sandbox }}/api_endpoint = DOC_STORE_API_ENDPOINT'
+          parameterPairs: '/ndr/${{ github.event.client_payload.sandbox }}/api_endpoint = DOC_STORE_API_ENDPOINT, 
+            /ndr/${{ github.event.client_payload.sandbox }}/container_port = CONTAINER_PORT'
           withDecryption: 'true' # defaults to true
 
       - name: Configure React environment vars
@@ -97,8 +98,9 @@ jobs:
           ECR_REPOSITORY: ndr-${{ github.event.client_payload.sandbox }}-app
           IMAGE_TAG: latest
           IMAGE_TAG_SHA: ${{ github.sha }}
+          CONTAINER_PORT: ${{ env.CONTAINER_PORT }}
         run: |
-          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA .
+          docker build --build-arg="CONTAINER_PORT=$CONTAINER_PORT" -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA .
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA
           echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA" >> $GITHUB_OUTPUT

.github/workflows/new-ui-deploy-feature-to-sandbox-manual.yml

@@ -104,7 +104,8 @@ jobs:
 
       - uses: dkershner6/aws-ssm-getparameters-action@v1
         with:
-          parameterPairs: '/ndr/${{ inputs.sandbox }}/api_endpoint = DOC_STORE_API_ENDPOINT'
+          parameterPairs: '/ndr/${{ inputs.sandbox }}/api_endpoint = DOC_STORE_API_ENDPOINT, 
+            /ndr/${{ inputs.sandbox }}/container_port = CONTAINER_PORT'
           withDecryption: 'true' # defaults to true
 
       - name: Configure React environment vars
@@ -124,8 +125,9 @@ jobs:
           ECR_REPOSITORY: ndr-${{ inputs.sandbox }}-app
           IMAGE_TAG: latest
           IMAGE_TAG_SHA: ${{ github.sha }}
+          CONTAINER_PORT: ${{ env.CONTAINER_PORT }}
         run: |
-          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA .
+          docker build --build-arg="CONTAINER_PORT=$CONTAINER_PORT" -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA .
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA
           echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA" >> $GITHUB_OUTPUT

.github/workflows/ui-deploy-to-perf-manual.yml

@@ -80,7 +80,8 @@ jobs:
 
       - uses: dkershner6/aws-ssm-getparameters-action@v1
         with:
-          parameterPairs: '/ndr/${{ vars.BUILD_ENV }}/api_endpoint = DOC_STORE_API_ENDPOINT'
+          parameterPairs: '/ndr/${{ vars.BUILD_ENV }}/api_endpoint = DOC_STORE_API_ENDPOINT, 
+            /ndr/${{ vars.BUILD_ENV }}/container_port = CONTAINER_PORT'
           withDecryption: 'true' # defaults to true
 
       - name: Configure React environment vars
@@ -99,8 +100,9 @@ jobs:
           ECR_REPOSITORY: ${{ secrets.AWS_ECR_REPO_NAME }}
           IMAGE_TAG: perf-${{ github.event.inputs.tagVersion}}
           IMAGE_TAG_SHA: ${{ github.sha }}
+          CONTAINER_PORT: ${{ env.CONTAINER_PORT }}
         run: |
-          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA .
+          docker build --build-arg="CONTAINER_PORT=$CONTAINER_PORT" -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA .
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA
           echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA" >> $GITHUB_OUTPUT

.github/workflows/ui-deploy-to-pre-prod-manual.yml

@@ -126,7 +126,7 @@ jobs:
           name: build
           path: ./app/build
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
       # Npm run will run the app locally, we want to test the built application with env vars using serve
@@ -176,7 +176,7 @@ jobs:
           browser: firefox
           working-directory: ./app
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
   cypress-run-edge:
@@ -209,7 +209,7 @@ jobs:
           browser: edge
           working-directory: ./app
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
   react_build_and_deploy_docker_image:
@@ -245,7 +245,8 @@ jobs:
 
       - uses: dkershner6/aws-ssm-getparameters-action@v1
         with:
-          parameterPairs: '/ndr/${{ vars.BUILD_ENV }}/api_endpoint = DOC_STORE_API_ENDPOINT'
+          parameterPairs: '/ndr/${{ vars.BUILD_ENV }}/api_endpoint = DOC_STORE_API_ENDPOINT, 
+            /ndr/${{ vars.BUILD_ENV }}/container_port = CONTAINER_PORT'
           withDecryption: 'true' # defaults to true
 
       - name: Configure React environment vars
@@ -264,8 +265,9 @@ jobs:
           ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
           ECR_REPOSITORY: ${{ secrets.AWS_ECR_REPO_NAME }}
           IMAGE_TAG: ${{needs.tag_and_release.outputs.tag}}
+          CONTAINER_PORT: ${{ env.CONTAINER_PORT }}
         run: |
-          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:latest .
+          docker build --build-arg="CONTAINER_PORT=$CONTAINER_PORT" -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:latest .
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:latest
           echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG" >> $GITHUB_OUTPUT

.github/workflows/ui-deploy-to-prod-manual.yml

@@ -119,7 +119,7 @@ jobs:
           browser: chrome
           working-directory: ./app
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
   cypress-run-firefox:
@@ -152,7 +152,7 @@ jobs:
           browser: firefox
           working-directory: ./app
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
   cypress-run-edge:
@@ -185,7 +185,7 @@ jobs:
           browser: edge
           working-directory: ./app
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
   react_build_and_deploy_docker_image:
@@ -215,7 +215,8 @@ jobs:
 
       - uses: dkershner6/aws-ssm-getparameters-action@v1
         with:
-          parameterPairs: '/ndr/${{ vars.BUILD_ENV }}/api_endpoint = DOC_STORE_API_ENDPOINT'
+          parameterPairs: '/ndr/${{ vars.BUILD_ENV }}/api_endpoint = DOC_STORE_API_ENDPOINT, 
+            /ndr/${{ vars.BUILD_ENV }}/container_port = CONTAINER_PORT'
           withDecryption: 'true' # defaults to true
 
       - name: Configure React environment vars
@@ -234,8 +235,9 @@ jobs:
           ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
           ECR_REPOSITORY: ${{ secrets.AWS_ECR_REPO_NAME }}
           IMAGE_TAG: prod-${{ github.event.inputs.tagVersion}}
+          CONTAINER_PORT: ${{ env.CONTAINER_PORT }}
         run: |
-          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:latest .
+          docker build --build-arg="CONTAINER_PORT=$CONTAINER_PORT" -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:latest .
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:latest
           echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG" >> $GITHUB_OUTPUT

.github/workflows/ui-deploy-to-test-manual.yml

@@ -117,7 +117,7 @@ jobs:
           browser: chrome
           working-directory: ./app
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
   cypress-run-firefox:
@@ -150,7 +150,7 @@ jobs:
           browser: firefox
           working-directory: ./app
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
   cypress-run-edge:
@@ -183,7 +183,7 @@ jobs:
           browser: edge
           working-directory: ./app
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
   react_build_and_deploy_docker_image:
@@ -232,8 +232,9 @@ jobs:
           ECR_REPOSITORY: ${{ secrets.AWS_ECR_REPO_NAME }}
           IMAGE_TAG: latest
           IMAGE_TAG_SHA: ${{ github.sha }}
+          CONTAINER_PORT: ${{ env.CONTAINER_PORT }}
         run: |
-          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA .
+          docker build --build-arg="CONTAINER_PORT=$CONTAINER_PORT"  -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA .
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA
           echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA" >> $GITHUB_OUTPUT

.github/workflows/ui-dev-to-main-ci.yml

@@ -120,7 +120,7 @@ jobs:
           browser: chrome
           working-directory: ./app
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
   cypress-run-firefox:
@@ -153,7 +153,7 @@ jobs:
           browser: firefox
           working-directory: ./app
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
   cypress-run-edge:
@@ -190,7 +190,7 @@ jobs:
           browser: edge
           working-directory: ./app
         env:
-          CYPRESS_BASE_URL: 'http://localhost:3000'
+          CYPRESS_BASE_URL: ${{ vars.CYPRESS_BASE_URL }}
           CYPRESS_grepTags: 'regression'
 
   react_build_and_deploy_docker_image:
@@ -218,7 +218,8 @@ jobs:
 
       - uses: dkershner6/aws-ssm-getparameters-action@v1
         with:
-          parameterPairs: '/ndr/${{ vars.BUILD_ENV }}/api_endpoint = DOC_STORE_API_ENDPOINT'
+          parameterPairs: '/ndr/${{ vars.BUILD_ENV }}/api_endpoint = DOC_STORE_API_ENDPOINT, 
+            /ndr/${{ vars.BUILD_ENV }}/container_port = CONTAINER_PORT'
           withDecryption: 'true' # defaults to true
 
       - name: Configure React environment vars
@@ -238,8 +239,9 @@ jobs:
           ECR_REPOSITORY: ${{ secrets.AWS_ECR_REPO_NAME }}
           IMAGE_TAG: latest
           IMAGE_TAG_SHA: ${{ github.sha }}
+          CONTAINER_PORT: ${{ env.CONTAINER_PORT }}
         run: |
-          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA .
+          docker build --build-arg="CONTAINER_PORT=$CONTAINER_PORT" -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA .
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA
           echo "image=$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG_SHA" >> $GITHUB_OUTPUT

.gitignore

@@ -52,6 +52,8 @@ coverage.xml
 .hypothesis/
 .pytest_cache/
 cover/
+app/mochawesome-report/
+app/mochawesomemerged.json
 
 # Translations
 *.mo

app/.dockerignore

@@ -1 +1,2 @@
-/node_modules
+/node_modules
+Dockerfile

app/.env.template

@@ -3,4 +3,8 @@ REACT_APP_DOC_STORE_API_ENDPOINT=%DOC_STORE_API_ENDPOINT%
 REACT_APP_AWS_REGION=%AWS_REGION%
 REACT_APP_OIDC_PROVIDER_ID=%OIDC_PROVIDER_ID%
 REACT_APP_ENVIRONMENT=%BUILD_ENV% # 'local'
-REACT_APP_IMAGE_VERSION="%IMAGE_VERSION%"
+REACT_APP_IMAGE_VERSION="%IMAGE_VERSION%"
+CONTAINER_PORT=xx    # Port number within the container. Needed for building the docker image
+HOST_PORT=xxxx    # Port number that the docker-compose localhost exposes. Only need this if we run docker-compose
+PORT=xxxx   # Port number of the localhost dev server when we run `make start`
+CYPRESS_BASE_URL=http://localhost:xxxx  # Use the port number same as above PORT

app/Dockerfile

@@ -11,10 +11,12 @@ RUN npm run build
 
 # Host the App
 FROM nginx:latest
+ARG CONTAINER_PORT
 WORKDIR /usr/share/nginx/html
 RUN rm -rf ./*
 COPY --from=builder /app/build .
 WORKDIR /etc/nginx
-COPY --from=builder ./app/docker/nginx.conf .
-EXPOSE 80
+COPY --from=builder ./app/docker/nginx.conf ./nginx.conf.template
+RUN sed "s/\$CONTAINER_PORT/${CONTAINER_PORT}/g" ./nginx.conf.template > ./nginx.conf
+EXPOSE ${CONTAINER_PORT}
 ENTRYPOINT ["nginx", "-g", "daemon off;"]

app/README.md

@@ -22,7 +22,7 @@ The National Document Repository user interface (UI) has been developed with Rea
 
 ### 1. Set Env Variables
 
-Create a `.env` file by duplicating [.env.example](.env_example) and adding any missing values. This file is sourced to
+Create a `.env` file by duplicating [.env.template](.env.template) and adding any missing values. This file is sourced to
 your shell env so make sure it doesn't have any extra whitespace, comments etc.
 The `local` environment variable will allow your local app to bypass auth and mock most lambda requests.
 
@@ -40,7 +40,7 @@ Once the packages have been installed, you can then run the app through the foll
 make start
 ```
 
-Once everything is up and running you should see a prompt in the CLI that the app is running on http://localhost:3000. You should now be able to visit the site in a browser of your choice.
+Once everything is up and running you should see a prompt in the CLI that the app is running on http://localhost:xxxx, where xxxx is the value of PORT specified in `.env` file. You should now be able to visit the site in a browser of your choice.
 
 ## Testing
 
@@ -57,7 +57,10 @@ The applications unit tests will also run automatically every-time a push is mad
 
 ### 2. E2E Tests
 
-There are also Cypress end-to-end tests written against each user journey and it's functionality. You can run these by running
+There are also Cypress end-to-end tests written against each user journey and it's functionality.
+
+Before running the E2E tests, please make sure you have got the value `CYPRESS_BASE_URL=http://localhost:xxxx` set up in your .env file.  
+You can then start the E2E tests by running
 
 ```bash
 make cypress-open

app/cypress.config.ts

@@ -1,4 +1,10 @@
 import { defineConfig } from 'cypress';
+import * as dotenv from 'dotenv';
+
+function getBaseUrlFromEnv() {
+    dotenv.config();
+    return process.env.CYPRESS_BASE_URL;
+}
 
 export default defineConfig({
     e2e: {
@@ -7,7 +13,7 @@ export default defineConfig({
         },
         downloadsFolder: 'cypress/downloads',
         trashAssetsBeforeRuns: true,
-        baseUrl: process.env.CYPRESS_BASE_URL,
+        baseUrl: getBaseUrlFromEnv(),
     },
 
     component: {

app/docker-compose.yml

@@ -6,7 +6,9 @@ services:
     image: ndr_ui_image
     build:
       context: .
+      args:
+        CONTAINER_PORT: ${CONTAINER_PORT}
     ports:
-      - 8080:80
+      - "${HOST_PORT}:${CONTAINER_PORT}"
     env_file:
       - .env

app/docker/nginx.conf

@@ -3,7 +3,7 @@ events {
 }
 http {
     server {
-    listen       80;
+    listen       $CONTAINER_PORT;
     add_header Cache-Control "no-store" always;
     add_header Pragma "no-cache" always;
     add_header Strict-Transport-Security "max-age=63072000" always;

app/package.json

@@ -13,20 +13,19 @@
         "build-storybook": "storybook build",
         "format": "prettier --write \"**/*.+(ts|tsx|js|scss|json|css|md)\"",
         "prepare": "cd ../ && husky install ./app/.husky",
-        "cypress": "cross-env CYPRESS_BASE_URL=http://localhost:3000 cypress open --env grepTags=regression",
-        "cypress-run": "cross-env CYPRESS_BASE_URL=http://localhost:3000 cypress run --env grepTags=regression --browser chrome",
-        "cypress-report-run": "cross-env CYPRESS_BASE_URL=http://localhost:3000 cypress run --reporter mochawesome --env grepTags=regression",
+        "cypress": "cypress open --env grepTags=regression",
+        "cypress-run": "cypress run --env grepTags=regression --browser chrome",
+        "cypress-report-run": "cypress run --reporter mochawesome --env grepTags=regression",
         "cypress-report-merge": "npx mochawesome-merge \"cypress/results/*.json\" > mochawesomemerged.json",
         "cypress-report-generate": "npx marge mochawesomemerged.json",
-        "cypress-report": "rm -r cypress/results/* && npm run cypress-report-run && npm run cypress-report-merge && npm run cypress-report-generate"
+        "cypress-report": "rm -rf cypress/results/* && npm run cypress-report-run && npm run cypress-report-merge && npm run cypress-report-generate"
     },
     "dependencies": {
         "@cypress/grep": "^4.0.1",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.5.0",
-        "cross-env": "^7.0.3",
         "dotenv": "^16.3.1",
         "eslint-plugin-legacy-decorators": "^1.0.0",
         "fake-progress": "^1.0.4",

app/src/pages/authCallbackPage/AuthCallbackPage.test.tsx

@@ -19,7 +19,7 @@ const params = {
 
 const codeAndStateQueryParams = `code=${params.code}&state=${params.state}`;
 const allQueryParams = `?${codeAndStateQueryParams}&client_id=${params.id}`;
-const baseUiUrl = 'http://localhost:3000' + allQueryParams;
+const baseUiUrl = 'http://localhost' + allQueryParams;
 const originalWindowLocation = window.location;
 
 const currentPage = '/example';