Merge branch 'master'

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine as builder
+FROM node:20-alpine AS builder
 
 ARG COMMIT_ID
 ENV COMMIT_ID=$COMMIT_ID
@@ -55,7 +55,7 @@ RUN --mount=type=cache,id=fem-builder-yarn,uid=1000,gid=1000,target=/home/node/.
 RUN echo $COMMIT_ID > /usr/src/packages/app-root/public/commit_id.txt
 RUN --mount=type=cache,id=fem-builder-yarn,uid=1000,gid=1000,target=/home/node/.yarn YARN_CACHE_FOLDER=/home/node/.yarn yarn workspace @zooniverse/fe-root build
 
-FROM node:20-alpine as runner
+FROM node:20-alpine AS runner
 
 ARG NODE_ENV=production
 ENV NODE_ENV=$NODE_ENV

README.md

@@ -71,16 +71,25 @@ You can run the code locally in Docker, which avoids needing to install Node or
 ```sh
 git clone [email protected]:zooniverse/front-end-monorepo.git
 cd front-end-monorepo
-docker-compose build
+# build first
+docker compose build
+# run all services in the background (no authentication available)
+# app-project at http://localhost:3002/projects/[owner]/[project-name]
+# app-root at http://localhost:3003
+docker compose up -d
+# shut down the running containers when you're finished
+docker compose down
+# run this if you need a shell inside the running container
+docker compose run --rm shell
 ```
 
-`cd` into either of the Next.js app directories.
-
-`docker-compose up` runs local production builds at http://localhost:3000.
-
-`docker-compose down` stops the running container.
-
-`docker-compose run --rm shell` runs an interactive shell on the Docker image.
+You can supply a service name (from `docker-compose.yml`) to `docker compose` if you only want to run a single service eg.
+```sh
+# only build the project app
+docker compose build fe-project
+# only run the project app
+docker compose up -d fe-project
+```
 
 Development environments for individual packages can be run from the package directories. For example:
 
@@ -89,7 +98,7 @@ cd packages/app-project
 docker-compose up
 ```
 
-to run a development server for the project app.
+to run a development server for the project app. See the READMEs for individual packages for detailed instructions.
 
 ### With Node and yarn
 

docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3.7'
-
 services:
   shell:
     image: front-end-monorepo_dev:latest
@@ -8,6 +6,8 @@ services:
     build:
       context: ./
       target: builder
+      args:
+        - APP_ENV=development
     command:
       - "/bin/sh"
   fe-project:

packages/app-project/README.md

@@ -19,9 +19,18 @@ Once you have the hosts file configured, you'll be able to use one of those subd
 
 ### Docker
 
-- `docker-compose up -d` to run a dev server, in the background, on http://localhost:3000 and the storybook on http://localhost:9001 using `yarn dev` and `yarn storybook` respectively. The `--build` flag can be used to build the container. This builds and runs a local image which matches the Jenkins build except for running behind a proxy. Note: `devcert` is not yet setup for our docker build for local development.
-- `docker-compose down` to stop the dev containers.
-- `docker-compose run --rm project test` to run the tests.
+```sh
+# run a development build using the top-level Dockerfile
+docker compose build
+# run a dev server on port 3000 (with HTTPS, but no authentication) and a storybook on port 9001.
+# eg. https://localhost:3000/projects/nora-dot-eisner/planet-hunters-tess
+# http://localhost:9001
+docker compose up -d
+# stop the local services when you're finished
+docker compose down
+# run the tests
+docker compose run --rm project test
+```
 
 ### Node
 ```sh

packages/app-project/docker-compose.yml

@@ -1,10 +1,15 @@
-version: '3.7'
-
 services:
   project:
     image: front-end-monorepo_dev:latest
+    environment:
+      PANOPTES_ENV: staging
+      APP_ENV: development
     build:
       context: ../../
+      target: builder
+      args:
+        - NEXT_TELEMETRY_DISABLED=1
+        - APP_ENV=development
     entrypoint:
       - "yarn"
       - "workspace"

packages/app-root/README.md

@@ -18,9 +18,17 @@ To view data from Contentful, you'll need to create a `.env` file containing the
 
 ### Docker
 
-- `docker-compose up -d` to run a dev server, in the background, on http://localhost:3000 using `yarn dev`. The `--build` flag can be used to build the container. This builds and runs a local image which matches the GitHub Action build except for running behind a proxy. Note: `devcert` is not yet setup for our docker build for local development.
-- `docker-compose down` to stop the dev containers.
-<!-- - `docker-compose run --rm root test` to run the tests. -->
+```sh
+# run a development build using the top-level Dockerfile
+docker compose build
+# run a dev server on port 3000 (with HTTPS, but no authentication).
+# eg. https://localhost:3000/about
+docker compose up -d
+# stop the local services when you're finished
+docker compose down
+# run the tests
+docker compose run --rm project test
+```
 
 ### Node
 

packages/app-root/docker-compose.yml

@@ -1,10 +1,15 @@
-version: '3.7'
-
 services:
   root:
     image: front-end-monorepo_dev:latest
+    environment:
+      PANOPTES_ENV: staging
+      APP_ENV: development
     build:
       context: ../../
+      target: builder
+      args:
+        - NEXT_TELEMETRY_DISABLED=1
+        - APP_ENV=development
     entrypoint:
       - "yarn"
       - "workspace"

packages/lib-classifier/package.json

@@ -122,7 +122,7 @@
     "style-loader": "~4.0.0",
     "styled-components": "~5.3.3",
     "superagent": "~8.1.0",
-    "webpack": "~5.94.0",
+    "webpack": "~5.96.1",
     "webpack-cli": "~5.1.0",
     "webpack-dev-server": "~5.1.0"
   },

packages/lib-user/package.json

@@ -87,7 +87,7 @@
     "snazzy": "~9.0.0",
     "storybook": "~7.6.11",
     "style-loader": "~4.0.0",
-    "webpack": "~5.94.0",
+    "webpack": "~5.96.1",
     "webpack-cli": "~5.1.0",
     "webpack-dev-server": "~5.1.0"
   },

yarn.lock

@@ -6836,6 +6836,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/eslint-scope@npm:^3.7.7":
+  version: 3.7.7
+  resolution: "@types/eslint-scope@npm:3.7.7"
+  dependencies:
+    "@types/eslint": "npm:*"
+    "@types/estree": "npm:*"
+  checksum: 10c0/a0ecbdf2f03912679440550817ff77ef39a30fa8bfdacaf6372b88b1f931828aec392f52283240f0d648cf3055c5ddc564544a626bcf245f3d09fcb099ebe3cc
+  languageName: node
+  linkType: hard
+
+"@types/eslint@npm:*":
+  version: 9.6.1
+  resolution: "@types/eslint@npm:9.6.1"
+  dependencies:
+    "@types/estree": "npm:*"
+    "@types/json-schema": "npm:*"
+  checksum: 10c0/69ba24fee600d1e4c5abe0df086c1a4d798abf13792d8cfab912d76817fe1a894359a1518557d21237fbaf6eda93c5ab9309143dee4c59ef54336d1b3570420e
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:*, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.5":
   version: 1.0.5
   resolution: "@types/estree@npm:1.0.5"
@@ -6850,6 +6870,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/estree@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "@types/estree@npm:1.0.6"
+  checksum: 10c0/cdfd751f6f9065442cd40957c07fd80361c962869aa853c1c2fd03e101af8b9389d8ff4955a43a6fcfa223dd387a089937f95be0f3eec21ca527039fd2d9859a
+  languageName: node
+  linkType: hard
+
 "@types/express-serve-static-core@npm:*":
   version: 4.17.30
   resolution: "@types/express-serve-static-core@npm:4.17.30"
@@ -6984,7 +7011,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
+"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
   checksum: 10c0/a996a745e6c5d60292f36731dd41341339d4eeed8180bb09226e5c8d23759067692b1d88e5d91d72ee83dfc00d3aca8e7bd43ea120516c17922cbcb7c3e252db
@@ -8120,7 +8147,7 @@ __metadata:
     superagent: "npm:~8.1.0"
     swr: "npm:~2.2.0"
     valid-url: "npm:~1.0.9"
-    webpack: "npm:~5.94.0"
+    webpack: "npm:~5.96.1"
     webpack-cli: "npm:~5.1.0"
     webpack-dev-server: "npm:~5.1.0"
   peerDependencies:
@@ -8486,7 +8513,7 @@ __metadata:
     style-loader: "npm:~4.0.0"
     swr: "npm:~2.2.4"
     uuid: "npm:~11.0.3"
-    webpack: "npm:~5.94.0"
+    webpack: "npm:~5.96.1"
     webpack-cli: "npm:~5.1.0"
     webpack-dev-server: "npm:~5.1.0"
   peerDependencies:
@@ -8605,6 +8632,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:^8.14.0":
+  version: 8.14.0
+  resolution: "acorn@npm:8.14.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 10c0/6d4ee461a7734b2f48836ee0fbb752903606e576cc100eb49340295129ca0b452f3ba91ddd4424a1d4406a98adfb2ebb6bd0ff4c49d7a0930c10e462719bbfd7
+  languageName: node
+  linkType: hard
+
 "add-stream@npm:^1.0.0":
   version: 1.0.0
   resolution: "add-stream@npm:1.0.0"
@@ -25510,7 +25546,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack@npm:5, webpack@npm:~5.94.0":
+"webpack@npm:5":
   version: 5.94.0
   resolution: "webpack@npm:5.94.0"
   dependencies:
@@ -25546,6 +25582,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack@npm:~5.96.1":
+  version: 5.96.1
+  resolution: "webpack@npm:5.96.1"
+  dependencies:
+    "@types/eslint-scope": "npm:^3.7.7"
+    "@types/estree": "npm:^1.0.6"
+    "@webassemblyjs/ast": "npm:^1.12.1"
+    "@webassemblyjs/wasm-edit": "npm:^1.12.1"
+    "@webassemblyjs/wasm-parser": "npm:^1.12.1"
+    acorn: "npm:^8.14.0"
+    browserslist: "npm:^4.24.0"
+    chrome-trace-event: "npm:^1.0.2"
+    enhanced-resolve: "npm:^5.17.1"
+    es-module-lexer: "npm:^1.2.1"
+    eslint-scope: "npm:5.1.1"
+    events: "npm:^3.2.0"
+    glob-to-regexp: "npm:^0.4.1"
+    graceful-fs: "npm:^4.2.11"
+    json-parse-even-better-errors: "npm:^2.3.1"
+    loader-runner: "npm:^4.2.0"
+    mime-types: "npm:^2.1.27"
+    neo-async: "npm:^2.6.2"
+    schema-utils: "npm:^3.2.0"
+    tapable: "npm:^2.1.1"
+    terser-webpack-plugin: "npm:^5.3.10"
+    watchpack: "npm:^2.4.1"
+    webpack-sources: "npm:^3.2.3"
+  peerDependenciesMeta:
+    webpack-cli:
+      optional: true
+  bin:
+    webpack: bin/webpack.js
+  checksum: 10c0/ae6052fde9a546f79f14987b65823ba4024c6642a8489339ecfee7a351dff93325842aad453295bbdc6b65fb1690e4ef07529db63aa84ece55c7869e991a0039
+  languageName: node
+  linkType: hard
+
 "websocket-driver@npm:>=0.5.1, websocket-driver@npm:^0.7.4":
   version: 0.7.4
   resolution: "websocket-driver@npm:0.7.4"