Chore/3960/upgrade nodejs v24

.github/workflows/claude.yml

@@ -33,7 +33,7 @@ jobs:
       - name: "Install Node"
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version-file: front_end/.nvmrc
           cache: "npm"
           cache-dependency-path: front_end/package-lock.json
       - name: "Install node_modules and build the frontend"

.github/workflows/integration_tests.yml

@@ -103,7 +103,7 @@ jobs:
       - name: "Install Node"
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version-file: front_end/.nvmrc
           cache: "npm"
           cache-dependency-path: front_end/package-lock.json
       - name: Cache node_modules

.github/workflows/storybook.yml

@@ -16,7 +16,7 @@ jobs:
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version-file: front_end/.nvmrc
           cache: npm
           cache-dependency-path: front_end/package-lock.json
       - run: npm ci

Dockerfile

@@ -86,7 +86,7 @@ COPY --from=backend_deps /app/venv /app/venv
 COPY --from=frontend_deps /app/front_end/node_modules /app/front_end/node_modules
 
 ENV NODE_ENV=production
-RUN cd front_end && npm run build && npm install pm2 -g
+RUN cd front_end && NODE_OPTIONS=--max-old-space-size=4096 npm run build && npm install pm2 -g
 RUN cd front_end && npx sentry-cli sourcemaps inject .next
 
 RUN source venv/bin/activate && ./manage.py collectstatic --noinput

README.md

@@ -127,22 +127,24 @@ poetry install
 ```
 
 ## Nvm/Node & Frontend
-You'll need node to build the frontend. We use nvm for managing node versions.
+You'll need node to build the frontend. We use nvm for managing node versions. 
 Install nvm with:
 ```bash
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
 ```
-Then, install node 20.18.0:
+For more detailed installation instructions, see the [nvm installation guide](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating).
+Then, install and use the node version specified in `.nvmrc`:
 ```bash
-nvm install 20.18.0
-nvm use 20.18.0
+cd front_end
+nvm install
+nvm use
 ```
-To install the frontend dependencies, run:
+This will automatically use the version specified in `front_end/.nvmrc` (currently 24.12.0).
+To install the frontend dependencies, run in the `front_end` directory:
 ```bash
-cd front_end
 npm install
 ```
-Note: you have to switch to the front_end directory to run the npm commands as they are all nested there.
+Note: you always have to switch to the `front_end` directory to run the npm commands as they are all nested there.
 
 ## Running the server
 The first time you're booting up the server, make sure postgres is running (`sudo service postgresql start`), then you'll need to run the migrations and collect static files. Start by navigating to the root directory.
@@ -163,7 +165,7 @@ poetry run python manage.py runserver
 Running the front end is pretty easy. Note that you'll have to navigate to the `front_end` directory first.
 ```bash
 cd front_end
-nvm use 20.18.0 # If node 20.18.0 is not already being used
+nvm use # Uses the version specified in .nvmrc
 npm run dev
 ```
 

front_end/.nvmrc

@@ -1 +1 @@
-20.18.0
+24.12.0

front_end/.prettierrc.json

@@ -10,5 +10,7 @@
   "tabWidth": 2,
   "trailingComma": "es5",
   "useTabs": false,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindPreserveWhitespace": true,
+  "tailwindPreserveDuplicates": true
 }

front_end/package.json

@@ -97,7 +97,7 @@
     "storybook": "^9.1.17",
     "strip-markdown": "^6.0.0",
     "stripe": "^17.7.0",
-    "tailwind-merge": "^2.5.5",
+    "tailwind-merge": "^2.6.0",
     "ts-invariant": "^0.10.3",
     "ts-node": "^10.9.2",
     "victory": "^37.0.2",
@@ -115,11 +115,11 @@
     "husky": "^9.0.11",
     "lint-staged": "^15.2.4",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8",
+    "postcss": "^8.5.6",
     "prettier": "3.3.1",
-    "prettier-plugin-tailwindcss": "0.5.14",
+    "prettier-plugin-tailwindcss": "0.7.2",
     "server-only": "^0.0.1",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.19",
     "typescript": "^5.8.2"
   },
   "overrides": {

front_end/src/components/markdown_editor/editor.css

@@ -59,7 +59,8 @@
 }
 
 .mdxeditor-toolbar {
-  @apply sticky top-12 flex-wrap @container;
+  @apply sticky top-12 flex-wrap;
+  container-type: inline-size;
   & [class*="toolbarTitleMode"] {
     display: none; /* We render our custom source mode title instead */
   }