Migrate to Nuxt 3 (#4257)

Co-authored-by: Olga Bulat <obulat@gmail.com>
Co-authored-by: sarayourfriend <git@sarayourfriend.pictures>

.codespell/ignore_words.txt

@@ -1,7 +1,7 @@
 ;; Please include explanations for each ignored word.
 ;; See https://docs.openverse.org/meta/codespell.html for docs.
 
-;; Jest's `afterAll` hook incorrectly matched
+;; JS test library's `afterAll` hook incorrectly matched
 afterall
 
 ;; `nd` references licence part

.eslintignore

@@ -1,5 +1,8 @@
 coverage
 
+# Vendored module. See explanation in file
+frontend/test/unit/test-utils/render-suspended.ts
+
 frontend/test/tapes
 frontend/nuxt-template-overrides
 frontend/storybook-static

.github/actions/build-docs/action.yml

@@ -17,15 +17,7 @@ runs:
         # Pass -W to fail CI if warnings exist
         just documentation/build -W
 
-    - name: Build Storybook
-      shell: bash
-      run: |
-        just frontend/run storybook:build-for-docs
-        mv frontend/storybook-static/favicon_storybook.ico frontend/storybook-static/favicon.ico
-
-    # Storybook will be available at `/storybook`
     - name: Merge all docs
       shell: bash
       run: |
         mv documentation/_build /tmp/docs
-        mv frontend/storybook-static /tmp/docs/storybook

.github/workflows/ci_cd.yml

@@ -294,10 +294,10 @@ jobs:
       - name: Setup CI env
         uses: ./.github/actions/setup-env
         with:
-          # Python is not needed to run the tests.
-          setup_python: false
-          # Node.js is needed by lint actions.
-          install_recipe: "node-install"
+          setup_python: true
+          # Node.js is not needed to run the tests.
+          setup_nodejs: false
+          install_recipe: ""
 
       - name: Load Docker images
         uses: ./.github/actions/load-img
@@ -796,14 +796,11 @@ jobs:
         name:
           - playwright_vr
           - playwright_e2e
-          - storybook
         include:
           - name: playwright_vr
             script: "test:playwright visual-regression -u"
           - name: playwright_e2e
             script: "test:playwright e2e"
-          - name: storybook
-            script: "test:storybook -u"
 
     steps:
       - name: Checkout repository
@@ -866,7 +863,6 @@ jobs:
         name:
           - playwright_vr
           - playwright_e2e
-          - storybook
 
     steps:
       - name: Pass

.pre-commit-config.yaml

@@ -61,8 +61,8 @@ repos:
         # Must include any plugins defined in prettier.config.js, along with TypeScript and Prettier themselves
         # Versions must be manually kept in sync with those in the pnpm-lock.yaml file to prevent drift.
         additional_dependencies:
-          - prettier@3.2.5
-          - prettier-plugin-tailwindcss@0.5.14
+          - prettier@3.3.2
+          - prettier-plugin-tailwindcss@0.6.5
           - typescript@5.5.2
 
   - repo: https://github.com/koalaman/shellcheck-precommit
@@ -119,7 +119,7 @@ repos:
       - id: types
         name: types
         files: ^(frontend|packages/js)/.*$
-        entry: bash -c 'pnpm run -r types'
+        entry: bash -c 'pnpm run prepare:nuxt && pnpm run -r types'
         language: system
         pass_filenames: false
 

automations/data/labels.yml

@@ -189,8 +189,8 @@ groups:
       - name: pytest
         description: Involves pytest
         emoji: "🐍"
-      - name: jest
-        description: Involves Jest
+      - name: vitest
+        description: Involves vitest
         emoji: "🟨"
       - name: playwright
         description: Involves Playwright

documentation/meta/documentation/guidelines.md

@@ -12,8 +12,8 @@ maintainers which occurred after reading
 These are some aspects to consider when starting the document.
 
 **Type**: _(README, "Getting Started", Conceptual, Procedural
-[tutorial/how-to/guide], Reference [API reference, Glossary, Troubleshooting,
-Changelog])_\
+[tutorial/how-to/guide], Reference [API reference, Glossary,
+Troubleshooting, Changelog])_\
 **Audience**:\
 **Purpose**:\
 **Title**:\

frontend/.env.template

@@ -1,3 +1,58 @@
-#API_URL=http://127.17.0.1:8000/
-#API_CLIENT_ID=""
-#API_CLIENT_SECRET=""
+PORT=8443
+
+# ---------------------------- #
+# REQUIRED LOCAL ENV VARIABLES #
+# ---------------------------- #
+# DEPLOYMENT_ENV=local
+# SITE_DOMAIN=localhost
+# SITE_URL=http://localhost:8443
+#/**
+#* We rely on the Nginx container running as `frontend_nginx`
+#* in the local compose stack to proxy requests. Therefore, the
+#* URL here is not for the Plausible container in the local stack,
+#* but the Nginx service, which then itself forwards the requests
+#* to the local Plausible instance.
+#*
+#* In production, the Nginx container is handling all requests
+#* made to the root URL (openverse.org), and is configured to
+#* forward Plausible requests to upstream Plausible.
+#*/
+# PLAUSIBLE_SITE_URL = http://localhost:50290
+
+# ---------------------------- #
+# OPTIONAL LOCAL ENV VARIABLES
+# ---------------------------- #
+### API settings
+
+# NUXT_PUBLIC_API_URL=http://127.17.0.1:8000/ # local dev API
+# NUXT_PUBLIC_API_URL=http://localhost:49153/ # talkback proxy
+# NUXT_PUBLIC_API_URL=https://api.openverse.org/# prod API
+
+# NUXT_API_CLIENT_ID=""
+# NUXT_API_CLIENT_SECRET=""
+
+# -------------------- #
+# PRODUCTION VARIABLES #
+# -------------------- #
+# DEPLOYMENT_ENV=production
+# NUXT_API_CLIENT_ID=""
+# NUXT_API_CLIENT_SECRET=""
+# NUXT_PUBLIC_API_URL=https://api.openverse.org/
+# NUXT_PUBLIC_SENTRY_DSN=""
+# NUXT_PUBLIC_SENTRY_RELEASE=""
+# SITE_URL=https://openverse.org
+# SITE_DOMAIN=openverse.org
+# PLAUSIBLE_SITE_URL=https://openverse.org
+
+# ----------------- #
+# STAGING VARIABLES #
+# ----------------- #
+# DEPLOYMENT_ENV=staging
+# NUXT_API_CLIENT_ID=""
+# NUXT_API_CLIENT_SECRET=""
+# NUXT_PUBLIC_API_URL=https://api-staging.openverse.org/
+# NUXT_PUBLIC_SENTRY_DSN=""
+# NUXT_PUBLIC_SENTRY_RELEASE=""
+# SITE_URL=https://staging.openverse.org
+# SITE_DOMAIN=staging.openverse.org
+# PLAUSIBLE_SITE_URL=https://staging.openverse.org

frontend/.storybook/decorators/with-rtl.js

@@ -1,9 +1,10 @@
-import Vue from "vue"
+import { useI18n } from "#imports"
+
+import { ref, watch, onMounted, reactive } from "vue"
 
-import { ref, watch, useContext, onMounted } from "@nuxtjs/composition-api"
 import { useEffect } from "@storybook/client-api"
 
-const languageDirection = Vue.observable({ value: "ltr" })
+const languageDirection = reactive({ value: "ltr" })
 
 export const WithRTL = (story, context) => {
   useEffect(() => {
@@ -15,7 +16,7 @@ export const WithRTL = (story, context) => {
     components: { story },
     setup() {
       const element = ref()
-      const { i18n } = useContext()
+      const { i18n } = useI18n({ useScope: "global" })
       onMounted(() => {
         watch(
           languageDirection,

frontend/.storybook/decorators/with-ui-store.js

@@ -1,4 +1,4 @@
-import { ref, onMounted } from "@nuxtjs/composition-api"
+import { ref, onMounted } from "vue"
 
 import { useLayout } from "~/composables/use-layout"
 

frontend/Dockerfile

@@ -20,8 +20,7 @@ WORKDIR /home/node/
 # Copy monorepo mocking files into `/home/node`, which pretends to be the monorepo root.
 # Note: these files must be manually un-ignored in the root .dockerignore
 # hadolint ignore=DL3022
-COPY --from=repo_root --chown=node:node .npmrc .pnpmfile.cjs pnpm-lock.yaml tsconfig.base.json ./
-
+COPY --from=repo_root --chown=node:node .npmrc .pnpmfile.cjs pnpm-lock.yaml ./
 RUN echo '{"packages":["frontend/"]}' > pnpm-workspace.yaml
 
 # Copy the `frontend/` directory into `/home/node/frontend`, as a package in the monorepo.
@@ -40,9 +39,12 @@ RUN pnpm install && pnpm i18n
 # disable telemetry when building the app
 ENV NUXT_TELEMETRY_DISABLED=1
 ENV NODE_ENV=production
-ENV SENTRY_DSN=https://b6466b74788a4a2f8a7912eea912beb7@o787041.ingest.sentry.io/5799642
+ENV NUXT_PUBLIC_SENTRY_DSN=https://b6466b74788a4a2f8a7912eea912beb7@o787041.ingest.sentry.io/5799642
 
-ARG API_URL
+ARG API_URL=https://api.openverse.org/
+ENV NUXT_PUBLIC_API_URL=$API_URL
+# Increase memory limit for the build process (necessary for i18n routes)
+ENV NODE_OPTIONS="--max_old_space_size=4096"
 
 RUN pnpm build
 
@@ -67,7 +69,12 @@ COPY --from=builder --chown=node:node /home/node/frontend ./frontend/
 WORKDIR /home/node/frontend/
 
 ARG SEMANTIC_VERSION
-ENV SENTRY_RELEASE=$SEMANTIC_VERSION
+ARG DEPLOYMENT_ENV=production
+ARG API_URL=https://api.openverse.org/
+
+ENV NUXT_PUBLIC_API_URL=$API_URL
+ENV NUXT_PUBLIC_SENTRY_RELEASE=$SEMANTIC_VERSION
+ENV NUXT_PUBLIC_SENTRY_ENVIRONMENT=$DEPLOYMENT_ENV
 
 # set app serving to permissive / assigned
 ENV NUXT_HOST=0.0.0.0

frontend/Dockerfile.playwright

@@ -4,10 +4,17 @@ ARG PLAYWRIGHT_VERSION
 
 FROM mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-jammy
 
-COPY package.json /
+WORKDIR /frontend
+
+COPY package.json .
 
 # Ensure the Playwright container's pnpm cache folder exists and is writable
 RUN mkdir -p /.cache/node/corepack/ && chmod -R 777 /.cache/node/corepack/
 
 # Requires `packageManager` field to be present in `frontend/package.json`.
 RUN corepack enable pnpm
+
+# DO NOT actually run `pnpm install` here. Doing so requires us to copy the the source into the container.
+# However, that's a waste of time because we mount the source in the compose file anyway.
+# Instead, we run `pnpm install` in the entrypoint script defined in the compose file.
+# ENTRYPOINT ["pnpm", "install", "&&"]

frontend/docker-compose.playwright.yml

@@ -6,12 +6,15 @@ services:
       args:
         - PLAYWRIGHT_VERSION=${PLAYWRIGHT_VERSION}
     volumes:
-      - ../node_modules:/node_modules
-      - .:/frontend
-      - ${PWD}/../tsconfig.base.json:/tsconfig.base.json
+      - ../node_modules:/node_modules:rw,Z
+      - .:/frontend:rw,Z
     user: ${USER_ID}
     working_dir: /frontend
-    command: pnpm ${TEST_COMMAND} ${PLAYWRIGHT_ARGS:-}
+    entrypoint: >
+      /bin/sh -c '
+      pnpm install;
+      pnpm ${TEST_COMMAND} ${PLAYWRIGHT_ARGS:-};
+      '
     environment:
       # This makes the webserver that Playwright runs show the build
       - DEBUG=pw:webserver

frontend/justfile

@@ -35,6 +35,7 @@ export FRONTEND_PNPM_VERSION := `grep 'packageManager' ../package.json | awk -F'
 # Build the frontend Docker image
 build-img tag="openverse-frontend:local" target="app":
     docker build \
+      --load \
       --target {{ target }} \
       --build-context 'repo_root=..' \
       --build-arg FRONTEND_NODE_VERSION=$(just node-version) \