refactor: update Next.js, React.js and Node.js (#815)

* refactor: update Next.js and React.js

* refactor: update Next.js images

* refactor: update ESLint rules and fix warnings/errors

* fix: remove old intl polyfill

* fix: add proper size to next/image components

* fix: adjust full-size for next/image components

* fix: temporary allow all domains for image optimization

* build: fixes an issue where dev env could lead to javascript heap out of memory

* fix: resolve webpack cache issue with country-flag-icons

* refactor: switch compiler from Babel to SWC

* fix: resize logo in sidebar

* fix: break word on long path to avoid text overflow

* chore: added sharp for production image optimisation

* fix: change extract script for i18n to a custom script

* fix: resolve GitHub CodeQL alert

* chore: temporarily remove builds for ARMv7

* fix: resize avatar images

* refactor: update Node.js to v20

* fix: resolve various UI issues

* build: migrate yarn to pnpm and restrict engine to node@^20.0.0

* ci: specify the pnpm version to use in workflow actions

* ci: fix typo in pnpm action-setup for cypress workflow

* test(cypress): use pnpm instead of yarn

* style: ran prettier on pnpm-lock

* ci(cypress): setup nodejs v20 in cypress workflow

* ci: pnpm cache to reduce install time

* ci: use sh shell to get pnpm store directory

* build(dockerfile): migrate to pnpm from yarn in docker builds

* build(dockerfile): copy the proper pnpm lockfile

* build: install pnpm for all platforms

* build(dockerfile): remove unnecessary `&&` on apk installation steps

* build: migrate pnpm 8 to 9

* build(dockerfile): add node-gyp back in

* build(dockerfile): install node-gyp through npm

* build(dockerfile): ignore scripts to not run husky install when devdependencies are pruned

* build: migrate to pnpm from yarn

* chore: remove a section that is no longer relevant

---------

Co-authored-by: fallenbagel <[email protected]>

.eslintrc.js

@@ -5,9 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
     'plugin:jsx-a11y/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:react/jsx-runtime',
+    'plugin:@next/next/recommended',
     'prettier',
   ],
   parserOptions: {

.github/workflows/ci.yml

@@ -13,20 +13,35 @@ jobs:
     name: Lint & Test Build
     if: github.event_name == 'pull_request'
     runs-on: ubuntu-22.04
-    container: node:18.18-alpine
+    container: node:20-alpine
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - name: Pnpm Setup
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Get pnpm store directory
+        shell: sh
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
         env:
           HUSKY: 0
-        run: yarn
+        run: pnpm install
       - name: Lint
-        run: yarn lint
+        run: pnpm lint
       - name: Formatting
-        run: yarn format:check
+        run: pnpm format:check
       - name: Build
-        run: yarn build
+        run: pnpm build
 
   build_and_push:
     name: Build & Publish Docker Images
@@ -60,7 +75,7 @@ jobs:
         with:
           context: .
           file: ./Dockerfile
-          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          platforms: linux/amd64,linux/arm64
           push: true
           build-args: |
             COMMIT_TAG=${{ github.sha }}

.github/workflows/cypress.yml

@@ -14,11 +14,19 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Pnpm Setup
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
-          build: yarn cypress:build
-          start: yarn start
+          build: pnpm cypress:build
+          start: pnpm start
           wait-on: 'http://localhost:5055'
           record: true
         env:

.github/workflows/preview.yml

@@ -29,7 +29,7 @@ jobs:
         with:
           context: .
           file: ./Dockerfile
-          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          platforms: linux/amd64,linux/arm64
           push: true
           build-args: |
             COMMIT_TAG=${{ github.sha }}

.github/workflows/release.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
       - name: Set up Docker Buildx
@@ -26,8 +26,23 @@ jobs:
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_TOKEN }}
+      - name: Pnpm Setup
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Get pnpm store directory
+        shell: sh
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
-        run: yarn
+        run: pnpm install
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
@@ -45,7 +60,6 @@ jobs:
   #       architecture:
   #         - amd64
   #         - arm64
-  #         - armhf
   #   steps:
   #     - name: Checkout Code
   #       uses: actions/checkout@v4

.github/workflows/snap.yaml

@@ -30,7 +30,6 @@ jobs:
         architecture:
           - amd64
           - arm64
-          - armhf
     steps:
       - name: Checkout Code
         uses: actions/checkout@v4

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.18-alpine AS BUILD_IMAGE
+FROM node:20-alpine AS BUILD_IMAGE
 
 WORKDIR /app
 
@@ -10,22 +10,24 @@ RUN \
   'linux/arm64' | 'linux/arm/v7') \
   apk update && \
   apk add --no-cache python3 make g++ gcc libc6-compat bash && \
-  yarn global add node-gyp \
+  npm install --global node-gyp \
   ;; \
   esac
 
-COPY package.json yarn.lock ./
-RUN CYPRESS_INSTALL_BINARY=0 yarn install --frozen-lockfile --network-timeout 1000000
+Run npm install --global pnpm
+
+COPY package.json pnpm-lock.yaml ./
+RUN CYPRESS_INSTALL_BINARY=0 pnpm install --frozen-lockfile
 
 COPY . ./
 
 ARG COMMIT_TAG
 ENV COMMIT_TAG=${COMMIT_TAG}
 
-RUN yarn build
+RUN pnpm build
 
 # remove development dependencies
-RUN yarn install --production --ignore-scripts --prefer-offline
+RUN pnpm prune --prod --ignore-scripts
 
 RUN rm -rf src server .next/cache
 
@@ -34,7 +36,7 @@ RUN touch config/DOCKER
 RUN echo "{\"commitTag\": \"${COMMIT_TAG}\"}" > committag.json
 
 
-FROM node:18.18-alpine
+FROM node:20-alpine
 
 # Metadata for Github Package Registry
 LABEL org.opencontainers.image.source="https://github.com/Fallenbagel/jellyseerr"
@@ -47,6 +49,6 @@ RUN apk add --no-cache tzdata tini && rm -rf /tmp/*
 COPY --from=BUILD_IMAGE /app ./
 
 ENTRYPOINT [ "/sbin/tini", "--" ]
-CMD [ "yarn", "start" ]
+CMD [ "pnpm", "start" ]
 
 EXPOSE 5055

Dockerfile.local

@@ -1,8 +1,10 @@
-FROM node:18.18-alpine
+FROM node:20-alpine
 
 COPY . /app
 WORKDIR /app
 
-RUN yarn
+Run npm install --global pnpm
 
-CMD yarn dev
+RUN pnpm install
+
+CMD pnpm dev

README.md

@@ -21,6 +21,8 @@ _The original Overseerr team have been busy and Jellyfin/Emby support aren't on
 
 ## Current Features
 
+<!--  -->
+
 - Full Jellyfin/Emby/Plex integration including authentication with user import & management
 - Supports Movies, Shows and Mixed Libraries
 - Ability to change email addresses for smtp purposes
@@ -38,10 +40,6 @@ With more features on the way! Check out our [issue tracker](https://github.com/
 
 ## Getting Started
 
-#### Pre-requisite (Important)
-
-_*On Jellyfin/Emby, ensure the `Settings > Home > Automatically group content from the following folders into views such as 'Movies', 'Music' and 'TV'` is turned off*_
-
 ### Launching Jellyseerr using Docker (Recommended)
 
 Check out our docker hub for instructions on how to install and run Jellyseerr:
@@ -53,28 +51,30 @@ https://hub.docker.com/r/fallenbagel/jellyseerr
 
 Pre-requisites:
 
-- Nodejs [v18](https://nodejs.org/download/release/v18.18.2)
-- [Yarn](https://classic.yarnpkg.com/lang/en/docs/install)
+- Nodejs [v20](https://nodejs.org/en/download)
+- Pnpm [v9](https://pnpm.io/installation)
 - Download/git clone the source code from the github (Either develop branch or main for stable)
 
 ```cmd
 npm i -g win-node-env
 set CYPRESS_INSTALL_BINARY=0
-yarn install --frozen-lockfile --network-timeout 1000000
-yarn run build
-yarn start
+pnpm install --frozen-lockfile
+pnpm add [email protected]
+pnpm run build
+pnpm start
 ```
 
-(You can use task scheduler to run a bat script with `@echo off` and `yarn start` to run jellyseerr in the background)
+(You can use task scheduler to run a bat script with `@echo off` and `pnpm start` to run jellyseerr in the background)
+(You can also use nssm to run jellyseerr as a service, see [nssm](https://nssm.cc/usage) for more information)
 
 _To set env variables such as `JELLYFIN_TYPE=emby` create a file called `.env` in the root directory of jellyseerr_
 
 #### Linux
 
 **Pre-requisites:**
 
-- Nodejs [v18](https://nodejs.org/en/download/package-manager)
-- [Yarn](https://classic.yarnpkg.com/lang/en/docs/install) (on Debian based distros, the package manager provided `yarn` is different and is a package called cmdlet. You can remove that using `apt-remove cmdlet` then install yarn using `npm install -g yarn`)
+- Nodejs [v20](https://nodejs.org/en/download)
+- Pnpm [v9](https://pnpm.io/installation)
 - Git
 
 **Steps:**
@@ -95,11 +95,11 @@ git checkout main
 3. Then install the dependencies and build the dist
 
 ```bash
-CYPRESS_INSTALL_BINARY=0 yarn install --frozen-lockfile --network-timeout 1000000
-yarn run build
+CYPRESS_INSTALL_BINARY=0 pnpm install --frozen-lockfile
+pnpm build
 ```
 
-4. Now you can start jellyseerr using `yarn start` and opening http://localhost:5055 in your browser.
+4. Now you can start jellyseerr using `pnpm start` and opening http://localhost:5055 in your browser.
 
 5. If you want to run jellyseerr as a _Systemd-service:_
 
@@ -147,7 +147,7 @@ WantedBy=multi-user.target
 
 Archlinux: [AUR](https://aur.archlinux.org/packages/jellyseerr)
 Nixpkg: [Nixpkg](https://search.nixos.org/packages?channel=unstable&show=jellyseerr)
-Snap: [Snap](https://snapcraft.io/jellyseerr)
+~Snap: [Snap](https://snapcraft.io/jellyseerr)~(Deprecated)
 
 ## Preview
 

cypress/support/e2e.ts

@@ -2,6 +2,6 @@ import './commands';
 
 before(() => {
   if (Cypress.env('SEED_DATABASE')) {
-    cy.exec('yarn cypress:prepare');
+    cy.exec('pnpm cypress:prepare');
   }
 });

next.config.js

@@ -10,7 +10,11 @@ module.exports = {
     JELLYFIN_TYPE: process.env.JELLYFIN_TYPE,
   },
   images: {
-    domains: ['image.tmdb.org'],
+    remotePatterns: [
+      { hostname: 'gravatar.com' },
+      { hostname: 'image.tmdb.org' },
+      { hostname: '*', protocol: 'https' },
+    ],
   },
   webpack(config) {
     config.module.rules.push({