diff --git a/.github/workflows/ghcr.yml b/.github/workflows/ghcr.yml index daa317f4e0..0d3432ff90 100644 --- a/.github/workflows/ghcr.yml +++ b/.github/workflows/ghcr.yml @@ -14,8 +14,7 @@ jobs: runs-on: ubuntu-latest steps: - - name: checkout - uses: actions/checkout@v2 + - uses: actions/checkout@v2 - uses: docker/setup-buildx-action@v1 with: @@ -35,9 +34,16 @@ jobs: type=sha type=ref,event=tag + - name: Get pnpm-version + id: pnpm-version + run: | + echo "::set-output name=val::$(cat .pnpm-version)" + - uses: docker/build-push-action@v2 with: context: . tags: ${{ steps.metadata.outputs.tags }} labels: ${{ steps.metadata.outputs.labels }} push: true + build-args: | + PNPM_VERSION=${{ steps.pnpm-version.outputs.val }} diff --git a/.pnpm-version b/.pnpm-version new file mode 100644 index 0000000000..8a00ab7df5 --- /dev/null +++ b/.pnpm-version @@ -0,0 +1 @@ +6.32.11 diff --git a/Dockerfile b/Dockerfile index 2776eb7767..64143b41d3 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,101 +1,33 @@ -# == -# builder -# == +FROM node:16-alpine -# application builder -FROM node:16 AS builder +ARG PNPM_VERSION -WORKDIR /usr/app +RUN npm install -g pnpm@${PNPM_VERSION} -ARG API_URL +USER node -# Install pnpm -RUN npm install -g pnpm +WORKDIR /home/node/app -# copy package.json and package-lock.json files -COPY package.json . COPY pnpm-lock.yaml . -COPY .npmrc . # install dependencies including local development tools -RUN pnpm install --store=pnpm-store +RUN pnpm fetch # copy the rest of the content -COPY . /usr/app - -# disable telemetry when building the app -ENV NUXT_TELEMETRY_DISABLED=1 - -# build the application and generate a distribution package -RUN pnpm build - -# == -# development -# == -# application for development purposes -FROM node:16 AS dev +COPY --chmod=777 . /home/node/app -WORKDIR /usr/app - -# Install pnpm -RUN npm install -g pnpm - -ENV NODE_ENV=development -ENV CYPRESS_INSTALL_BINARY=0 - -# copy files from local machine -COPY . /usr/app - -COPY --from=builder /usr/app/pnpm-store /usr/app/pnpm-store +RUN pnpm install -r --offline # disable telemetry when building the app ENV NUXT_TELEMETRY_DISABLED=1 -# install dependencies (development dependencies included) -RUN pnpm install --store=pnpm-store - -# expose port 8443 -EXPOSE 8443 - -# run the application in development mode -ENTRYPOINT [ "pnpm", "run", "dev" ] - -# == -# production -# == -# application package (for production) -FROM node:16-alpine AS app - -WORKDIR /usr/app - -# Install pnpm -RUN npm install -g pnpm - ENV NODE_ENV=production -ENV PLAYWRIGHT_SKIP_BROWSER_GC=1 - -# 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.ts . - -# copy distribution directory with the static content -COPY --from=builder /usr/app/.nuxt /usr/app/.nuxt -# copy publically-accessible static assets -COPY --from=builder /usr/app/src/static /usr/app/src/static - -# Copy over files needed by Nuxt's runtime process -COPY --from=builder /usr/app/src/locales /usr/app/src/locales -COPY --from=builder /usr/app/src/utils /usr/app/src/utils -COPY --from=builder /usr/app/src/constants /usr/app/src/constants -COPY --from=builder /usr/app/src/server-middleware /usr/app/src/server-middleware -COPY --from=builder /usr/app/pnpm-store /usr/app/pnpm-store +ARG API_URL -RUN pnpm install --frozen-lockfile --store=pnpm-store +RUN pnpm i18n +# build the application and generate a distribution package +RUN pnpm build:only # set app serving to permissive / assigned ENV NUXT_HOST=0.0.0.0 diff --git a/Dockerfile.playwright b/Dockerfile.playwright index b2056dfc94..7dc22c195c 100644 --- a/Dockerfile.playwright +++ b/Dockerfile.playwright @@ -1,5 +1,6 @@ ARG PLAYWRIGHT_VERSION +ARG PNPM_VERSION FROM mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-focal -RUN npm install -g pnpm +RUN npm install -g pnpm@${PNPM_VERSION} diff --git a/README.md b/README.md index d6db0960fd..5a249ba7fa 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ We use [Volta](https://volta.sh/) to manage our local environment tools. Please 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 +volta install pnpm@$(cat .pnpm-version) ``` Run the following commands in order to have the code up and running on your machine: @@ -74,18 +74,14 @@ You can find the local IP address Nuxt uses by looking at the output of `nuxt de You will need to regenerate the certificate if this IP address changes for any reason, like by enabling a VPN or changing networks. -### Docker setup +### Choosing which API to use -Alternatively, you can use Docker to build and run the application. You just have to run: +You don't need to have the Openverse API running locally to be able to run the frontend application. It's configured to communicate, by default, with the [production API](https://api.openverse.engineering) that's already publicly available. If you need to test against changes in your local API, set the `API_URL` environment variable when run the development server. -```bash -docker-compose up +```shell +API_URL=http://localhost:8000 pnpm dev ``` -You should now have the application running and accessible at http://localhost:8443. - -You don't need to have the Openverse API running locally to be able to run the frontend application. It's configured to communicate, by default, with the [API](https://api.openverse.engineering) that's already publicly available. If you wish, you can change the URL of the API that's used during development by setting the `API_URL` environment variable. - ### Standalone and embedded modes The application can run in two modes. By default, it runs in embedded mode, which is loaded in an iframe on [WordPress.org/openverse](https://make.wordpress.org/openverse). It has a small header without logo and no footer. @@ -112,6 +108,26 @@ If you need to run an HTTP version (for example, if you're testing against third ngrok http 8443 -host-header="localhost:8443" ``` +## Docker and Openverse frontend + +We do not currently support local development using Docker or `docker-compose`. It was supported in the past, but it was not used by the core contributors. It remained broken for many months without ever being noticed, so the assumption is that it was also not being used active community members. Local `nuxt` development is still easy across platforms, so maintaining a separate Docker development stack for the frontend did not make sense. + +However, we do build and actively deploy the frontend using Docker images. If you wish to build the production image for yourself, run the following: + +```shell +docker build . --build-arg PNPM_VERSION=$(cat .pnpm-version) -t openverse-frontend:latest +``` + +You can also find the latest `openverse-frontend` images on our [GitHub packages page](https://github.com/WordPress/openverse-frontend/pkgs/container/openverse-frontend). + +You can then run using either the locally built image or the `ghcr.io` image from the link above: + +```shell +docker run -it -p 127.0.0.1:8443:8443/tcp openverse-frontend:latest +``` + +The app will be available at http://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 `pnpm lint:fix` 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). diff --git a/bin/playwright.sh b/bin/playwright.sh index 275e425ef3..5aa1a6264c 100755 --- a/bin/playwright.sh +++ b/bin/playwright.sh @@ -8,6 +8,7 @@ export USER_ID=${USER_ID:-$(id -u)} export PLAYWRIGHT_ARGS=$@ export PLAYWRIGHT_VERSION=$(version) export TEST_COMMAND=${TEST_COMMAND:-test:playwright:local} +export PNPM_VERSION=$(cat .pnpm-version) echo Running Playwright v$PLAYWRIGHT_VERSION as $USER_ID with Playwright arguments $PLAYWRIGHT_ARGS diff --git a/docker-compose.playwright.yml b/docker-compose.playwright.yml index d768d9d4f1..ae53bfbf72 100644 --- a/docker-compose.playwright.yml +++ b/docker-compose.playwright.yml @@ -6,6 +6,7 @@ services: dockerfile: Dockerfile.playwright args: - PLAYWRIGHT_VERSION=${PLAYWRIGHT_VERSION} + - PNPM_VERSION=${PNPM_VERSION} volumes: - .:/app user: ${USER_ID} diff --git a/docker-compose.yml b/docker-compose.yml deleted file mode 100644 index c504c20e24..0000000000 --- a/docker-compose.yml +++ /dev/null @@ -1,12 +0,0 @@ -version: "3" -services: - web: - build: - context: . - target: dev - ports: - - "8443:8443" - environment: - # HOST is necessary for Nuxt + Docker - HOST: 0.0.0.0 - PORT: 8443