Introduce pnpm for package manager (#361)

* Introduce Mono Repo structure using pnpm * Add setting for pnpm installation in docker * Change `pnpm ci` to `pnpm i` & `lint-staged` location * Fix README.md about full stack development mode * Change version in root package.json * Change formatting * Remove redundant pnpm installation step * Use `pnpm install --frozen-lockfile` for CI environments * Clarify instruction in README.md * Fix instructions about package.json and version * Add generate prisma script * Fix frontend build error * Add dependency * Change off to error * Change into new pnpm-lock.yaml * Add cache "pnpm" in CI * Manage the version only in root `package.json` * Remove version pnpm * Add dockerfile * Delete ./backend/Dockerfile * Add package.json version * Add necessary setting in Dockerfile * Fix tab indentation and format script * Fix MAINTAINING.md * Fix format * Fix frontend, backend readme.md * Delete # @Format in yaml * Fix frontend readme.md * Fix Dockerfile and location of .dockerignore --------- Co-authored-by: blurfx <[email protected]>
yorkie-team · Oct 10, 2024 · 7063137 · 7063137
1 parent 1dbd668
commit 7063137
Show file tree

Hide file tree

Showing 30 changed files with 13,893 additions and 22,033 deletions.
diff --git a/backend/.dockerignore → .dockerignore b/backend/.dockerignore → .dockerignore
diff --git a/.github/workflows/ci_backend.yaml b/.github/workflows/ci_backend.yaml
@@ -22,20 +22,27 @@ jobs:
     env:
       working-directory: ./backend
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
       - name: Install packages
-        run: npm ci
+        run: pnpm install --frozen-lockfile
+        working-directory: ${{ env.working-directory }}
+      - name: Generate prisma
+        run: pnpm db:generate
         working-directory: ${{ env.working-directory }}
       - name: Prettier
-        run: npm run format:check
+        run: pnpm run format:check
         working-directory: ${{ env.working-directory }}
       - name: Lint
-        run: npm run lint
+        run: pnpm run lint
         working-directory: ${{ env.working-directory }}
       - name: Build
-        run: npm run build
+        run: pnpm run build
         working-directory: ${{ env.working-directory }}
diff --git a/.github/workflows/ci_frontend.yaml b/.github/workflows/ci_frontend.yaml
@@ -22,20 +22,24 @@ jobs:
     env:
       working-directory: ./frontend
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
       - name: Install packages
-        run: npm ci
+        run: pnpm install --frozen-lockfile
         working-directory: ${{ env.working-directory }}
       - name: Prettier
-        run: npm run format:check
+        run: pnpm run format:check
         working-directory: ${{ env.working-directory }}
       - name: Lint
-        run: npm run lint
+        run: pnpm run lint
         working-directory: ${{ env.working-directory }}
       - name: Build
-        run: npm run build
+        run: pnpm run build
         working-directory: ${{ env.working-directory }}
diff --git a/.github/workflows/gh_pages.yaml b/.github/workflows/gh_pages.yaml
@@ -12,13 +12,14 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v4
-
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
       - name: Setup Node 🔧
         uses: actions/setup-node@v4
         with:
           node-version: "18"
-          cache: "npm"
-          cache-dependency-path: frontend/package-lock.json
+          cache: "pnpm"
+          cache-dependency-path: pnpm-lock.yaml
 
       - name: Setup Sentry Env 🛠️
         working-directory: ${{ env.working-directory }}
@@ -32,8 +33,8 @@ jobs:
         env:
           NODE_OPTIONS: "--max_old_space_size=4096"
         run: |
-          npm ci
-          npm run build
+          pnpm install --frozen-lockfile
+          pnpm run build
 
       - name: Deploy 🚀
         uses: JamesIves/[email protected]

diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,54 @@
+# Stage 1: build codepair backend
+# Start from the node base image
+FROM node:alpine3.18 AS base
+# Set pnpm installation directory and add it to the PATH
+RUN corepack enable
+RUN corepack use pnpm@9
+
+# Download dependency for Prisma
+RUN apk upgrade --update-cache --available && \
+    apk add openssl && \
+    rm -rf /var/cache/apk/*
+
+# Download dependencies for Puppeteer
+RUN apk add --no-cache \
+    chromium \
+    nss \
+    freetype \
+    harfbuzz \
+    ca-certificates \
+    ttf-freefont \
+    wget \
+    unzip
+
+# Download Korean font for Puppeteer
+RUN mkdir /usr/share/fonts/nanumfont && \
+    wget http://cdn.naver.com/naver/NanumFont/fontfiles/NanumFont_TTF_ALL.zip && \
+    unzip NanumFont_TTF_ALL.zip -d /usr/share/fonts/nanumfont && \ 
+    fc-cache -f -v
+
+# Set the environment variables
+ENV NODE_ENV production
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
+ENV PUPPETEER_EXECUTABLE_PATH /usr/bin/chromium-browser
+
+# Stage 2: build stage
+FROM base AS build
+COPY . /usr/src/app
+WORKDIR /usr/src/app
+RUN sed -i 's/"prepare": "husky install"/"prepare": ""/' ./package.json
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN pnpm backend db:generate
+RUN pnpm backend build
+RUN pnpm deploy --filter=backend --prod /prod/backend
+WORKDIR /prod/backend
+RUN pnpx prisma generate
+
+# Stage 3: deploy stage
+FROM base AS backend
+COPY --from=build /prod/backend /prod/backend
+WORKDIR /prod/backend
+EXPOSE 3000
+
+# Run the backend server
+CMD ["pnpm", "run", "start:prod"]
diff --git a/MAINTAINING.md b/MAINTAINING.md
@@ -1,11 +1,13 @@
+<!-- @format -->
+
 # Maintaining CodePair
 
 ## Releasing a New Version
 
 ### 1. Update the version number.
 
-- Update `version` in [package.json in `frontend/`](https://github.com/yorkie-team/codepair/blob/1f10dff1d9c253f921ba136c812383fbb292078f/frontend/package.json#L5) and [package.json in `backend/`](https://github.com/yorkie-team/codepair/blob/1f10dff1d9c253f921ba136c812383fbb292078f/backend/package.json#L3).
-- Update `version` in `package-lock.json` in `frontend/` and `backend/`. It will be automatically updated when you run `npm install`.
+- Update the `version` field in the root `package.json` file to reflect the overall version of the monorepo.
+- Also, update `version` fields in the [`frontend` package.json](https://github.com/yorkie-team/codepair/blob/1f10dff1d9c253f921ba136c812383fbb292078f/frontend/package.json#L3) and [`backend` package.json](https://github.com/yorkie-team/codepair/blob/1f10dff1d9c253f921ba136c812383fbb292078f/backend/package.json#L3).
 
 ### 2. Write changelog of this version in [CHANGELOG.md](https://github.com/yorkie-team/codepair/blob/main/CHANGELOG.md).
 

diff --git a/README.md b/README.md
@@ -62,15 +62,19 @@ We offer two options. Choose the one that best suits your needs:
    docker-compose -f ./backend/docker/docker-compose-full.yml up -d
    ```
 
-3. Run the Frontend application:
+3. Install dependencies from the root.
 
    ```bash
-   cd frontend
-   npm install
-   npm run dev
+   pnpm install
    ```
 
-4. Visit http://localhost:5173 to enjoy your CodePair.
+4. Run the Frontend application.
+
+   ```bash
+   pnpm frontend dev
+   ```
+
+5. Visit http://localhost:5173 to enjoy your CodePair.
 
 ### 3-2. Full Stack Development Mode
 
@@ -91,20 +95,17 @@ We offer two options. Choose the one that best suits your needs:
    docker-compose -f ./backend/docker/docker-compose.yml up -d
    ```
 
-3. Run the Backend application:
+3. Install dependencies from the root.
 
    ```bash
-   cd backend
-   npm install
-   npm run start:dev
+   pnpm install
    ```
 
-4. Run the Frontend application:
+4. Run the Backend application and the Frontend application:
 
    ```bash
-   cd ../frontend
-   npm install
-   npm run dev
+   pnpm backend start:dev
+   pnpm frontend dev
    ```
 
 5. Visit http://localhost:5173 to enjoy your CodePair.

diff --git a/backend/.eslintrc.js b/backend/.eslintrc.js
diff --git a/backend/Dockerfile b/backend/Dockerfile
diff --git a/backend/README.md b/backend/README.md
@@ -27,15 +27,20 @@ This project is the backend part of the CodePair service developed using NestJS.
     docker-compose -f ./backend/docker/docker-compose.yml up -d
     ```
 
-4. Run the Backend application:
+4. Install dependencies from the root.
 
     ```bash
-    cd backend
-    npm install
-    npm run start:dev
+    pnpm install
     ```
 
-5. Visit http://localhost:3000 to enjoy your CodePair.
+5. Run the Backend application:
+
+    ```bash
+    # In the root directory of the repository and run.
+    pnpm backend start:dev
+    ```
+
+6. Visit http://localhost:3000 to enjoy your CodePair.
 
 ## API Specification
 
@@ -46,31 +51,31 @@ You can access the Swagger-based REST API specification at `<API_URL>/api` when
 ### Building the Project:
 
 ```bash
-npm run build
+pnpm backend build
 ```
 
 Builds the project.
 
 ### Linting the Code:
 
 ```bash
-npm run lint
+pnpm backend lint
 ```
 
 Lints TypeScript files using ESLint. Fixes any fixable linting errors.
 
 ### Testing:
 
 ```bash
-npm test
+pnpm backend test
 ```
 
 Runs unit tests using Jest.
 
 ### Running in Production:
 
 ```bash
-npm start
+pnpm backend start
 ```
 
 Starts the server in production mode.

diff --git a/backend/design/README.md b/backend/design/README.md
@@ -2,17 +2,17 @@
 
 ## Contents
 
-- [Architecture](./architecture.md): The architecture of CodePair's NestJS backend
-- [Yorkie Auth Webhook](./auth-webhook.md): Auth Webhook to prevent users from accessing unauthorized documents using a Public Key
+-   [Architecture](./architecture.md): The architecture of CodePair's NestJS backend
+-   [Yorkie Auth Webhook](./auth-webhook.md): Auth Webhook to prevent users from accessing unauthorized documents using a Public Key
 
 ## Maintaining the Document
 
 For significant scope and complex new features, it is recommended to write a Design Document before starting any implementation work. On the other hand, we don't need to design documentation for small, simple features and bug fixes.
 
 Writing a design document for big features has many advantages:
 
-- It helps new visitors or contributors understand the inner workings or the architecture of the project.
-- We can agree with the community before code is written that could waste effort in the wrong direction.
+-   It helps new visitors or contributors understand the inner workings or the architecture of the project.
+-   We can agree with the community before code is written that could waste effort in the wrong direction.
 
 While working on your design, writing code to prototype your functionality may be useful to refine your approach.