Merge branch 'main' into audio_layouts

.dockerignore

@@ -0,0 +1,41 @@
+# os
+.DS_Store
+
+# directories
+node_modules/
+dist/
+test/
+.storybook/
+.husky/
+.github/
+.idea/
+.vscode/
+.nuxt/
+.nuxt-storybook
+storybook-static
+.vercel
+.git
+
+# log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+selenium-debug.log
+
+# files
+.env
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+vercel.json
+.eslintcache
+.editorconfig
+.eslintignore
+.eslintrc.js
+.lintstagedrc
+.prettierignore
+*.md
+LICENSE
+
+

.github/workflows/build.yaml

@@ -0,0 +1,52 @@
+# this build is triggered when a new pre-release has been created
+# it creates a new docker build image based on the tag associated
+
+name: build
+
+on:
+  release:
+    types:
+      - 'prereleased'
+env:
+  AWS_REGION: ${{ secrets.AWS_REGION }}
+  AWS_ACCOUNT_ID: ${{ secrets.AWS_ACCOUNT_ID }}
+  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+jobs:
+  build:
+    name: build
+    runs-on: ubuntu-latest
+
+    steps:
+      # download the source code into the runner
+      - name: checkout
+        uses: actions/checkout@v2
+
+      # gather metadata from git & github actions to reference in docker
+      - name: git & github metadata
+        id: metadata
+        uses: docker/metadata-action@v3
+        with:
+          images: ${{ env.AWS_ACCOUNT_ID }}.dkr.ecr.${{ env.AWS_REGION }}.amazonaws.com/openverse/frontend
+
+      # setup docker buildx
+      - name: setup docker buildx
+        uses: docker/setup-buildx-action@v1
+        with:
+          install: true
+
+      # login in docker repository
+      - name: docker login
+        uses: aws-actions/amazon-ecr-login@v1
+
+      # build a docker image
+      - name: build docker image
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          tags: ${{ steps.metadata.outputs.tags }}
+          labels: ${{ steps.metadata.outputs.labels }}
+          push: true
+
+

.github/workflows/ci.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: '14.17.5'
+          node-version: '16.13.0'
 
       - name: Cache Node.js modules
         uses: actions/cache@v1

.github/workflows/pre-build.yaml

@@ -0,0 +1,48 @@
+# this workflow will try to lint and build a node.js application
+#
+# this is useful for stages that you require to make sure everything is working
+# properly before creating a container image to be pushed on the cloud
+#
+name: pre_build
+
+on:
+  pull_request:
+  push:
+    branches:
+      - 'main'
+      - 'ci/*' # branches that follows the pattern ci/* can access this workflow too
+
+jobs:
+  pre_build:
+    name: pre_build
+    runs-on: ubuntu-latest
+
+    steps:
+      # download the source code into the runner
+      - name: checkout
+        uses: actions/checkout@v2
+
+      # setup node.js environment and npm
+      - name: setup node environment
+        uses: actions/setup-node@v2
+        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') }}
+
+      # 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 lint and syntax
+      - name: lint & syntax check
+        run: npm run lint
+

Dockerfile

@@ -1,19 +1,91 @@
-FROM node:14-alpine
+# ==
+# builder
+# ==
+
+# application builder
+FROM node:16 AS builder
 
-# directory for the app in the container
 WORKDIR /usr/app
 
-# copies all the app's files from host into the container folder which
-# might include the node_modules dir if npm install executed in the host
+# copy package.json and package-lock.json files
+COPY package*.json .
+
+# install dependencies including local development tools
+RUN npm install
+
+# copy the rest of the content
 COPY . /usr/app
 
-# removes any existing node_modules folder
-# this prevents the host's node_modules from being used in the container
-# which could cause issues with native binaries such as node_sass.
-RUN rm -rf /usr/app/node_modules/
+# disable telemetry when building the app
+ENV NUXT_TELEMETRY_DISABLED=1
+
+# build the application and generate a distribution package
+RUN npm run build
+
+# ==
+# development
+# ==
+# application for development purposes
+FROM node:16 AS dev
+
+WORKDIR /usr/app
 
+ENV NODE_ENV=development
 ENV CYPRESS_INSTALL_BINARY=0
 
-RUN npm install -g npm@7.21.0 && \
-    npm install && \
-    npm run i18n:get-translations
+# copy files from local machine
+COPY . /usr/app
+
+# disable telemetry when building the app
+ENV NUXT_TELEMETRY_DISABLED=1
+
+# install dependencies (development dependencies included)
+RUN npm install
+
+# expose port 8443
+EXPOSE 8443
+
+# run the application in development mode
+ENTRYPOINT [ "npm", "run", "dev" ]
+
+# ==
+# production
+# ==
+# application package (for production)
+FROM node:alpine AS app
+
+WORKDIR /usr/app
+
+ENV NODE_ENV=production
+ENV PLAYWRIGHT_SKIP_BROWSER_GC=1
+
+# copy the package.json and package-lock.json files
+COPY package*.json .
+
+# copy the nuxt configuration file
+COPY --from=builder /usr/app/nuxt.config.js .
+
+# copy distribution directory with the static content
+COPY --from=builder /usr/app/.nuxt /usr/app/.nuxt
+
+# copy some files required by nuxt.config.js
+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
+
+# set app serving to permissive / assigned
+ENV NUXT_HOST=0.0.0.0
+
+# set app port
+ENV NUXT_PORT=8443
+
+# set application port
+ENV PORT=8443
+
+# expose port 8443 by default
+EXPOSE 8443
+
+# run the application in static mode
+ENTRYPOINT ["npm", "start"]
+

docker-compose.yml

@@ -1,10 +1,12 @@
 version: '3'
 services:
   web:
-    build: .
-    command: npm run dev
+    build:
+      context: .
+      target: dev
     ports:
       - '8443:8443'
     environment:
       # HOST is necessary for Nuxt + Docker
       HOST: 0.0.0.0
+      PORT: 8443

nuxt.config.js

@@ -166,18 +166,20 @@ export default {
   styleResources: {
     scss: ['./styles/utilities/all.scss'],
   },
-  modules: [
-    '@nuxtjs/sentry',
-    'nuxt-ssr-cache',
-    '@nuxtjs/i18n',
-    '@nuxtjs/sitemap',
+  modules: ['@nuxtjs/sentry', '@nuxtjs/i18n', '@nuxtjs/sitemap'],
+  serverMiddleware: [
+    { path: '/healthcheck', handler: '~/server-middleware/healthcheck.js' },
   ],
   i18n: {
     locales: [
       {
+        // unique identifier for the locale in Vue i18n
         code: 'en',
         name: 'English',
+        // ISO code used for SEO purposes (html lang attribute)
         iso: 'en',
+        // wp_locale as found in GlotPress
+        wpLocale: 'en_US',
         file: 'en.json',
       },
       ...(locales ?? []),
@@ -203,7 +205,9 @@ export default {
   sentry: {
     dsn:
       process.env.SENTRY_DSN ||
-      'https://3f3e05dbe6994c318d1bf1c8bfcf71a1@o288582.ingest.sentry.io/1525413',
+      'https://53da8fbcebeb48a6bf614a212629df6b@o787041.ingest.sentry.io/5799642',
+    disabled: process.env.NODE_ENV === 'development',
+    environment: process.env.NODE_ENV,
     lazy: true,
   },
   tailwindcss: {