Migrate to vite

Author: evroon

.github/workflows/frontend.yml

@@ -16,17 +16,20 @@ jobs:
     steps:
       - uses: actions/checkout@v5
 
-      - name: Setup yarn
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Setup pnpm
         uses: actions/setup-node@v6
         with:
           node-version: '22'
-          cache: 'yarn'
-          cache-dependency-path: frontend/yarn.lock
+          cache: 'pnpm'
+          cache-dependency-path: frontend/pnpm-lock.yaml
 
       - name: Install npm modules
-        run: yarn
+        run: pnpm i
         working-directory: frontend
 
       - name: Run prettier, lint, jest checks
-        run: yarn test
+        run: pnpm test
         working-directory: frontend

.gitignore

@@ -6,6 +6,7 @@ uv.lock
 .mypy_cache
 .dmypy.json
 .pytest_cache
+.yarn
 
 *.env
 !ci.env

README.md

@@ -109,12 +109,12 @@ The frontend doesn't can be configured by environment variables as well, as well
 # Running Bracket in production
 Read the [deployment docs](https://docs.bracketapp.nl/docs/deployment) for how to deploy Bracket and run it in production.
 
-Bracket can be run in Docker or by itself (using `uv` and `yarn`).
+Bracket can be run in Docker or by itself (using `uv` and `pnpm`).
 
 # Development setup
 Read the [development docs](https://docs.bracketapp.nl/docs/community/development) for how to run Bracket for development.
 
-Prerequisites are `yarn`, `postgresql` and `uv` to run the frontend, database and backend.
+Prerequisites are `pnpm`, `postgresql` and `uv` to run the frontend, database and backend.
 
 # Translations
 Based on your browser settings, your language should be automatically detected and loaded. For now,

docs/content/community/development.mdx

@@ -56,7 +56,7 @@ two sections.
 
 ```bash
 cd frontend
-yarn run dev
+pnpm run dev
 ```
 
 ### Backend

docs/content/deployment/nomad.mdx

@@ -97,7 +97,7 @@ job "bracket-frontend" {
       config {
         image   = "ghcr.io/evroon/bracket-frontend"
         ports   = ["nextjs"]
-        args = ["yarn", "start", "-p", "${NOMAD_PORT_nextjs}"]
+        args = ["pnpm", "start", "-p", "${NOMAD_PORT_nextjs}"]
       }
 
       resources {

docs/content/deployment/systemd.mdx

@@ -51,7 +51,7 @@ After=network.target
 Type=simple
 User=bracket
 WorkingDirectory=/var/lib/bracket/frontend
-ExecStart=/usr/local/bin/yarn start
+ExecStart=/usr/local/bin/pnpm start
 Environment=NODE_ENV=production
 TimeoutSec=15
 Restart=always

frontend/.gitignore

@@ -14,6 +14,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

frontend/Dockerfile

@@ -3,11 +3,9 @@ FROM node:22-alpine AS deps
 
 WORKDIR /app
 
-COPY package.json yarn.lock ./
+COPY pnpm-lock.yaml package.json ./
 
-# Increase timeout for slow QEMU arm64 builds
-# https://github.com/nodejs/docker-node/issues/1335
-RUN yarn --network-timeout 1000000
+RUN corepack enable && pnpm i
 
 # Rebuild the source code only when needed
 FROM node:22-alpine AS builder
@@ -17,9 +15,11 @@ WORKDIR /app
 COPY . .
 COPY --from=deps /app/node_modules ./node_modules
 
-RUN NEXT_PUBLIC_API_BASE_URL=http://NEXT_PUBLIC_API_BASE_URL_PLACEHOLDER \
-    NEXT_PUBLIC_HCAPTCHA_SITE_KEY=NEXT_PUBLIC_HCAPTCHA_SITE_KEY_PLACEHOLDER \
-    yarn build
+RUN corepack enable
+
+RUN VITE_API_BASE_URL=http://VITE_API_BASE_URL_PLACEHOLDER \
+    VITE_HCAPTCHA_SITE_KEY=VITE_HCAPTCHA_SITE_KEY_PLACEHOLDER \
+    pnpm build
 
 # Production image, copy all the files and run next
 FROM node:22-alpine AS runner
@@ -29,21 +29,16 @@ WORKDIR /app
 ENV NODE_ENV=production
 
 RUN addgroup -g 1001 --system nodejs && \
-    adduser --system nextjs -u 1001 -G nodejs
+    adduser --system vite -u 1001 -G nodejs
 
-COPY --from=builder --chown=nextjs:nodejs /app/public ./public
-COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder --chown=vite:nodejs /app/public ./public
 COPY --from=builder /app/node_modules ./node_modules
 COPY --from=builder /app/package.json ./package.json
 COPY --from=builder --chmod=0755 /app/docker-entrypoint.sh ./entrypoint.sh
-COPY --from=builder /app/next.config.js ./next.config.js
-COPY --from=builder /app/next-i18next.config.js ./next-i18next.config.js
 
 RUN apk add bash
 
-RUN yarn next telemetry disable
-
-USER nextjs
+USER vite
 
 EXPOSE 3000
 
@@ -52,4 +47,4 @@ ENTRYPOINT ["/app/entrypoint.sh"]
 HEALTHCHECK --interval=10s --timeout=5s --retries=5 \
     CMD ["wget", "--spider", "http://0.0.0.0:3000", "||", "exit", "1"]
 
-CMD ["yarn", "start"]
+CMD ["pnpm", "start"]

frontend/i18n.ts

@@ -0,0 +1,18 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en',
+    defaultNS: 'common',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

frontend/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bracket</title>
+    <meta charSet="UTF-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="/favicon.svg" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>