Move off of Create-React-App (canada-ca#316)

A little while we made the jump from a custom webpack setup to Create React
App. The move was prompted by html-webpack-plugin breaking some of the plugins
we were using.

With a little time behind us, the tradeoffs of this move have become a source
of irritation.

More control over linting (doing it in CI not just when we are running the
app), custom config and direct control over more of our dependencies and build
process are motivating factors in moving back to an updated custom setup.

Author: sleepycat

.gitignore

@@ -1,7 +1,7 @@
 **/.DS_Store
 
 platform/**/*.json
-frontend/build
+frontend/public
 api/schema.json
 
 **/node_modules

ci/Dockerfile

@@ -3,5 +3,6 @@ FROM python:3.8-alpine
 # Python, don't write bytecode!
 ENV PYTHONDONTWRITEBYTECODE 1
 
-RUN apk add -U --no-cache openssl-dev libffi-dev build-base postgresql-libs postgresql-dev musl-dev python3 python3-dev
+RUN apk add -U --no-cache openssl-dev libffi-dev build-base postgresql-libs \
+      postgresql-dev musl-dev python3 python3-dev nodejs-npm
 RUN pip install pipenv

frontend/.babelrc

@@ -0,0 +1,11 @@
+{
+	"presets": [
+		"@babel/preset-env",
+		"@babel/preset-react",
+	],
+	"plugins": [
+    "macros",
+	  "@babel/plugin-transform-runtime",
+		"react-hot-loader/babel",
+	]
+}

frontend/.dockerignore

@@ -1,8 +1,13 @@
-*
-!build
-!lingui.config.js
-!package.json
-!package-lock.json
-!public
-!src
-!index.js
+**/__tests__
+cloudbuild.yaml
+docker-compose.yaml
+Dockerfile
+Dockerfile.dev
+envoy-dev.yaml
+LICENCE
+__mocks__
+node_modules
+README.md
+schema.faker.graphql
+.eslintrc
+.prettierrc

frontend/.eslintrc

@@ -0,0 +1,32 @@
+{
+  "extends": [
+    "standard",
+    "prettier",
+    "plugin:react/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings"
+  ],
+  "plugins": ["jest", "react-hooks"],
+  "env": {
+    "jest/globals": true
+  },
+  "rules": {
+    "comma-dangle": ["error", "always-multiline"],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "args": "all",
+        "varsIgnorePattern": "_",
+        "argsIgnorePattern": "_"
+      }
+    ]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

frontend/Dockerfile

@@ -1,25 +1,27 @@
-# Node-gyp needs python 🤦
+# Node-gyp needs python 🤦 so our build image needs to include it
 FROM python:alpine as build-env
 RUN apk add -U npm gcc make g++
 WORKDIR /app
+# Copy in whatever isn't filtered by .dockerignore
 COPY . .
 
-RUN npm ci
-RUN npm run extract
-RUN npm run compile
-RUN npm run build
+# Install only what's needed for production
+# https://nodesecroadmap.fyi/chapter-1/threat-UIR.html
+RUN npm ci --production
 
+# Base the production image on something slimmer
 FROM node:13-alpine
-LABEL maintainer="mike.williamson@cds-snc.ca"
+LABEL maintainer="mike.williamson@tbs-sct.gc.ca"
 
 ENV HOST 0.0.0.0
 ENV PORT 3000
 ENV NODE_ENV production
 
+# copy built app in
 COPY --from=build-env /app /app
 WORKDIR /app
 
 USER node
 EXPOSE 3000
 
-CMD ["index.js"]
+CMD ["npm", "start"]

frontend/cloudbuild.yaml

@@ -1,6 +1,6 @@
 steps:
 
-  - name: node:13-alpine
+  - name: 'gcr.io/track-compliance/ci'
     id: install
     dir: frontend
     entrypoint: npm
@@ -12,6 +12,24 @@ steps:
     entrypoint: npm
     args: ['test']
 
+  - name: node:13-alpine
+    id: lingui-extract
+    dir: frontend
+    entrypoint: npm
+    args: ['run', 'extract']
+
+  - name: node:13-alpine
+    id: lingui-compile
+    dir: frontend
+    entrypoint: npm
+    args: ['run', 'compile']
+
+  - name: node:13-alpine
+    id: build-production-bundle
+    dir: frontend
+    entrypoint: npm
+    args: ['run', 'build']
+
   - name: 'gcr.io/cloud-builders/docker'
     id: build
     dir: frontend

frontend/docker-compose.yaml

@@ -1,27 +1,26 @@
 version: "3.7"
 services:
-  envoy:
+  envoy: # proxies localhost:3000 to containers based on rules in config
     image: envoyproxy/envoy-alpine-dev
     entrypoint: envoy
     command: ["-c", "/etc/envoy-dev.yaml", "--service-cluster", "envoy"]
     volumes:
-      - ./envoy-dev.yaml:/etc/envoy-dev.yaml
+      - ./envoy-dev.yaml:/etc/envoy-dev.yaml # Envoy configuration
     expose:
-      - "3000"
-      - "3001"
+      - "3000" # Forward to proxied apps
+      - "3001" # Envoy admin page
     ports:
       - "3000:3000"
       - "3001:3001"
-  frontend:
-    stdin_open: true
+  frontend: # localhost:3000/* is sent to frontend
     image: node:alpine
     working_dir: /app
-    command: npm start
+    command: npm run dev
     volumes:
       - ./:/app
     expose:
       - "3000"
-  api:
+  api: # available at localhost:3000/graphql
     image: apisguru/graphql-faker
     volumes:
       - ./schema.faker.graphql:/workdir/schema.faker.graphql