Move from Yarn to NPM (#13)

Ticket: #11
- yarn to npm
- add adr

Co-authored-by: Sawyer Hollenshead <[email protected]>

Author: aligg

.github/dependabot.yml

@@ -5,7 +5,7 @@
 
 version: 2
 updates:
-  # Maintain dependencies for yarn (uses `npm`)
+  # Maintain dependencies
   - package-ecosystem: "npm"
     directory: "/app"
     schedule:

.github/workflows/ci.yml

@@ -20,10 +20,9 @@ jobs:
     - uses: actions/setup-node@v1
       with:
         node-version: 16
-    - run: npm install --location=global yarn
-    - run: yarn install --frozen-lockfile
-    - run: yarn build
-    - run: yarn lint
-    - run: yarn format-check
-    - run: yarn test
+    - run: npm ci
+    - run: npm run build
+    - run: npm run lint
+    - run: npm run format-check
+    - run: npm run test
 

README.md

@@ -17,13 +17,13 @@ This template includes setup for:
 
 You can run the Next.js app without docker as follows:
 
-1. `yarn install`
-2. `yarn dev`
+1. `npm install`
+2. `npm run dev`
 3. Navigate to `localhost:3000` in your browser to view the application
 
 You can run storybook without docker by running:
 
-1. `yarn storybook`
+1. `npm run storybook`
 2. Navigate to `localhost:6006` in your browser to view storybook
 
 ### With Docker
@@ -36,13 +36,13 @@ A `docker-compose.yml` has been included to support local development and deploy
 2. Make sure you have [Docker Desktop](https://www.docker.com/products/docker-desktop/) installed & running.
 3. Run `docker-compose up -d --build` to build the image and start the container.
 4. Navigate to `localhost:3000` in your browser to view the application. Note that it takes a few minutes for the initial sass compiling to complete and load.
-5. Run `docker-compose exec nextjs yarn storybook` to build and run storybook. Note that the initial sass compiling for storybook also takes a few  minutes to complete and load
+5. Run `docker-compose exec nextjs npm run storybook` to build and run storybook. Note that the initial sass compiling for storybook also takes a few  minutes to complete and load
 5. Navigate to `localhost:6006` in your browser to view storybook.
 6. Run `docker-compose down` when you are done to delete the container.
 
-To support local development, the `docker-compose.yml` runs the `nextjs` container in development mode (i.e. `yarn dev`) instead of production mode (i.e. `yarn start`). This allows Next.js to do things like hot reload.
+To support local development, the `docker-compose.yml` runs the `nextjs` container in development mode (i.e. `npm run dev`) instead of production mode (i.e. `npm run start`). This allows Next.js to do things like hot reload.
 
-The docker-compose file bind mounts `app` on the host machine to `/srv` in the guest machine. However, to ensure that the container uses the correct packages in `node_modules`, we use a named docker volume for the `node_modules` dir. The named volume will take precedence over the bind mount, so that the `node_modules` dir in the guest machine will not be overwritten with the host machine's `node_modules` dir. This also means that if you run `yarn add <package>` on the host machine in development (which will update `yarn.lock`), you'll also need to run `docker-compose exec nextjs yarn install --frozen-lockfile` to update `node_modules` in the guest machine.
+The docker-compose file bind mounts `app` on the host machine to `/srv` in the guest machine. However, to ensure that the container uses the correct packages in `node_modules`, we use a named docker volume for the `node_modules` dir. The named volume will take precedence over the bind mount, so that the `node_modules` dir in the guest machine will not be overwritten with the host machine's `node_modules` dir. This also means that if you run `npm install <package>` on the host machine in development (which will update `package-lock.lock`), you'll also need to run `docker-compose exec nextjs npm ci` to update `node_modules` in the guest machine.
 
 ## Getting started 
 

app/.gitignore

@@ -21,8 +21,6 @@
 
 # debug
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 .pnpm-debug.log*
 
 # local env files

app/.storybook/main.js

@@ -1,3 +1,9 @@
+/**
+ * @file Storybook's main configuration file that controls the generation of Storybook.
+ * Handles things like config for location of story files and managing presets (which configure webpack and babel).
+ * @see https://storybook.js.org/docs/configurations/default-config/
+ */
+
 const nextConfig = require('../next.config')
 
 module.exports = {
@@ -18,7 +24,7 @@ module.exports = {
       test: /\.scss$/,
       use: [
         'style-loader',
-        'css-loader',
+        { loader: 'css-loader', options: { url: false } }, // this mirrors next.js behavior
         {
           /**
            * Next.js sets this automatically for us, but we need to manually set it here for Storybook.

app/Dockerfile

@@ -5,14 +5,14 @@ FROM node:16-alpine
 # -U runs both apk update and apk upgrade.
 RUN apk -U upgrade
 # Copy just the package data to the working directory.
-COPY yarn.lock /srv
+COPY package-lock.json /srv
 COPY package.json /srv
 WORKDIR /srv
 # Install application dependencies.
-RUN yarn install --frozen-lockfile
+RUN npm ci
 # Copy all the remaining application files (ignoring files in .dockerignore) to the working directory.
 COPY . /srv
 # Build the application.
-RUN yarn build
+RUN npm run build
 # Run the application.
-CMD yarn start
+CMD npm run start

app/README.md

@@ -2,16 +2,16 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, install dependencies:
+First, install dependencies from the app directory:
 
 ```bash
-yarn
+npm install
 ```
 
 Second, run the development server:
 
 ```bash
-yarn dev
+npm run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -103,7 +103,7 @@ We did not follow their [install directions](https://designsystem.digital.gov/do
 
 Compiling the USWDS sass is slow, so the initial build step and subsequent sass re-compiles are slow, but after the design system is set up, we shouldn't need to be regularly re-compiling sass.
 
-Copying the USWDS static assets into the project is handled by a [yarn postinstall](https://classic.yarnpkg.com/lang/en/docs/package-json/#toc-scripts) script in `package.json`.
+Copying the USWDS static assets into the project is handled by a [`postinstall`](https://docs.npmjs.com/cli/v8/using-npm/scripts) script in `package.json`.
 
 ## Internationalization (i18n)