Unify VLicense casing

.github/workflows/ci.yml

@@ -23,22 +23,25 @@ jobs:
           node-version: '16.13.0'
 
       - name: Cache Node.js modules
-        uses: actions/cache@v1
+        uses: actions/cache@v2
         with:
-          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
-          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.OS }}-node-
-            ${{ runner.OS }}-
+            ${{ runner.os }}-
 
-      - name: Install dependencies
-        run: npm ci
+      - uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.24.0
+          run_install: |
+            - recursive: true
+              args: [--frozen-lockfile]
 
       - name: Run lint
-        run: npm run lint
+        run: pnpm lint
 
       - name: Run formatting test
-        run: npm run format:test
+        run: pnpm format:test
 
       - name: Run tests
-        run: npm run i18n:get-translations && npm run test:unit
+        run: pnpm i18n:get-translations && pnpm test:unit

.github/workflows/pre-build.yaml

@@ -28,24 +28,29 @@ jobs:
         with:
           node-version: '16.x'
 
-      # lookup cache dependencies already defined, based on the hash generated from the file
-      # yarn.lock
       - name: cache dependencies
-        id: cache-node-modules
         uses: actions/cache@v2
         with:
-          path: node_modules
-          key: node-modules-${{ hashFiles('package-lock.json') }}
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+
+      - uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 6.24.0
+          # Set this to false because we want to be able to skip installation if there is a cache hit in the next step
+          run_install: false
 
       # install dependencies only if the cache is not present
       - name: install dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: npm install
+        run: pnpm install --frozen-lockfile
 
       # run lint and syntax
       - name: lint & syntax check
-        run: npm run lint
+        run: pnpm lint
 
       # run type checker
       - name: typescript
-        run: npm run types
+        run: pnpm types

.husky/pre-commit

@@ -7,9 +7,9 @@ POTFILE=src/locales/po-files/openverse.pot
 CHANGED=$(git diff --staged --name-only HEAD)
 
 if [[ "$CHANGED" == *"$TRANSFILE"* ]] && [[ "$CHANGED" != *"$POTFILE"* ]]; then
-  npm run i18n:generate-pot
+  pnpm i18n:generate-pot
   git add $POTFILE
 fi
 
 # Lint staged files
-npx lint-staged && npm run types
+pnpx lint-staged && pnpm types

.husky/pre-push

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm test
+pnpm test

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+enable-pre-post-scripts=true

.prettierignore

@@ -4,3 +4,4 @@ test/unit/coverage
 .nuxt
 .nuxt-storybook
 storybook-static
+pnpm-lock.yaml

Dockerfile

@@ -7,11 +7,16 @@ FROM node:16 AS builder
 
 WORKDIR /usr/app
 
+# Install pnpm
+RUN npm install -g pnpm
+
 # copy package.json and package-lock.json files
-COPY package*.json .
+COPY package.json .
+COPY pnpm-lock.yaml .
+COPY .npmrc .
 
 # install dependencies including local development tools
-RUN npm install
+RUN pnpm install
 
 # copy the rest of the content
 COPY . /usr/app
@@ -20,7 +25,7 @@ COPY . /usr/app
 ENV NUXT_TELEMETRY_DISABLED=1
 
 # build the application and generate a distribution package
-RUN npm run build
+RUN pnpm run build
 
 # ==
 # development
@@ -30,6 +35,9 @@ FROM node:16 AS dev
 
 WORKDIR /usr/app
 
+# Install pnpm
+RUN npm install -g pnpm
+
 ENV NODE_ENV=development
 ENV CYPRESS_INSTALL_BINARY=0
 
@@ -40,13 +48,13 @@ COPY . /usr/app
 ENV NUXT_TELEMETRY_DISABLED=1
 
 # install dependencies (development dependencies included)
-RUN npm install
+RUN pnpm install
 
 # expose port 8443
 EXPOSE 8443
 
 # run the application in development mode
-ENTRYPOINT [ "npm", "run", "dev" ]
+ENTRYPOINT [ "pnpm", "run", "dev" ]
 
 # ==
 # production
@@ -56,11 +64,16 @@ FROM node:alpine AS app
 
 WORKDIR /usr/app
 
+# Install pnpm
+RUN npm install -g pnpm
+
 ENV NODE_ENV=production
 ENV PLAYWRIGHT_SKIP_BROWSER_GC=1
 
-# copy the package.json and package-lock.json files
-COPY package*.json .
+# copy package.json and package-lock.json files
+COPY package.json .
+COPY pnpm-lock.yaml .
+COPY .npmrc .
 
 # copy the nuxt configuration file
 COPY --from=builder /usr/app/nuxt.config.js .
@@ -72,7 +85,7 @@ COPY --from=builder /usr/app/.nuxt /usr/app/.nuxt
 COPY --from=builder /usr/app/src/locales /usr/app/src/locales
 COPY --from=builder /usr/app/src/utils  /usr/app/src/utils
 
-RUN npm ci --only=production --ignore-script
+RUN pnpm install --frozen-lockfile
 
 # set app serving to permissive / assigned
 ENV NUXT_HOST=0.0.0.0
@@ -87,5 +100,5 @@ ENV PORT=8443
 EXPOSE 8443
 
 # run the application in static mode
-ENTRYPOINT ["npm", "start"]
+ENTRYPOINT ["pnpm", "run", "start"]
 

README.md

@@ -18,17 +18,25 @@ The frontend app is built using [Vue.js](https://vuejs.org/) and [Nuxt.js](https
 
 ## Local Development
 
+We use [Volta](https://volta.sh/) to manage our local environment tools. Please install it using the instructions on their website.
+
+Once you have volta installed, manually install `pnpm` using volta. [Volta does not currently officially support `pnpm`](https://github.com/volta-cli/volta/issues/737) so this is a stop gap solution until that support is implemented:
+
+```bash
+volta install pnpm
+```
+
 Run the following commands in order to have the code up and running on your machine:
 
 ```bash
 # installs dependencies
-npm install
+pnpm install
 
 # sets up required i18n files
-npm run i18n:get-translations
+pnpm i18n:get-translations
 
 # Builds and serves assets with hot-reload
-npm run dev
+pnpm dev
 ```
 
 ### Docker setup
@@ -53,18 +61,18 @@ The standalone mode which has a large header with logo and a footer, can be enab
 You can run the unit tests by executing:
 
 ```bash
-npm run test
+pnpm test
 ```
 
 To run the e2e tests, run:
 
 ```bash
-npm run test:e2e
+pnpm test:e2e
 ```
 
 You might have to run `npx playwright install` to get the browsers installed if e2e tests fail.
 
-When writing e2e tests, you can also use `npm run generate-e2e-tests` to generate tests and test selectors.
+When writing e2e tests, you can also use `pnpm generate-e2e-tests` to generate tests and test selectors.
 
 ### localhost tunneling
 
@@ -77,15 +85,15 @@ If you want to make your local development server accessible to the internet (fo
 ngrok http http://localhost:8443 -host-header="localhost:8443"
 ```
 
-If you need to run an HTTP version (for example, if you're testing against third-party websites that do not accept the self-signed certificate generated by the dev server), run the dev server using `npm run dev` and use the following command to start `ngrok`:
+If you need to run an HTTP version (for example, if you're testing against third-party websites that do not accept the self-signed certificate generated by the dev server), run the dev server using `pnpm dev` and use the following command to start `ngrok`:
 
 ```
 ngrok http 8443 -host-header="localhost:8443"
 ```
 
 ## Formatting and Linting
 
-The code in this repository is formatted using `prettier`. If you have prettier setup in your code editor it should work out of the box; otherwise you can use the `npm run lintfix` script to format and fix lint errors in your code. Checks are run to lint your code and validate the formatting on git precommit using [husky](https://github.com/typicode/husky).
+The code in this repository is formatted using `prettier`. If you have prettier setup in your code editor it should work out of the box; otherwise you can use the `pnpm lintfix` script to format and fix lint errors in your code. Checks are run to lint your code and validate the formatting on git precommit using [husky](https://github.com/typicode/husky).
 
 You will need to fix any linting issues before committing. We recommend formatting your JavaScript files on save in your text editor. You can learn how to do this in Visual Studio Code [here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode#format-on-save).