build: Merge remote-tracking branch 'origin/form-v2/develop' into for…

…m-v2/merge-5.73.0

.ebextensions/99datadog-amazon-linux-2.config

@@ -36,4 +36,4 @@ files:
 
 container_commands:
     05setup_datadog:
-        command: "DD_API_KEY=unused /datadog_install_script.sh; sed -i 's/ install_script/ ebs_install_script/' /etc/datadog-agent/install_info"
+        command: "DD_API_KEY=unused /datadog_install_script.sh; sed -i 's/ install_script/ ebs_install_script/' /etc/datadog-agent/install_info"

.eslintrc

@@ -4,7 +4,7 @@
     "es6": true,
     "node": true
   },
-  "ignorePatterns": ["./shared"],
+  "ignorePatterns": ["./shared", "./frontend"],
   "extends": ["eslint:recommended", "plugin:prettier/recommended"],
   "globals": {
     "Atomics": "readonly",

.github/dependabot.yml

@@ -25,3 +25,17 @@ updates:
       prefix: 'fix'
       prefix-development: 'chore'
       include: 'scope'
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/frontend' # Location of package manifests
+    schedule:
+      interval: 'daily'
+      time: '05:00'
+      timezone: 'Asia/Singapore'
+    commit-message:
+      prefix: 'fix'
+      prefix-development: 'chore'
+      include: 'scope'
+    labels:
+      - 'react'
+      - 'dependencies'
+    target-branch: 'form-v2/develop'

.github/workflows/chromatic.yml

@@ -0,0 +1,46 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+defaults:
+  run:
+    working-directory: frontend
+
+# Event for the workflow
+on:
+  push:
+    branches:
+      - 'form-v2/develop'
+  pull_request:
+    branches:
+      # PR events to branches matching refs/heads/form-v2
+      - 'form-v2'
+      - 'form-v2/**'
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node 14
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - name: Install dependencies
+        run: npm i
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: frontend
+          autoAcceptChanges: form-v2/develop
+          exitOnceUploaded: true
+          onlyChanged: true

.github/workflows/ci.yml → .github/workflows/ci-angularjs.yml

@@ -1,9 +1,16 @@
-name: CI
+name: CI (AngularJS)
 
 on:
   push:
+    branches-ignore:
+      # Push events to branches matching refs/heads/form-v2
+      - 'form-v2'
+      - 'form-v2/**'
   pull_request:
-    branches: [develop]
+    branches-ignore:
+      # PRs to branches matching refs/heads/form-v2
+      - 'form-v2'
+      - 'form-v2/**'
     types: [opened, reopened]
 
 jobs:
@@ -97,7 +104,7 @@ jobs:
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
       - run: npm ci
-      - run: npm run test-frontend
+      - run: npm run test:frontend
 
   test-backend:
     needs: lint

.github/workflows/ci-react.yml

@@ -0,0 +1,76 @@
+name: CI (React)
+
+on:
+  push:
+    branches:
+      # Push events to branches matching refs/heads/form-v2
+      - 'form-v2'
+      - 'form-v2/**'
+  pull_request:
+    branches:
+      # PR events to branches matching refs/heads/form-v2
+      - 'form-v2'
+      - 'form-v2/**'
+    types: [opened, reopened]
+
+jobs:
+  install:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - name: Cache Node.js modules
+        uses: actions/cache@v2
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-node-
+            ${{ runner.OS }}-
+      - run: npm ci
+
+  test-frontend:
+    needs: install
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - name: Load Node.js modules
+        uses: actions/cache@v2
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
+      - run: npm ci
+      - run: npm run test:frontend
+
+  test-backend:
+    needs: install
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+      - name: Load Node.js modules
+        uses: actions/cache@v2
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
+      - run: npm ci
+      - run: npm run test:backend
+      - name: Coveralls
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy-eb.yml

@@ -42,7 +42,14 @@ jobs:
           REACT_APP_DD_RUM_APP_ID: ${{ secrets.DD_RUM_APP_ID }}
           REACT_APP_DD_RUM_CLIENT_TOKEN: ${{ secrets.DD_RUM_CLIENT_TOKEN }}
           REACT_APP_DD_RUM_ENV: ${{ secrets.DD_ENV }}
+          REACT_APP_GA_TRACKING_ID: ${{ secrets.GA_TRACKING_ID }}
+          REACT_APP_FORMSG_SDK_MODE: ${{ secrets.REACT_APP_FORMSG_SDK_MODE }}
         run: |
+          echo REACT_APP_DD_RUM_APP_ID=$REACT_APP_DD_RUM_APP_ID > frontend/.env
+          echo REACT_APP_DD_RUM_CLIENT_TOKEN=$REACT_APP_DD_RUM_CLIENT_TOKEN >> frontend/.env
+          echo REACT_APP_DD_RUM_ENV=$REACT_APP_DD_RUM_ENV >> frontend/.env
+          echo REACT_APP_GA_TRACKING_ID=$REACT_APP_GA_TRACKING_ID >> frontend/.env
+          echo REACT_APP_FORMSG_SDK_MODE=$REACT_APP_FORMSG_SDK_MODE >> frontend/.env
           npm ci
           set -e
           npm_config_mode=yes npx lockfile-lint --type npm --path package.json --validate-https --allowed-hosts npm

.gitignore

@@ -66,4 +66,4 @@ tmp/
 
 # Tests
 # =======
-coverage/
+coverage/

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run pre-commit && sh secrets-check.sh
+npm run pre-commit && sh secrets-check.sh && cd frontend && npm run pre-commit

.lintstagedrc.yml

@@ -0,0 +1,5 @@
+'{src,tests}/**/*.{js,ts}':
+  - eslint --fix
+'{src,tests}/**/*.html':
+  - htmlhint
+  - prettier --write

Dockerfile.development

@@ -3,6 +3,9 @@ LABEL maintainer=FormSG<[email protected]>
 
 WORKDIR /opt/formsg
 
+RUN mkdir /mongodb_data
+RUN chown 1001:1001 /mongodb_data
+
 ENV CHROMIUM_BIN=/usr/bin/chromium-browser
 ENV NODE_ENV=development
 ENV NODE_OPTIONS=--max-old-space-size=2048
@@ -50,4 +53,4 @@ EXPOSE 5000
 # e.g. chromium when launched to create a new PDF
 ENTRYPOINT [ "tini", "--" ]
 # Create local AWS resources before building the app
-CMD sh init-localstack.sh && npm run docker-dev
+CMD sh init-localstack.sh && npm run dev:backend

Dockerfile.production

@@ -1,22 +1,40 @@
-FROM node:fermium-alpine3.16 AS node-modules-builder
+FROM node:fermium-alpine3.16 as build
 # node-modules-builder stage installs/compiles the node_modules folder
 # Python version must be specified starting in alpine3.12
 RUN apk update && apk upgrade && \
     apk --no-cache add --virtual native-deps \
     g++ gcc libgcc libstdc++ linux-headers autoconf automake make nasm python3 git curl && \
     npm install --quiet node-gyp -g
-WORKDIR /opt/formsg
-COPY package* /opt/formsg/
+WORKDIR /build
+
+COPY package.json package-lock.json ./
+COPY shared/package.json shared/package-lock.json ./shared/
+COPY frontend/package.json frontend/package-lock.json ./frontend/
+
+# Allow running of postinstall scripts
+RUN npm config set unsafe-perm true
 RUN npm ci
-COPY . /opt/formsg
+
+COPY . ./
+
+ENV NODE_OPTIONS=--max-old-space-size=3072
+
+RUN npm run build
+RUN npm prune --production
 
 # This stage builds the final container
 FROM node:fermium-alpine3.16
 LABEL maintainer=FormSG<[email protected]>
 WORKDIR /opt/formsg
 
-# Install node_modules from node-modules-builder
-COPY --from=node-modules-builder /opt/formsg /opt/formsg
+# Install build from backend-build
+COPY --from=build /build/node_modules /opt/formsg/node_modules
+COPY --from=build /build/package.json /opt/formsg/package.json
+COPY --from=build /build/dist /opt/formsg/dist
+
+# Built backend goes back to root working directory
+RUN mv /opt/formsg/dist/backend/src /opt/formsg/
+RUN mv /opt/formsg/dist/backend/shared /opt/formsg/
 
 # Install chromium from official docs
 # https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md#running-on-alpine

README.md

@@ -10,7 +10,9 @@
   - [Features](#features)
   - [Local Development (Docker)](#local-development-docker)
     - [Prerequisites](#prerequisites)
+    - [First Setup](#first-setup)
     - [Running Locally](#running-locally)
+    - [Accessing email locally](#accessing-email-locally)
     - [Environment variables](#environment-variables)
     - [Trouble-shooting](#trouble-shooting)
   - [Testing](#testing)
@@ -20,9 +22,9 @@
       - [End-to-end tests](#end-to-end-tests)
   - [Architecture](#architecture)
   - [MongoDB Scripts](#mongodb-scripts)
-  - [Maintenance Banners](#maintenance-banners)
   - [Contributing](#contributing)
   - [Support](#support)
+  - [Acknowledgements](#acknowledgements)
 
 ## Features
 
@@ -37,7 +39,7 @@ Notable features include:
 - (Singapore government agencies only) Citizen authentication with [SingPass](https://www.singpass.gov.sg/singpass/common/aboutus)
 - (Singapore government agencies only) Corporate authentication with [CorpPass](https://www.corppass.gov.sg/corppass/common/aboutus)
 - (Singapore government agencies only) Automatic prefill of verified data with [MyInfo](https://www.singpass.gov.sg/myinfo/common/aboutus)
-- Webhooks functionality via the official [FormSG JavaScript SDK](https://github.com/opengovsg/formsg-sdk) and contributor-supported [FormSG Ruby SDK] (https://github.com/opengovsg/formsg-ruby-sdk)
+- Webhooks functionality via the official [FormSG JavaScript SDK](https://github.com/opengovsg/formsg-sdk) and contributor-supported [FormSG Ruby SDK](<https://github.com/opengovsg/formsg-ruby-sdk>)
 
 The current product roadmap includes:
 
@@ -53,6 +55,28 @@ The current product roadmap includes:
 
 Install [docker and docker-compose](https://docs.docker.com/get-docker/).
 
+### First Setup
+
+Run the following shell command to install relevant npm packages.
+
+```bash
+npm install
+```
+
+If you are on Mac OS X, you may want to allow Docker to use more RAM (minimum of 4GB) by clicking on the Docker icon on the toolbar, clicking on the "Preferences" menu item, then clicking on the "Resources" link on the left.
+
+If you are on macOS Monetery or higher, port 5000 is now used by the system. This conflicts with the default port used by the backend. You could either:
+
+- Update the backend ports in these environment variables:
+  - `Dockerfile.development`
+    - Update exposed port
+  - `docker-compose.yml`
+    - Introduce a new env var `PORT`
+    - Update `APP_URL`
+  - `frontend/package.json`
+    - Update the proxy URL
+- [Disable control center](https://apple.stackexchange.com/a/431164)
+
 ### Running Locally
 
 Run the following shell command to build the Docker image from scratch. This will usually take 10 or so minutes.
@@ -61,7 +85,7 @@ Run the following shell command to build the Docker image from scratch. This wil
 npm run dev
 ```
 
-After the Docker image has finished building, the application can be accessed at [localhost:5001](localhost:5001).
+After the Docker image has finished building, the React application can be accessed at [localhost:3000](localhost:3000). The backend API server can be accessed at [localhost:5001](localhost:5001).
 
 If there are no dependency changes in `package.json` or changes in the
 `src/app/server.ts` file, you can run