Migration to Nuxt 3

.eslintignore

@@ -1,5 +1,7 @@
 coverage
 
+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,19 +17,8 @@ runs:
         # Pass -W to fail CI if warnings exist
         just documentation/build -W
 
-    - name: Install translations
-      shell: bash
-      run: |
-        just frontend/run i18n
-
-    - name: Build Storybook
-      shell: bash
-      run: |
-        just frontend/run storybook:build-for-docs
-
     # 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

@@ -209,6 +209,7 @@ jobs:
         if: matrix.image == 'frontend'
         run: |
           just frontend/run i18n
+          just frontend/run prepare-nuxt
 
       - name: Setup Docker Buildx
         uses: docker/setup-buildx-action@v3
@@ -648,14 +649,11 @@ jobs:
         name:
           - playwright_vr
           - playwright_e2e
-          - storybook
         include:
           - name: playwright_vr
             script: "test:playwright visual-regression"
           - name: playwright_e2e
             script: "test:playwright e2e"
-          - name: storybook
-            script: "test:storybook"
 
     steps:
       - name: Checkout repository
@@ -692,7 +690,6 @@ jobs:
         name:
           - playwright_vr
           - playwright_e2e
-          - storybook
 
     steps:
       - name: Pass

frontend/.env.template

@@ -1,3 +1,13 @@
-#API_URL=http://127.17.0.1:8000/
-#API_CLIENT_ID=""
-#API_CLIENT_SECRET=""
+#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.engineering/ # prod API
+#NUXT_API_CLIENT_ID=""
+#NUXT_API_CLIENT_SECRET=""
+NUXT_PUBLIC_SAVED_SEARCH_COUNT=4
+NUXT_PUBLIC_PROVIDER_UPDATE_FREQUENCY=3600000# 1 hour
+NUXT_PUBLIC_PLAUSIBLE_DOMAIN="openverse.org" #localhost
+NUXT_PUBLIC_PLAUSIBLE_API_HOST="https://openverse.org" #http://localhost:50290
+NUXT_PUBLIC_SENTRY_DSN="https://[email protected]/5799642"
+NUXT_PUBLIC_SENTRY_ENVIRONMENT="local"
+NUXT_PUBLIC_SENTRY_RELEASE=""
+PORT=8443

frontend/.gitignore

@@ -1,5 +1,6 @@
 # Nuxt
 .nuxt
+.output
 
 # Storybook
 .nuxt-storybook
@@ -11,6 +12,7 @@ test/Default
 
 # Coverage
 test/unit/coverage/
+coverage
 
 # Generated translation files
 *.pot

frontend/Dockerfile

@@ -22,7 +22,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
-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.
@@ -41,9 +41,10 @@ RUN pnpm install
 # disable telemetry when building the app
 ENV NUXT_TELEMETRY_DISABLED=1
 ENV NODE_ENV=production
-ENV SENTRY_DSN=https://[email protected]/5799642
+ENV NUXT_PUBLIC_SENTRY_DSN=https://[email protected]/5799642
 
-ARG API_URL
+ARG API_URL=https://api.openverse.engineering/
+ENV NUXT_PUBLIC_API_URL=$API_URL
 
 RUN pnpm build:only
 
@@ -68,7 +69,9 @@ 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
+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

@@ -6,7 +6,14 @@ FROM mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-jammy
 
 ARG PACKAGE_MANAGER
 
+WORKDIR /frontend
+
 COPY package.json .
 
 # Requires `packageManager` field to be present in `frontend/package.json`.
 RUN npm install -g $PACKAGE_MANAGER
+
+# 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

@@ -8,12 +8,15 @@ services:
         - PACKAGE_MANAGER=${PACKAGE_MANAGER}
         - 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