build(854): switch frontend package manager from yarn to npm

.circleci/config.yml

@@ -43,6 +43,12 @@ commands:
           name: Build and spin-up React application
           command: cd tdrs-frontend; docker-compose up -d --build
 
+  disable-npm-audit:
+    steps:
+      - run:
+          name: Disable npm audit warnings in CI
+          command: npm set audit false
+
   # This allows us to use the orb stanza for node/install within other commands
   # NOTE: This doesn't work correctly on machine executors
   install-nodejs: node/install
@@ -214,11 +220,10 @@ commands:
         type: string
     steps:
       - install-nodejs:
-          install-yarn: true
           node-version: "16.13"
+      - disable-npm-audit
       - install-nodejs-packages:
           app-dir: tdrs-frontend
-          pkg-manager: yarn
       - get-app-deploy-strategy:
           appname: <<parameters.frontend-appname>>
       - run:
@@ -361,21 +366,18 @@ jobs:
     steps:
       - checkout
       - install-nodejs-machine
-      - node/install-yarn
+      - disable-npm-audit
       - install-nodejs-packages:
           app-dir: tdrs-frontend
-          cache-path: ~/.cache
-          cache-version: v2
-          pkg-manager: yarn
       - run:
           name: Run ESLint
-          command: cd tdrs-frontend; yarn lint
+          command: cd tdrs-frontend; npm run lint
       - run:
           name: Run Pa11y Accessibility Tests
-          command: cd tdrs-frontend; mkdir pa11y-screenshots/; yarn test:accessibility
+          command: cd tdrs-frontend; mkdir pa11y-screenshots/; npm run test:accessibility
       - run:
           name: Run Jest Unit Tests
-          command: cd tdrs-frontend; yarn test:ci
+          command: cd tdrs-frontend; npm run test:ci
       - upload-codecov:
           component: frontend
           coverage-report: ./tdrs-frontend/coverage/lcov.info

docs/Technical-Documentation/circle-ci.md

@@ -57,7 +57,7 @@ These all have defaults set in their respective settings modules, but may be ove
 ## Frontend CI build process
 
 ### test-frontend
-* Runs most steps directly on the machine executor, utilizing `yarn` commands defined in package.json
+* Runs most steps directly on the machine executor, utilizing `npm` commands defined in package.json
 * The exception to the above is the zap scanner step - which runs the frontend via docker-compose, using the nginx target instead of the local dev target
 * Major steps:
     * Run ESLint - ensures styling standards are followed
@@ -75,7 +75,7 @@ These all have defaults set in their respective settings modules, but may be ove
         * `REACT_APP_BACKEND_HOST`
         * `REACT_APP_BACKEND_URL`
         * Only difference in values is whether `/v1` is at the end
-    * Runs `yarn build` which generates the HTML needed to serve to end users
+    * Runs `npm run build` which generates the HTML needed to serve to end users
     * Copies in the nginx configuration for build packs
     * Uploads the build output to Cloud.gov using `cf push`
     * Creates and maps the frontend route

scripts/deploy-frontend.sh

@@ -18,7 +18,7 @@ update_frontend()
 
     echo "REACT_APP_BACKEND_URL=https://$CGHOSTNAME_BACKEND.app.cloud.gov/v1" >> .env.production
     echo "REACT_APP_BACKEND_HOST=https://$CGHOSTNAME_BACKEND.app.cloud.gov" >> .env.production
-    yarn build
+    npm run build
     unlink .env.production
     mkdir deployment
 

tdrs-frontend/Dockerfile

@@ -7,14 +7,15 @@ USER node
 RUN mkdir /home/node/app/ && chown -R node:node /home/node/app
 WORKDIR /home/node/app
 
-# Copy package.json and run yarn install before copying the rest of the app in
-# to allow Docker to cache the yarn layer to prevent unnecessary installations
+# Copy package.json and run npm install before copying the rest of the app in
+# to allow Docker to cache the npm layer to prevent unnecessary installations
 # when code changes occur
-COPY --chown=node:node package.json yarn.lock ./
+COPY --chown=node:node package.json package-lock.json ./
 
-# Install yarn packages, using local cache if available and skip creating a
-# new lock file to speed up the build
-RUN yarn install --prefer-offline --frozen-lockfile
+# Disable npm audit
+RUN npm set audit false
+# Install npm packages directly from package-lock.json <https://docs.npmjs.com/cli/v8/commands/npm-ci>
+RUN npm ci
 
 
 COPY --chown=node:node . .
@@ -26,7 +27,7 @@ EXPOSE 80
 # ---
 # Stage 1: Create a production build
 FROM localdev AS build
-RUN yarn build
+RUN npm run build
 
 # ---
 # Stage 2: Serve over nginx

tdrs-frontend/README.md

@@ -8,7 +8,6 @@ Frontend API Service for TDP. Deployed to Cloud.gov at https://tdp-frontend.app.
 - [Login.gov Sandbox Account](https://idp.int.identitysandbox.gov/sign_up/enter_email)
 - [Cloud.gov Account](https://cloud.gov/)
 - [Cloud Foundry CLI](https://docs.cloudfoundry.org/cf-cli/install-go-cli.html)
-- [Yarn JavaScript Package Manager](https://classic.yarnpkg.com/en/docs/install/#mac-stable) 
 
 # Contents
 
@@ -56,22 +55,22 @@ When running this app with Docker on localhost React will assign `NODE_ENV=devel
 * .env.development
 * .env
 
-#### `npm start` / `yarn start`
+#### `npm start`
 When running this app directly on localhost React will assign `NODE_ENV=development` and use this inheritance order:
 * Any variables set directly on host machine (ie. export MY_VAR=...)
 * .env.development.local
 * .env.local
 * .env.development
 * .env
 
-#### `npm test` / `yarn test`
+#### `npm test`
 During tests, the env files are loaded in this order:
 * .env.test.local
 * .env.test
 * .env
 
 #### CircleCI
-The current CircleCI config utilizes yarn to build and test the frontend application. As such it follows this order of inheritance for environment variables:
+The current CircleCI config utilizes npm to build and test the frontend application. As such it follows this order of inheritance for environment variables:
 * Any variables set directly in CircleCI Project Settings
 * .env.test.local
 * .env.test
@@ -86,7 +85,7 @@ The app is set up with [ESLint](https://eslint.org/) and [Prettier](https://pret
 
 To run eslint locally:
 ```bash
-$ yarn lint
+$ npm run lint
 ```
 
 If you use [VSCode](https://code.visualstudio.com/) as an [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment), it will be helpful to add the extensions, [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). These make it possible to catch lint errors as they occur, and even auto-fix style errors (with Prettier).
@@ -104,15 +103,15 @@ Jest provides an interactive test console that's helpful for development. After
 
 1.) To run unit tests locally:
   ```bash
-  $ yarn test
+  $ npm run test
   ```
 2.) To run unit tests with code coverage report:
   ```bash
-  $ yarn test:cov
+  $ npm run test:cov
   ```
 3.) To run unit tests as a continuous integration environment would, which runs the tests once (without the interactive console):
   ```bash
-  $ yarn test:ci
+  $ npm run test:ci
   ```
 
 After running either `test:cov` or `test:ci`, coverage details can be seen as HTML in the browser by running:

tdrs-frontend/docker-compose.local.yml

@@ -7,6 +7,6 @@ services:
     build:
       context: .
       target: localdev
-    command: yarn start
+    command: npm run start
     volumes:
       - /home/node/app/node_modules