🔧 Migrate from npm to Bun (#2097)

Author: alejsdev

.github/workflows/generate-client.yml

@@ -20,9 +20,7 @@ jobs:
       with:
         ref: ${{ github.head_ref }}
         token: ${{ secrets.FULL_STACK_FASTAPI_TEMPLATE_REPO_TOKEN }}
-    - uses: actions/setup-node@v6
-      with:
-        node-version: lts/*
+    - uses: oven-sh/setup-bun@v2
     - uses: actions/setup-python@v6
       with:
         python-version: "3.10"
@@ -32,7 +30,7 @@ jobs:
         version: "0.4.15"
         enable-cache: true
     - name: Install dependencies
-      run: npm ci
+      run: bun ci
     - run: uv sync
       working-directory: backend
     - run: uv run bash scripts/generate-client.sh

.github/workflows/playwright.yml

@@ -48,9 +48,7 @@ jobs:
       fail-fast: false
     steps:
     - uses: actions/checkout@v6
-    - uses: actions/setup-node@v6
-      with:
-        node-version: lts/*
+    - uses: oven-sh/setup-bun@v2
     - uses: actions/setup-python@v6
       with:
         python-version: '3.10'
@@ -66,15 +64,15 @@ jobs:
         enable-cache: true
     - run: uv sync
       working-directory: backend
-    - run: npm ci
+    - run: bun ci
       working-directory: frontend
     - run: uv run bash scripts/generate-client.sh
       env:
         VIRTUAL_ENV: backend/.venv
     - run: docker compose build
     - run: docker compose down -v --remove-orphans
     - name: Run Playwright tests
-      run: docker compose run --rm playwright npx playwright test --fail-on-flaky-tests --trace=retain-on-failure --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+      run: docker compose run --rm playwright bunx playwright test --fail-on-flaky-tests --trace=retain-on-failure --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
     - run: docker compose down -v --remove-orphans
     - name: Upload blob report to GitHub Actions Artifacts
       if: ${{ !cancelled() }}
@@ -94,19 +92,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v6
-    - uses: actions/setup-node@v6
-      with:
-        node-version: 20
+    - uses: oven-sh/setup-bun@v2
     - name: Install dependencies
-      run: npm ci
+      run: bun ci
     - name: Download blob reports from GitHub Actions Artifacts
       uses: actions/download-artifact@v7
       with:
         path: frontend/all-blob-reports
         pattern: blob-report-*
         merge-multiple: true
     - name: Merge into HTML Report
-      run: npx playwright merge-reports --reporter html ./all-blob-reports
+      run: bunx playwright merge-reports --reporter html ./all-blob-reports
       working-directory: frontend
     - name: Upload HTML report
       uses: actions/upload-artifact@v6

.github/workflows/pre-commit.yml

@@ -37,9 +37,7 @@ jobs:
         # To be able to commit it needs the head branch of the PR, the remote one
           ref: ${{ github.event.pull_request.head.sha }}
           fetch-depth: 0
-      - uses: actions/setup-node@v6
-        with:
-          node-version: lts/*
+      - uses: oven-sh/setup-bun@v2
       - name: Set up Python
         uses: actions/setup-python@v6
         with:
@@ -54,7 +52,7 @@ jobs:
       - name: Install backend dependencies
         run: uv sync --all-packages
       - name: Install frontend dependencies
-        run: npm ci
+        run: bun ci
       - name: Run prek - pre-commit
         id: precommit
         run: uvx prek run --from-ref origin/${GITHUB_BASE_REF} --to-ref HEAD --show-diff-on-failure

.nvmrc

@@ -63,7 +63,7 @@ docker compose stop frontend
 And then start the local frontend development server:
 
 ```bash
-npm run dev
+bun run dev
 ```
 
 Or you could stop the `backend` Docker Compose service:

bun.lock

@@ -98,15 +98,16 @@ services:
     ports:
       - "5173:80"
     build:
-      context: ./frontend
+      context: .
+      dockerfile: frontend/Dockerfile
       args:
         - VITE_API_URL=http://localhost:8000
         - NODE_ENV=development
 
   playwright:
     build:
-      context: ./frontend
-      dockerfile: Dockerfile.playwright
+      context: .
+      dockerfile: frontend/Dockerfile.playwright
       args:
         - VITE_API_URL=http://backend:8000
         - NODE_ENV=production
@@ -123,8 +124,8 @@ services:
       - PLAYWRIGHT_HTML_HOST=0.0.0.0
       - CI=${CI}
     volumes:
-      - ./frontend/blob-report:/app/blob-report
-      - ./frontend/test-results:/app/test-results
+      - ./frontend/blob-report:/app/frontend/blob-report
+      - ./frontend/test-results:/app/frontend/test-results
     ports:
       - 9323:9323
 

development.md

@@ -1,23 +1,26 @@
-# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
-FROM node:24 AS build-stage
+# Stage 0, "build-stage", based on Bun, to build and compile the frontend
+FROM oven/bun:1 AS build-stage
 
 WORKDIR /app
 
-COPY package*.json /app/
+COPY package.json bun.lock /app/
 
-RUN npm install
+COPY frontend/package.json /app/frontend/
 
-COPY ./ /app/
+WORKDIR /app/frontend
 
-ARG VITE_API_URL=${VITE_API_URL}
+RUN bun install
 
-RUN npm run build
+COPY ./frontend /app/frontend
+ARG VITE_API_URL
+
+RUN bun run build
 
 
 # Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
 FROM nginx:1
 
-COPY --from=build-stage /app/dist/ /usr/share/nginx/html
+COPY --from=build-stage /app/frontend/dist/ /usr/share/nginx/html
 
-COPY ./nginx.conf /etc/nginx/conf.d/default.conf
-COPY ./nginx-backend-not-found.conf /etc/nginx/extra-conf.d/backend-not-found.conf
+COPY ./frontend/nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./frontend/nginx-backend-not-found.conf /etc/nginx/extra-conf.d/backend-not-found.conf

docker-compose.override.yml

@@ -2,10 +2,20 @@ FROM mcr.microsoft.com/playwright:v1.57.0-noble
 
 WORKDIR /app
 
-COPY package*.json /app/
+RUN apt-get update && apt-get install -y unzip \
+    && rm -rf /var/lib/apt/lists/*
 
-RUN npm install
+RUN curl -fsSL https://bun.sh/install | bash
+ENV PATH="/root/.bun/bin:$PATH"
 
-COPY ./ /app/
+COPY package.json bun.lock /app/
 
-ARG VITE_API_URL=${VITE_API_URL}
+COPY frontend/package.json /app/frontend/
+
+WORKDIR /app/frontend
+
+RUN bun install
+
+COPY ./frontend /app/frontend
+
+ARG VITE_API_URL

frontend/Dockerfile

@@ -2,42 +2,15 @@
 
 The frontend is built with [Vite](https://vitejs.dev/), [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), [TanStack Query](https://tanstack.com/query), [TanStack Router](https://tanstack.com/router) and [Tailwind CSS](https://tailwindcss.com/).
 
-## Frontend development
+## Requirements
 
-Before you begin, ensure that you have either the Node Version Manager (nvm) or Fast Node Manager (fnm) installed on your system.
+- [Bun](https://bun.sh/) (recommended) or [Node.js](https://nodejs.org/)
 
-* To install fnm follow the [official fnm guide](https://github.com/Schniz/fnm#installation). If you prefer nvm, you can install it using the [official nvm guide](https://github.com/nvm-sh/nvm#installing-and-updating).
-
-* After installing either nvm or fnm, proceed to the `frontend` directory:
-
-```bash
-# If using fnm
-fnm install
-
-# If using nvm
-nvm install
-```
-
-* Once the installation is complete, switch to the installed version:
-
-```bash
-# If using fnm
-fnm use
-
-# If using nvm
-nvm use
-```
-
-* Within the `frontend` directory, install the necessary NPM packages:
-
-```bash
-npm install
-```
-
-* And start the live server with the following `npm` script:
+## Quick Start
 
 ```bash
-npm run dev
+bun install
+bun run dev
 ```
 
 * Then open your browser at http://localhost:5173/.
@@ -89,7 +62,7 @@ But it would be only to clean them up, leaving them won't really have any effect
 * To generate the frontend client, run:
 
 ```bash
-npm run generate-client
+bun run generate-client
 ```
 
 * Commit the changes.
@@ -128,13 +101,13 @@ docker compose up -d --wait backend
 Then, you can run the tests with the following command:
 
 ```bash
-npx playwright test
+bunx playwright test
 ```
 
 You can also run your tests in UI mode to see the browser and interact with it running:
 
 ```bash
-npx playwright test --ui
+bunx playwright test --ui
 ```
 
 To stop and remove the Docker Compose stack and clean the data created in tests, use the following command: